Um cheat sheet pesquisável de tipos do React com TypeScript: props, children, useState, eventos, refs, context, reducers e componentes genéricos, cada um com código para copiar.
No React com TypeScript você tipa principalmente as props de um componente, e a inferência cuida do resto. Descreva as props com uma interface, use React.ReactNode para children, passe um argumento de tipo ao useState quando o valor inicial for restrito demais e escolha tipos de evento como React.ChangeEvent<HTMLInputElement> para os handlers. Arquivos com JSX usam a extensão .tsx.
Os tipos mais usados
Pesquise no cheat sheet o que você está tentando tipar, como um handler de clique ou uma ref, e copie a linha. Em seguida vêm exemplos completos e mais longos para context, reducers e componentes genéricos.
Adicione children: React.ReactNode à interface de props. ReactNode cobre strings, números, elementos, arrays e null. Use React.ReactElement só quando o componente precisar receber um único elemento JSX.
Um array vazio não dá ao verificador nada para inferir. Passe o tipo dos elementos: useState<string[]>([]). O mesmo vale para valores iniciais null, como em useState<User | null>(null).
Chame useRef<HTMLInputElement>(null) e conecte-a com ref={inputRef}. Leia inputRef.current com uma checagem de null, porque ele é null até o React montar o elemento e volta a ser depois que ele é desmontado.
A documentação atual do React mostra um componente de função recebendo ref como uma prop comum e colocando-a no elemento interno. Tipe essa prop como React.Ref<HTMLInputElement>. Códigos mais antigos envolvem o componente em forwardRef.
Quando não há um padrão razoável, use createContext<Value | null>(null) e envolva o useContext em um pequeno hook que lança um erro se o valor for null. Assim, todo consumidor recebe um tipo não nulo e um erro claro se faltar um provider.
Props opcionais ganham valores padrão na assinatura; children aceita qualquer coisa renderizável.
O hook lança um erro claro fora do provider e devolve um valor não nulo dentro dele.
Dentro de cada case a action é refinada, então action.item só existe onde deve existir.
T é fixado pelos itens que quem chama passa, então renderItem recebe o tipo certo.
O pai cria a ref; o filho a coloca no input real.
Props
Objeto de props
Props
Children de qualquer tipo
Props
Apenas um elemento como filho
Props
Variante limitada a poucos valores
Props
Repassar props nativas do botão
Props
Prop de estilo
Props
Prop de callback
State
State numérico (inferido)
State
State que pode ser null
State
State de array vazio
State
Union de status
State
Setter passado como prop
Events
Mudança em input de texto
Events
Mudança em select
Events
Clique em botão
Events
Envio de formulário
Events
Tecla pressionada
Events
Tipo do handler inteiro
Refs
Ref para um elemento do DOM
Refs
Ref que guarda o id de um timer
Refs
Ref recebida como prop
Context
Context sem valor padrão
Reducer
Union de actions
Todos
Props
State
Eventos
Refs
Context
Reducer
Pesquisar no cheat sheet
event, ref, children...
Filtrar por grupo
Copiar
{n} de {v} linhas exibidas
Nenhuma linha corresponde. Tente uma palavra mais curta.
Comece grátis · Sem cartão de crédito