Mejores prácticas de TypeScript en RN

Un resumen condensado de las 25 mejores prácticas más importantes extraídas de todas las páginas de esta sección.

1. Extiende expo/tsconfig.base: Los proyectos de Expo SDK 57 deben partir de la configuración base oficial - incluye el jsx correcto, resolución de módulos y rutas para Metro y tipificación de módulos nativos.

2. Activa strict para pantallas nuevas: Los nuevos archivos .tsx deben compilarse bajo strictness total desde el primer día; las aplicaciones brownfield implementan flags módulo por módulo en lugar de activar todo de una vez.

3. Nombra las props de cada componente: Exporta una interfaz ComponentNameProps (o tipo) junto al componente - los tipos de objeto inline no escalan a través de refactores e historias de Storybook.

4. Prefiere uniones discriminadas para variantes: Modela { variant: "a"; aField: string } | { variant: "b"; bField: number } en lugar de campos opcionales en cada rama - TypeScript realiza narrowing correctamente dentro de cada caso.

5. Evita React.FC en código nuevo: Tipifica el parámetro de función directamente - React.FC añade ruido implícito de children y es deprecado idiomáticamente en proyectos React 19.

6. Reutiliza tipos de prop de RN con ComponentProps: Extiende primitivas vía ComponentProps<typeof Pressable> y Omit solo las claves que reemplazas - las listas de prop hechas a mano se desvían cuando RN añade accesibilidad o props de plataforma.

7. Tipifica manejadores de press desde PressableProps: Usa PressableProps["onPress"] en lugar de escribir manualmente firmas GestureResponderEvent que pueden perder parámetros opcionales.

8. Empuja genéricos a componentes de lista: Declara FlatList<Place> y SectionList<Place> en el límite de la lista - hacer cast data as Place[] dentro de listas compartidas oculta errores del llamador.

9. Usa readonly T[] para props de visualización: Evita que los llamadores muten arrays que renderizas - las props son un contrato, no un búfer compartido mutable.

10. Habilita rutas tipificadas de Expo Router: Establece experiments.typedRoutes: true en app.config e incluye .expo/types/**/*.ts para que Href y router.push capturen rutas inválidas en tiempo de compilación.

11. Regenera tipos de ruta en CI: Ejecuta npx expo customize tsconfig.json antes de tsc --noEmit - sin tipos generados, cada href se degrada a string.

12. Pasa rutas dinámicas como hrefs de objeto: Usa { pathname: "/user/[id]", params: { id } } - literales de string como "/user/[id]" fallan en comprobaciones de rutas tipificadas porque los params faltan.

13. Coincide exactamente los nombres entre corchetes: Un archivo [id].tsx requiere params: { id }, no { userId } - las claves de param deben reflejar el segmento del filesystem.

14. Valida params de URL con Zod: Las rutas tipificadas prueban la forma de la ruta, no la seguridad del valor - analiza la salida de useLocalSearchParams antes de usar IDs en llamadas fetch.

15. Trata fetch JSON como unknown: res.json() no valida - asigna a unknown, luego Schema.parse(data); nunca as MyInterface en el límite.

16. Modela envolturas de API explícitamente: Analiza envoltorios { items, nextCursor }, no arrays desnudos - los backends añaden campos de paginación sin un bump de versión mayor.

17. Usa .nullable() para nulos de SQL: El backend avatarUrl: null falla esquemas .optional() - distingue claves ausentes (optional) de nulos presentes (nullable).

18. Coerciona números en el límite: Las puertas a veces stringifican campos numéricos - z.coerce.number() pertenece al esquema Zod, no repetidas llamadas Number() en pantallas.

19. Tipifica estilos como StyleProp<ViewStyle>: Los llamadores necesitan pasar arrays de estilo y guardias falsy - ViewStyle desnudo rechaza [styles.base, pressed && styles.active].

20. Usa PressableProps["style"] para envoltorios pressable: Los estilos de Pressable pueden ser funciones de estado pressed - reducir a ViewStyle rompe la forma de callback.

21. Envuelve módulos nativos con requireNativeModule tipificado: Declara una interfaz NativeModule y analiza devoluciones async con Zod - los bindings JSI aún pueden devolver formas inesperadas entre versiones de SO.

22. Usa requireOptionalNativeModule en rutas de Expo Go: Módulos que falten en Expo Go deben degradarse elegantemente - require opcional más flags de característica supera try/catch alrededor de cada llamada.

23. Implementa strictness en aplicaciones brownfield: Habilita noImplicitAny, luego strictNullChecks, luego strict - una flag por sprint mantiene los PRs revisables.

24. Prefiere @ts-expect-error sobre @ts-ignore: Expect-error falla cuando el error subyacente es corregido - los comentarios ignore persisten y ocultan regresiones reales.

25. Typecheckea en CI separadamente de lint: Ejecuta tsc --noEmit en cada PR - ESLint no captura hrefs de ruta inválidos, desajustes de Zod, o inferencia genérica rota.

Preguntas frecuentes

Relacionado

• TypeScript in RN Basics - tsconfig estricta y ejemplos tipificados introductorios
• Typing Components & Props - uniones, genéricos y contratos de prop
• Typing Navigation & Route Params - params de Expo Router y validación
• Typing API Responses & Zod - validación de tiempo de ejecución en límites fetch
• Expo Router Typed Routes - tipos Href generados y setup de CI
• Gradual Typing in Brownfield Apps - playbook de strictness incremental

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).