Todo Desenvolvedor/Programador geralmente é focado e especializado em uma linguagem. Venho de uma linha mais generalista e até estou lendo um livro sobre, nas redes sosciais postei sobre, onde continuo a saga de entender se seria melhor ser um especialista ou generalista. Enquanto isso, me divirto aprendendo e agregando conhecimento. React.js e toda gama de libs e frameworks que agragam valor a uma solução não esta fora disso.

Faz +12 anos, talvez um pouco mais, que desenvolvo com tecnologia front-end e pouco mais de 1 ano que desenvolvo com React.js e e toda gama de libs e frameworks. Então a ideia é comentar um pouco.

Este tópico dá inicio a u básico de React com TypeScript. A ideia é evoluir agregando e mostrando o conhecimento com o passar do tempo e disponibilidade, claro.

Preciso antes, pincelar de leve sobre Yarn, um gerenciador de pacotes de códigos. Tão eficiente quanto o NPM e o Bower, que muito usei, o Yarn ganhou muitos adeptos.

Alguns comandos básicos que você precisa ou vai acabar conhecendo.

Para instalar uma dependência do seu arquivo package.json basta executar:

yarn add [pacote]

yarn add [pacote]@[versão]

yarn add [pacote]@[tag]

Para atualizar uma dependência

yarn upgrade [pacote]

yarn upgrade [pacote]@[versão]

yarn upgrade [pacote]@[tag]

Para remover uma dependência

yarn remove [pacote]

Para instalar todas as dependências de um projeto

yarn install

De volta ao tópico deste post.

React é muito simples e abrange uma complexa linha de possibilidades. Pra mim é uma das melhores bibliotecas front-end da atualidade.

TypeScript é uma linguagem de programação estrita e estaticamente tipada, tornando nosso código JavaScript mais previsível.

Para criar qualquer aplicativo usando o template do typescript, basta executar a linha de comando:

yarn create react-app todo-app --template typescript

A estrutura do nosso aplicativo deve ficar assim.

Para executar e abrir o aplicativo no navegador, basta usar yarn start. E você tem uma estrutura básica pronta e funcional para criar.

Quanto ao TypeScript, existem duas possibilidades de uso, Tipos e interfaces (typescriptlang.org/docs/handbook/advanced-types.html)

Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

Alias ​​do tipo

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;