Usar TypeScript

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

TypeScript es un lenguaje que extiende JavaScript añadiendo definiciones de tipos. Los nuevos proyectos de React Native usan TypeScript por defecto, pero también admiten JavaScript y Flow.

Empezar con TypeScript

Los nuevos proyectos creados con la CLI de React Native o plantillas populares como Ignite usan TypeScript por defecto.

TypeScript también puede usarse con Expo, que mantiene plantillas para TypeScript, o te pedirá instalar y configurar TypeScript automáticamente cuando añadas un archivo .ts o .tsx a tu proyecto.

shell

npx create-expo-app --template

Añadir TypeScript a un proyecto existente

1. Añade TypeScript, tipos y plugins de ESLint a tu proyecto.

npm

shell

npm install -D typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer

Yarn

shell

yarn add --dev typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer

nota

Este comando añade la última versión de cada dependencia. Las versiones pueden necesitar ajustes para coincidir con los paquetes existentes de tu proyecto. Puedes usar herramientas como React Native Upgrade Helper para ver las versiones incluidas con React Native.

2. Añade un archivo de configuración de TypeScript. Crea un tsconfig.json en la raíz de tu proyecto:

tsconfig.json

{
  "extends": "@react-native/typescript-config"
}

3. Renombra un archivo JavaScript a *.tsx

advertencia

Debes dejar el archivo de entrada ./index.js como está, de lo contrario podrías tener problemas al compilar una versión de producción.

4. Ejecuta tsc para verificar los tipos de tus nuevos archivos TypeScript.

npm

shell

npx tsc

Yarn

shell

yarn tsc

Usar JavaScript en lugar de TypeScript

React Native configura nuevas aplicaciones con TypeScript por defecto, pero aún puedes usar JavaScript. Los archivos con extensión .jsx se tratan como JavaScript en lugar de TypeScript y no se verifican los tipos. Los módulos JavaScript aún pueden importarse en módulos TypeScript, y viceversa.

Cómo funcionan TypeScript y React Native

Por defecto, el código TypeScript se transforma mediante Babel durante el empaquetado. Recomendamos usar el compilador de TypeScript solo para verificación de tipos. Este es el comportamiento predeterminado de tsc en aplicaciones nuevas. Si tienes código TypeScript existente que estás migrando a React Native, existen uno o dos detalles al usar Babel en lugar de TypeScript.

Cómo luce React Native + TypeScript

Puedes definir una interfaz para las Props y el Estado de un componente React mediante React.Component<Props, State>, lo que proporcionará verificación de tipos y autocompletado en editores al trabajar con ese componente en JSX.

components/Hello.tsx

import {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

export type Props = {
  name: string;
  baseEnthusiasmLevel?: number;
};

function Hello({name, baseEnthusiasmLevel = 0}: Props) {
  const [enthusiasmLevel, setEnthusiasmLevel] = useState(
    baseEnthusiasmLevel,
  );

  const onIncrement = () =>
    setEnthusiasmLevel(enthusiasmLevel + 1);
  const onDecrement = () =>
    setEnthusiasmLevel(
      enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
    );

  const getExclamationMarks = (numChars: number) =>
    numChars > 0 ? Array(numChars + 1).join('!') : '';

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>
        Hello {name}
        {getExclamationMarks(enthusiasmLevel)}
      </Text>
      <View>
        <Button
          title="Increase enthusiasm"
          accessibilityLabel="increment"
          onPress={onIncrement}
          color="blue"
        />
        <Button
          title="Decrease enthusiasm"
          accessibilityLabel="decrement"
          onPress={onDecrement}
          color="red"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  greeting: {
    fontSize: 20,
    fontWeight: 'bold',
    margin: 16,
  },
});

export default Hello;

Puedes explorar más la sintaxis en el TypeScript playground.

Dónde encontrar consejos útiles

• Manual de TypeScript

• Documentación de React sobre TypeScript

• React + TypeScript Cheatsheets ofrece una buena visión general de cómo usar React con TypeScript

Usar alias de rutas personalizados con TypeScript

Para usar alias de rutas personalizados con TypeScript, debes configurarlos para que funcionen tanto en Babel como en TypeScript. Así es cómo:

1. Edita tu tsconfig.json para tener tus mapeos de rutas personalizados. Configura que cualquier elemento en la raíz de src esté disponible sin referencia de ruta previa, y permite acceder a archivos de prueba usando tests/File.tsx:

diff

{
-  "extends": "@react-native/typescript-config"
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"],
+      "tests": ["tests/*"],
+      "@components/*": ["src/components/*"],
+    },
+  }
}

2. Añade babel-plugin-module-resolver como paquete de desarrollo a tu proyecto:

npm

shell

npm install --save-dev babel-plugin-module-resolver

Yarn

shell

yarn add --dev babel-plugin-module-resolver

3. Finalmente, configura tu babel.config.js (nota que la sintaxis para babel.config.js es diferente a la de tsconfig.json):

diff

{
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+       'module-resolver',
+       {
+         root: ['./src'],
+         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+         alias: {
+           tests: ['./tests/'],
+           "@components": "./src/components",
+         }
+       }
+    ]
+  ]
}