TypeScript e React usando create-react-app: um guia passo-a-passo para configurar seu primeiro aplicativo

Primeiros passos no seu primeiro aplicativo TypeScript e React com configuração zero

Este tutorial mostrará como iniciar rapidamente a criação de aplicativos React usando o TypeScript sem a necessidade de qualquer configuração usando o create-react-app react create-react-app (CRA). Vamos supor que você já tenha o Nó e o NPM instalados em sua máquina. Seu aplicativo TypeScript / React funcionará diretamente da caixa sem precisar ejetar o CRA. Além disso, você aprenderá como construir seus próprios componentes e gerenciar props e state usando o TypeScript.

Siga o feed JavaScript para todas as notícias do JS>

Instale o aplicativo create-react-app

create-react-app é uma ferramenta de linha de comando que permite aos desenvolvedores criar facilmente novos aplicativos React com padrões sensíveis e configuração zero.

 npm install -g criar-reagir-app

Inicialize seu aplicativo React com o TypeScript

Invoque o comando create-react-app react create-react-app com uma opção TypeScript adicional para gerar um aplicativo React usando o TypeScript como a sintaxe JS padrão.

 criar-reagir-aplicativo meu-aplicativo --scripts-versão = react-scripts-ts

Se você já usou create-react-app antes, isso deve parecer muito familiar. A informação adicional é adicionar o --scripts-version=react-scripts-ts . react-scripts-ts é o comando que informa ao CRA para usar o TypeScript em vez do JavaScript e adicionar as ferramentas para que ele funcione imediatamente. Isso gerará os seguintes arquivos e estrutura de pastas:

my-app/ 
 ?? .gitignore 
 ?? node_modules/ 
 ?? public/ 
 ?? src/ 
 | - - index.tsx 
| - - registerServiceWorker.ts 
| - - logo.svg 
| - - App.tsx 
| - - App.test.tsx 
| - - App.css 
| - - index.css 
| - - ativos/ 
 ?? package.json 
 ?? tsconfig.json 
 ?? tsconfig.test.json 
 ?? tslint.json

A seguir, uma explicação de cada parte:

  • tsconfig.json declara as opções do TypeScript. Ele fica na raiz de um projeto TypeScript e indica as configurações e arquivos do compilador a serem incluídos.
  • tslint.json são as configurações do linter a serem usadas pelo TSLint .
  • public é a pasta de ativos estáticos que será exibida, como o documento HTML e o arquivo de manifesto.
  • src mantém o código da interface do usuário do aplicativo. Isso inclui nossos componentes TypeScript e estilo CSS. O arquivo index.js tradicional foi substituído por index.tsx como o ponto de entrada.

Reagir tipos para TypeScript com arquivos de declaração

Além de configurar a compilação do TypeScript, também recebemos todos os arquivos de declaração necessários para usar o TypeScript com o React. Um arquivo de declaração é usado para descrever os tipos de arquivos gravados em JavaScript nativo – ele pode ser visto como uma interface entre JavaScript e TypeScript. Esses arquivos são prefixados com a declaração @types . A configuração do TypeScript create-react-app react create-react-app é fornecida com os seguintes arquivos de declaração.

  • @types/jest
  • @types/node
  • @types/react
  • @types/react-dom

Estes são instalados via NPM e podem ser encontrados na sua pasta package.json .

Reagir modificações para o TypeScript

Para usar o React com o TypeScript, você deve fazer algumas pequenas modificações em como criar um aplicativo padrão do React.

Use arquivos .tsx para JSX

Além de um novo arquivo .ts para o TypeScript, há também uma nova extensão de arquivo .tsx . Essa é a extensão que você deve usar sempre que incluir a sintaxe JSX em um arquivo do componente React. Você também precisa do jsx configurado como true, o que é feito por padrão. O TypeScript é capaz de compilar o JSX diretamente no JavaScript. Para obter mais informações, você pode revisar os documentos do TypeScript no JSX .

Importando Reagir e ReactDOM

Você pode notar que nos componentes padrão use a seguinte sintaxe:

 import * como Reagir de 'reagir'; 
 import * como ReactDOM de 'react-dom';

Você não pode mais import React from 'react'; . O React é exportado como um módulo CommonJS que não usa uma exportação padrão. Neste ponto, não é imperativo saber exatamente o motivo, mas apenas estar ciente de como você deve importar o React para fazê-lo funcionar. Isso também significa que você declara seus componentes como class App extends React.Component {...} .

Componentes de construção

Uma das melhores partes sobre como usar o TypeScript é que você não precisa mais usar o pacote prop-types . Existe uma pequena curva de aprendizado para usar o TypeScript para props e state, mas depois de entendê-lo, ele é muito mais poderoso do que a metodologia padrão do React.

Você definirá uma interface adereços para cada um de seus componentes aos quais você passa adereços. Isso declara a forma do objeto e os tipos associados às chaves. Além disso, você deve declarar uma interface para o state dos componentes de classe.

Componente funcional sem estado

Para demonstrar um componente funcional com props, substituiremos o cabeçalho <h1> no App.tsx por nosso próprio componente <Header/> . Comece criando Header.tsx . Ele recebe um name prop que vai dizer olá ao nome da pessoa. Dentro do nosso arquivo, vamos criar um componente funcional:

Começamos importando o React. Então nós declaramos a interface Props com uma única string prop de name? . Vamos tornar o nome opcional, então indicamos isso com um ? . Marcando uma chave como opcional significa que seu tipo pode ser string | undefined .

Quando criamos o componente Header , observe o React.SFC<Props> . O “SFC” significa componente funcional sem estado. Embora essa declaração não seja obrigatória, é o que nos permite usar o defaultProps . Finalmente, declaramos o tipo props como Props referenciando a interface que criamos.

Componente de classe

Para mostrar os fundamentos de um componente de classe, substituiremos a descrição de <p> no App.tsx por um contador. Uma das principais diferenças entre uma classe e um componente funcional é que um componente de classe pode manter seu próprio estado. A outra diferença principal é a capacidade de acessar métodos de ciclo de vida que estão fora do escopo deste tutorial.

Crie um arquivo Description.tsx e adicione o seguinte código.

Começamos declarando uma interface para os Props e o State . Haverá uma countBy chamadas de suporte opcional, que determinará o valor de incremento. O componente em si manterá a count usando seu estado.

O componente é declarado com os tipos Props e State como
class Description extends React.Component<Props, State> { e os defaultProps são declarados como uma variável estática. O estado é inicializado com uma count de 0.

A função de increase é usada para incrementar o contador. O countBy é extraído como const countBy: number = this.props.countBy!; . O ponto de exclamação ! indica para o TypeScript que sabemos que o valor existirá e para não lançar um erro potencial undefined . Finalmente, criamos o HTML para conectar o componente.

Seu aplicativo final create-react-with componentes do TypeScript

Dentro do nosso App.tsx nós importamos os componentes que acabamos de criar e substituímos o HTML padrão do CRA. O name prop e countBy prop deve corresponder aos tipos declarados no componente filho. Como os objetos são ambos opcionais, eles também podem ser indefinidos, e defaultProps será usado.

E isso é tudo que você precisa para começar com o TypeScript e o React! Seu aplicativo agora deve ter os novos recursos e estar totalmente em execução com o TypeScript.

Se você estiver interessado em React e TypeScript, siga a publicação itconnected para mais dos nossos próximos tutoriais. Vamos mostrar como construir a qualidade da produção. Reagir aplicativo usando o TypeScript.