Introdução ao uso do TypeScript no React

TypeScript - um superconjunto de JavaScript, sem dúvida tem alguns benefícios surpreendentes - tipagem estática, classes, interfaces e intellisense aprimorado que podem fazer sugestões mais fortes para autocompletar e lidar com possíveis erros antes de compilar. Isso significa que seu editor de código não apenas fará sugestões mais inteligentes para o preenchimento automático, mas também mostrará os erros na hora, em vez de ter que descobrir que algo não está funcionando corretamente quando você muda para o navegador.

Há algumas coisas a serem observadas ao começar a usar o TypeScript no React:

1. Primeiros passos com create-react-app e TypeScript:

Se você estiver iniciando um NOVO projeto usando create-react-app:

npx create-react-app [your app's name] --template typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Agora que estamos usando o TypeScript para reagir, você utilizará a extensão de arquivo .tsx em vez do .js padrão para JavaScript.

As outras coisas que você verá são um tsconfig.json que tem alguns padrões definidos para a configuração do TypeScript e o react-app-env.d.ts, que faz referência aos tipos de react-scripts e ajuda em coisas como permitir SVG importações.

3. Componentes e importações:

Por causa de como as coisas são tipificadas estaticamente no TS, precisamos fazer algumas coisas extras ao configurar nossos componentes. Você precisará importar algumas coisas extras na parte superior de cada componente (* ou você pode usar React. <> Onde <> é o tipo ou evento que você importaria de outra forma).

Algumas coisas comuns que me peguei importando, além de alguns dos ganchos de reação usuais, como useState e useEffect, são ChangeEvent e FC (componente funcional) - o preenchimento automático com TS é NICE ao importar coisas!

import React, { useState, ChangeEvent, FC } from "react";

A última coisa que enfocaremos hoje são as definições de tipo simples. Uma das principais funções do TypeScript é o conhecimento documentado de quais tipos estamos usando e onde alterá-los, além da detecção automática antecipada para evitar bugs e erros.

Existem várias maneiras de declarar um tipo. Um deles é usar uma interface:

export interface Props {   
   name: string;   
   age: number;
}

Observe algumas definições de tipo:

1. 'App: FC', que define nosso App como um componente funcional.
2. 'useState <string> ()' que declara aquele pedaço de estado como uma string. Você também pode fazer isso fornecendo a useState uma string vazia: useState ('')
3. 'event: ChangeEvent <HTMLInputElement>' que declara que tipo de evento é aceito na função onSearchInput.

Saúde, já volto com mais!