Usar TypeScript con React Native
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
¡JavaScript! Todos lo amamos. Pero algunos también adoramos los tipos de datos. Afortunadamente, existen opciones para añadir tipos más fuertes a JavaScript. Mi favorito es TypeScript, aunque React Native incluye soporte para Flow de forma nativa. Tu preferencia dependerá de gustos personales, ya que cada uno tiene su propio enfoque para añadir la magia de los tipos a JavaScript. Hoy veremos cómo usar TypeScript en aplicaciones de React Native.
Esta publicación utiliza como guía el repositorio TypeScript-React-Native-Starter de Microsoft.
Actualización: Desde que se escribió esta entrada, el proceso se ha simplificado aún más. Puedes reemplazar toda la configuración descrita en este post ejecutando un solo comando:
npx react-native init MyAwesomeProject --template react-native-template-typescript
Sin embargo, existen algunas limitaciones en el soporte de TypeScript en Babel, que el artículo anterior explica en detalle. Los pasos descritos en esta publicación siguen funcionando, y Artsy aún utiliza react-native-typescript-transformer en producción, pero la forma más rápida de comenzar con React Native y TypeScript es usando el comando anterior. Siempre puedes cambiar más adelante si es necesario.
En cualquier caso, ¡disfrútalo! La publicación original continúa a continuación.
Prerrequisitos
Dado que podrías estar desarrollando en varias plataformas diferentes dirigidas a distintos tipos de dispositivos, la configuración básica puede ser compleja. Primero debes asegurarte de poder ejecutar una aplicación React Native básica sin TypeScript. Sigue las instrucciones en el sitio web de React Native para comenzar. Cuando hayas logrado implementar en un dispositivo o emulador, estarás listo para iniciar una aplicación React Native con TypeScript.
También necesitarás Node.js, npm y Yarn.
Inicialización
Una vez que hayas probado a crear un proyecto ordinario de React Native, estarás listo para añadir TypeScript. Vamos a hacerlo.
react-native init MyAwesomeProject
cd MyAwesomeProject
Agregar TypeScript
El siguiente paso es añadir TypeScript a tu proyecto. Los siguientes comandos:
-
añadirán TypeScript a tu proyecto
-
agregarán React Native TypeScript Transformer a tu proyecto
-
inicializarán un archivo de configuración vacío de TypeScript, que configuraremos después
-
añadirán un archivo de configuración vacío para React Native TypeScript Transformer, que configuraremos a continuación
-
agregarán tipados para React y React Native
Bien, ejecutemos estos comandos.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native
El archivo tsconfig.json contiene todas las configuraciones del compilador de TypeScript. Los valores predeterminados creados por el comando anterior son adecuados en su mayoría, pero abre el archivo y descomenta la siguiente línea:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
El archivo rn-cli.config.js contiene la configuración de React Native TypeScript Transformer. Ábrelo y añade lo siguiente:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrar a TypeScript
Renombra los archivos generados App.js y __tests_/App.js como App.tsx. index.js debe mantener la extensión .js. Todos los archivos nuevos deben usar la extensión .tsx (o .ts si el archivo no contiene JSX).
Si intentaras ejecutar la aplicación ahora, obtendrías un error como object prototype may only be an object or null. Esto se debe a un fallo al importar la exportación predeterminada de React junto con una exportación nombrada en la misma línea. Abre App.tsx y modifica la importación al inicio del archivo:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Parte de esto se relaciona con diferencias en cómo Babel y TypeScript interoperan con módulos CommonJS. En el futuro, ambos convergerán en el mismo comportamiento.
En este punto, deberías poder ejecutar la aplicación de React Native.
Configuración de pruebas con TypeScript
React Native incluye Jest por defecto. Para probar aplicaciones React Native con TypeScript, añadiremos ts-jest a nuestras devDependencies.
yarn add --dev ts-jest
Luego, abriremos nuestro package.json y reemplazaremos el campo jest con lo siguiente:
{
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache"
}
}
Esto configurará Jest para ejecutar archivos .ts y .tsx con ts-jest.
Instalación de declaraciones de tipos para dependencias
Para obtener la mejor experiencia en TypeScript, necesitamos que el verificador de tipos comprenda la estructura y API de nuestras dependencias. Algunas bibliotecas publican paquetes con archivos .d.ts (archivos de declaración de tipos), que describen la estructura del JavaScript subyacente. Para otras bibliotecas, tendremos que instalar explícitamente el paquete correspondiente en el ámbito npm @types/.
Por ejemplo, aquí necesitaremos tipos para Jest, React, React Native y React Test Renderer.
yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer
Guardamos estos paquetes de declaración de tipos como dependencias de desarrollo porque esta es una aplicación React Native que solo usa estas dependencias durante el desarrollo, no en tiempo de ejecución. Si estuviéramos publicando una biblioteca en NPM, podríamos tener que añadir algunas de estas dependencias de tipos como dependencias regulares.
Puedes leer más aquí sobre cómo obtener archivos .d.ts.
Ignorar más archivos
Para tu control de código fuente, querrás ignorar la carpeta .jest. Si usas git, podemos simplemente añadir entradas a nuestro archivo .gitignore.
# Jest
#
.jest/
Como punto de control, considera confirmar tus archivos en el sistema de control de versiones.
git init
git add .gitignore # import to do this first, to ignore our files
git add .
git commit -am "Initial commit."
Añadiendo un componente
Añadamos un componente a nuestra aplicación. Creemos un componente Hello.tsx. Es un componente pedagógico, no algo que escribirías realmente en una app, pero algo no trivial que muestra cómo usar TypeScript en React Native.
Crea un directorio components y añade el siguiente ejemplo.
// components/Hello.tsx
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
interface State {
enthusiasmLevel: number;
}
export class Hello extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
if ((props.enthusiasmLevel || 0) <= 0) {
throw new Error(
'You could be a little more enthusiastic. :D',
);
}
this.state = {
enthusiasmLevel: props.enthusiasmLevel || 1,
};
}
onIncrement = () =>
this.setState({
enthusiasmLevel: this.state.enthusiasmLevel + 1,
});
onDecrement = () =>
this.setState({
enthusiasmLevel: this.state.enthusiasmLevel - 1,
});
getExclamationMarks = (numChars: number) =>
Array(numChars + 1).join('!');
render() {
return (
<View style={styles.root}>
<Text style={styles.greeting}>
Hello{' '}
{this.props.name +
this.getExclamationMarks(this.state.enthusiasmLevel)}
</Text>
<View style={styles.buttons}>
<View style={styles.button}>
<Button
title="-"
onPress={this.onDecrement}
accessibilityLabel="decrement"
color="red"
/>
</View>
<View style={styles.button}>
<Button
title="+"
onPress={this.onIncrement}
accessibilityLabel="increment"
color="blue"
/>
</View>
</View>
</View>
);
}
}
// styles
const styles = StyleSheet.create({
root: {
alignItems: 'center',
alignSelf: 'center',
},
buttons: {
flexDirection: 'row',
minHeight: 70,
alignItems: 'stretch',
alignSelf: 'center',
borderWidth: 5,
},
button: {
flex: 1,
paddingVertical: 0,
},
greeting: {
color: '#999',
fontWeight: 'bold',
},
});
¡Vaya! Es mucho, pero analicémoslo:
-
En lugar de renderizar elementos HTML como
div,span,h1, etc., renderizamos componentes comoViewyButton. Estos son componentes nativos que funcionan en diferentes plataformas. -
Los estilos se especifican usando la función
StyleSheet.createque nos proporciona React Native. Las hojas de estilo de React nos permiten controlar el diseño usando Flexbox y estilizar usando construcciones similares a CSS.
Añadiendo pruebas para el componente
Ahora que tenemos un componente, probémoslo.
Ya tenemos Jest instalado como ejecutor de pruebas. Escribiremos pruebas de snapshot para nuestros componentes. Añadamos el complemento necesario para estas pruebas:
yarn add --dev react-addons-test-utils
Ahora creemos una carpeta __tests__ dentro del directorio components y añadamos una prueba para Hello.tsx:
// components/__tests__/Hello.tsx
import React from 'react';
import renderer from 'react-test-renderer';
import {Hello} from '../Hello';
it('renders correctly with defaults', () => {
const button = renderer
.create(<Hello name="World" enthusiasmLevel={1} />)
.toJSON();
expect(button).toMatchSnapshot();
});
La primera vez que se ejecuta la prueba, creará una instantánea del componente renderizado y la almacenará en el archivo components/__tests__/__snapshots__/Hello.tsx.snap. Cuando modifiques tu componente, deberás actualizar las instantáneas y revisar los cambios inadvertidos. Puedes obtener más información sobre cómo probar componentes de React Native aquí.
Próximos pasos
Consulta el tutorial oficial de React y la biblioteca de gestión del estado Redux. Estos recursos pueden ser útiles al desarrollar aplicaciones con React Native. Además, quizás quieras explorar ReactXP, una biblioteca de componentes escrita completamente en TypeScript que soporta tanto React para web como React Native.
¡Disfruta de un entorno de desarrollo React Native más seguro con tipos!
