Usando TypeScript

TypeScript é uma forma popular de adicionar definições de tipo a bases de código JavaScript. Por padrão, o TypeScriptsuporta JSXe você pode obter suporte completo ao React Web adicionando@types/react e @types/react-domao seu projeto.

Instalação

Todas asestruturas React de nível de produçãooferecem suporte para o uso de TypeScript. Siga o guia específico da estrutura para instalação:

• Next.js
• Remix
• Gatsby
• Expo

Adicionando TypeScript a um projeto React existente

Para instalar a versão mais recente das definições de tipo do React:

npm install --save-dev @types/react @types/react-dom

As seguintes opções do compilador precisam ser definidas no seutsconfig.json:

1. domdeve ser incluído emlib(Nota: Se nenhuma opçãolibfor especificada,domé incluído por padrão).
2. jsxdeve ser definido como uma das opções válidas.preserveSe você estiver publicando uma biblioteca, consulte adocumentação jsxpara saber qual valor escolher.

TypeScript com Componentes React

Escrever TypeScript com React é muito semelhante a escrever JavaScript com React. A principal diferença ao trabalhar com um componente é que você pode fornecer tipos para as props do seu componente. Esses tipos podem ser usados para verificação de correção e para fornecer documentação em linha nos editores.

Tomando ocomponente MyButtondo guia deInício Rápido, podemos adicionar um tipo descrevendo otitledo botão:

Esta sintaxe em linha é a maneira mais simples de fornecer tipos para um componente, embora, uma vez que você comece a ter alguns campos para descrever, possa se tornar complicada. Em vez disso, você pode usar umainterfaceou umtypepara descrever as props do componente:

O tipo que descreve as props do seu componente pode ser tão simples ou complexo quanto necessário, embora deva ser um tipo de objeto descrito comtypeouinterface. Você pode aprender sobre como o TypeScript descreve objetos emTipos de Objetos, mas também pode se interessar em usarTipos de Uniãopara descrever uma prop que pode ser um de alguns tipos diferentes e o guiaCriando Tipos a Partir de Tipospara casos de uso mais avançados.

Exemplos de Hooks

As definições de tipo de@types/reactincluem tipos para os Hooks integrados, então você pode usá-los em seus componentes sem configuração adicional. Eles são construídos para levar em conta o código que você escreve em seu componente, então você obterátipos inferidosna maioria das vezes e idealmente não precisará lidar com os detalhes de fornecer os tipos.

No entanto, podemos ver alguns exemplos de como fornecer tipos para Hooks.

useState

O Hook useStatereutilizará o valor passado como estado inicial para determinar qual deve ser o tipo do valor. Por exemplo:

Isso atribuirá o tipoboolean a enabled, esetEnabledserá uma função que aceita um argumentobooleanou uma função que retorna umboolean. Se você quiser fornecer explicitamente um tipo para o estado, pode fazê-lo fornecendo um argumento de tipo à chamada deuseState:

Isso não é muito útil neste caso, mas um caso comum em que você pode querer fornecer um tipo é quando tem um tipo de união. Por exemplo,statusaqui pode ser uma de algumas strings diferentes:

Ou, conforme recomendado emPrincípios para estruturar o estado, você pode agrupar estados relacionados como um objeto e descrever as diferentes possibilidades por meio de tipos de objeto:

useReducer

O Hook useReduceré um Hook mais complexo que recebe uma função redutora e um estado inicial. Os tipos para a função redutora são inferidos a partir do estado inicial. Você pode opcionalmente fornecer um argumento de tipo à chamada deuseReducerpara fornecer um tipo para o estado, mas muitas vezes é melhor definir o tipo no estado inicial:

Estamos usando TypeScript em alguns pontos-chave:

• interface Statedescreve a forma do estado do redutor.
• type CounterActiondescreve as diferentes ações que podem ser despachadas para o redutor.
• const initialState: Statefornece um tipo para o estado inicial, e também o tipo que é usado por padrão pelouseReducer.
• stateReducer(state: State, action: CounterAction): Statedefine os tipos para os argumentos e o valor de retorno da função redutora.

Uma alternativa mais explícita à definição do tipo eminitialStateé fornecer um argumento de tipo para ouseReducer:

useContext

O Hook useContexté uma técnica para passar dados pela árvore de componentes sem precisar passar props através dos componentes. Ele é usado criando um componente provedor e, frequentemente, criando um Hook para consumir o valor em um componente filho.

O tipo do valor fornecido pelo contexto é inferido a partir do valor passado para a chamada decreateContext:

Essa técnica funciona quando você tem um valor padrão que faz sentido - mas ocasionalmente há casos em que você não tem, e nesses casosnullpode parecer razoável como valor padrão. No entanto, para permitir que o sistema de tipos entenda seu código, você precisa definir explicitamenteContextShape | null no createContext.

Isso causa o problema de que você precisa eliminar o| nullno tipo para os consumidores do contexto. Nossa recomendação é fazer com que o Hook faça uma verificação em tempo de execução para sua existência e lance um erro quando não estiver presente:

useMemo

O useMemocria/reacessa um valor memorizado a partir de uma chamada de função, reexecutando a função apenas quando as dependências passadas como 2º parâmetro são alteradas. O resultado da chamada do Hook é inferido a partir do valor de retorno da função no primeiro parâmetro. Você pode ser mais explícito fornecendo um argumento de tipo para o Hook.

useCallback

O useCallbackfornece uma referência estável a uma função, desde que as dependências passadas no segundo parâmetro sejam as mesmas. Como ouseMemo, o tipo da função é inferido a partir do valor de retorno da função no primeiro parâmetro, e você pode ser mais explícito fornecendo um argumento de tipo para o Hook.

Ao trabalhar no modo estrito do TypeScript, ouseCallbackrequer a adição de tipos para os parâmetros em seu callback. Isso ocorre porque o tipo do callback é inferido a partir do valor de retorno da função, e sem parâmetros o tipo não pode ser totalmente compreendido.

Dependendo de suas preferências de estilo de código, você poderia usar as funções*EventHandlerdos tipos do React para fornecer o tipo para o manipulador de eventos ao mesmo tempo em que define o callback:

Tipos Úteis

Existe um conjunto bastante extenso de tipos que vêm do pacote@types/react, vale a pena dar uma lida quando você se sentir confortável com a interação entre React e TypeScript. Você pode encontrá-losna pasta do React no DefinitelyTyped. Cobriremos alguns dos tipos mais comuns aqui.

Eventos do DOM

Ao trabalhar com eventos do DOM no React, o tipo do evento geralmente pode ser inferido a partir do manipulador de eventos. No entanto, quando você quiser extrair uma função para ser passada a um manipulador de eventos, precisará definir explicitamente o tipo do evento.

Existem muitos tipos de eventos fornecidos nos tipos do React - a lista completa pode ser encontradaaqui, que é baseada noseventos mais populares do DOM.

Ao determinar o tipo que você está procurando, você pode primeiro olhar as informações de hover para o manipulador de eventos que está usando, que mostrará o tipo do evento.

Se você precisar usar um evento que não está incluído nesta lista, pode usar o tipoReact.SyntheticEvent, que é o tipo base para todos os eventos.

Children

Existem dois caminhos comuns para descrever os filhos (children) de um componente. O primeiro é usar o tipoReact.ReactNode, que é uma união de todos os tipos possíveis que podem ser passados como filhos no JSX:

Esta é uma definição muito ampla de filhos. O segundo é usar o tipoReact.ReactElement, que são apenas elementos JSX e não primitivos JavaScript como strings ou números:

Observe que você não pode usar TypeScript para descrever que os filhos são um certo tipo de elementos JSX, portanto, não pode usar o sistema de tipos para descrever um componente que aceita apenas filhos do tipo<li>.

Você pode ver um exemplo de ambos,React.ReactNode e React.ReactElement, com o verificador de tipos noTypeScript playground.

Props de Estilo

Ao usar estilos inline no React, você pode usarReact.CSSPropertiespara descrever o objeto passado para a propstyle. Este tipo é uma união de todas as propriedades CSS possíveis e é uma boa maneira de garantir que você está passando propriedades CSS válidas para a propstyle, e para obter auto-completar no seu editor.

Aprendizado Adicional

Páginas individuais de API na documentação podem conter documentação mais aprofundada sobre como usá-las com TypeScript.

Recomendamos os seguintes recursos:

• O manual do TypeScripté a documentação oficial do TypeScript e cobre a maioria dos principais recursos da linguagem.
• As notas de lançamento do TypeScriptabordam novos recursos em profundidade.
• React TypeScript Cheatsheeté uma folha de dicas mantida pela comunidade para usar TypeScript com React, cobrindo muitos casos de uso úteis e fornecendo mais amplitude do que este documento.
• TypeScript Community Discordé um ótimo lugar para fazer perguntas e obter ajuda com problemas de TypeScript e React.