TypeScript em RN: Boas Práticas

Um resumo condensado das 25 práticas recomendadas mais importantes, extraídas de todas as páginas desta seção.

1. Estenda expo/tsconfig.base: Projetos Expo SDK 57 devem começar com a configuração base oficial - ela inclui as configurações corretas de jsx, resolução de módulos e caminhos para tipagens de Metro e módulos nativos.

2. Ative strict para telas greenfield: Novos arquivos .tsx devem compilar com rigor total desde o primeiro dia; aplicativos brownfield ativam as flags incrementalmente, módulo por módulo, em vez de ativar tudo de uma vez.

3. Nomeie as props de cada componente: Exporte uma interface (ou tipo) ComponentNameProps ao lado do componente - tipos de objeto inline não escalam bem em refatorações e histórias do Storybook.

4. Prefira uniões discriminadas para variantes: Modele { variant: "a"; aField: string } | { variant: "b"; bField: number } em vez de campos opcionais em cada ramificação - o TypeScript faz o narrowing corretamente dentro de cada caso.

5. Evite React.FC em código novo: Digite o parâmetro da função diretamente - React.FC adiciona ruído implícito de children e é idiomaticamente depreciado em projetos React 19.

6. Reutilize tipos de props do RN com ComponentProps: Estenda primitivos via ComponentProps<typeof Pressable> e use Omit apenas para as chaves que você substitui - listas de props escritas manualmente se desviam quando o RN adiciona props de acessibilidade ou de plataforma.

7. Tipos de manipuladores de pressionamento a partir de PressableProps: Use PressableProps["onPress"] em vez de escrever manualmente assinaturas GestureResponderEvent que podem omitir parâmetros opcionais.

8. Envie genéricos para componentes de lista: Declare FlatList<Place> e SectionList<Place> no limite da lista - fazer casting de data as Place[] dentro de listas compartilhadas esconde erros do chamador.

9. Use readonly T[] para props de exibição: Evite que os chamadores modifiquem arrays que você renderiza - props são um contrato, não um buffer compartilhado mutável.

10. Habilite rotas tipadas do Expo Router: Defina experiments.typedRoutes: true em app.config e inclua .expo/types/**/*.ts para que Href e router.push capturem caminhos inválidos em tempo de compilação.

11. Regenere tipos de rota em CI: Execute npx expo customize tsconfig.json antes de tsc --noEmit - sem tipos gerados, todo href degrada para string.

12. Passe rotas dinâmicas como hrefs de objeto: Use { pathname: "/user/[id]", params: { id } } - literais de string como "/user/[id]" falham nas verificações de rota tipada porque os parâmetros estão ausentes.

13. Combine os nomes dos colchetes exatamente: Um arquivo [id].tsx requer params: { id }, não { userId } - as chaves de parâmetro devem espelhar o segmento do sistema de arquivos.

14. Valide parâmetros de URL com Zod: Rotas tipadas provam a forma do caminho, não a segurança do valor - analise a saída de useLocalSearchParams antes de usar IDs em chamadas de fetch.

15. Trate JSON de fetch como unknown: res.json() não valida - atribua a unknown, depois Schema.parse(data); nunca as MyInterface na fronteira.

16. Modele envelopes de API explicitamente: Analise wrappers { items, nextCursor }, não arrays puros - backends adicionam campos de paginação sem um major version bump.

17. Use .nullable() para nulls de SQL: Backend avatarUrl: null falha esquemas .optional() - distinga chaves ausentes (opcional) de nulls presentes (nullable).

18. Converta números na fronteira: Gateways às vezes transformam campos numéricos em string - z.coerce.number() pertence ao esquema Zod, não a chamadas repetidas de Number() em telas.

19. Tipos de estilos como StyleProp<ViewStyle>: Chamadores precisam passar arrays de estilos e guardas falsy - ViewStyle puro rejeita [styles.base, pressed && styles.active].

20. Use PressableProps["style"] para wrappers de pressionamento: Estilos de Pressable podem ser funções do estado pressed - fazer narrowing para ViewStyle quebra a forma de callback.

21. Envolva módulos nativos com requireNativeModule tipado: Declare uma interface NativeModule e analise retornos assíncronos com Zod - bindings JSI ainda podem retornar formas inesperadas entre versões do SO.

22. Use requireOptionalNativeModule em caminhos do Expo Go: Módulos ausentes no Expo Go devem degradar graciosamente - require opcional mais feature flags é melhor que try/catch em torno de cada chamada.

23. Fase a rigorosidade em aplicativos brownfield: Habilite noImplicitAny, depois strictNullChecks, depois strict - uma flag por sprint mantém os PRs revisáveis.

24. Prefira @ts-expect-error em vez de @ts-ignore: expect-error falha quando o erro subjacente é corrigido - comentários ignore persistem e escondem regressões reais.

25. Verifique tipos em CI separadamente do lint: Execute tsc --noEmit em cada PR - ESLint não captura hrefs de rota inválidos, incompatibilidades Zod ou inferência genérica quebrada.

FAQs

Relacionados

• Noções Básicas de TypeScript em RN - tsconfig estrito e exemplos tipados introdutórios
• Tipando Componentes e Props - uniões, genéricos e contratos de props
• Tipando Navegação e Parâmetros de Rota - parâmetros do Expo Router e validação
• Tipando Respostas de API e Zod - validação em tempo de execução em fronteiras de fetch
• Rotas Tipadas do Expo Router - tipos Href gerados e configuração de CI
• Tipagem Gradual em Aplicativos Brownfield - playbook de rigor incremental

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).