Usando TypeScript con React - Guía para Desarrolladores

En este artículo, exploraremos cómo aprovechar al máximo el poder del React fusionado con el superconjunto de JavaScript llamado TypeScript.
La combinación de estas dos tecnologías permite mejorar la eficiencia y seguridad en las aplicaciones de React JS with TypeScript, otorgando tipos a los datos para evitar errores en tiempo de ejecución.

Nos enfocaremos en cómo agregar soporte para TypeScript a una aplicación creada con el comando npx create-react-app my-app --template typescript y, además, profundizaremos en la creación de componentes con tipos definidos para las props, lo que facilitará la detección de errores y mejorarás nuestra experiencia general al desarrollar aplicaciones con React Typescript.

¿Qué es TypeScript y por qué usarlo con React?

TypeScript es un superconjunto de JavaScript que agrega funcionalidades y estructuras adicionales, lo que lo convierte en una excelente elección para proyectos maduros o para desarrolladores que buscan escribir código más robusto. Al utilizar React, los desarrolladores pueden aprovechar las ventajas del framework sin preocuparse por la complejidad de su código. Además, con el aumento de tamaño y complejidad de tus proyectos con React JS con TypeScript, es fácil perderse en una maraña de errores de tipos.

Con Typescript, puedes evitar muchos errores de tipado que podrían surgir cuando trabajas con grandes proyectos de software. Esto se debe a que tu lenguaje de programación tiene el poder para garantizar el tipo de datos que se utilizan en cada momento, evitando posibles errores como la asignación incorrecta del tipo.

El siguiente paso sería crear o modificar una aplicación CRA (Create-React-App) usando npx create-react-app my-app --template typescript.

Agregar soporte para TypeScript a una aplicación CRA (Create-React-App)

Puedes agregar el soporte de TypeScript a tu aplicación React usando el comando npx create-react-app my-app --template typescript. Esto creará una aplicación inicial con tipos.

A medida que trabajas en tu proyecto, puedes realizar cambios y personalizarlo para que se adapte mejor a tus necesidades. Algunas cosas que podrías considerar son agregar dependencias adicionales o hacer ajustes en el archivo tsconfig.json.

Si prefieres crear una nueva aplicación React con soporte de TypeScript sin utilizar el comando --template, simplemente ejecuta npx create-react-app my-app --typescript y luego edite manualmente package.json para incluir "@types/react".

Algunos pasos sencillos que puedes seguir para empezar a trabajar con Typescript son instalarlo, configurarlo en tu proyecto de react js with typescript y verificar el funcionamiento.

Crear componentes con tipos

Al trabajar en proyectos de React JS with TypeScript, es importante dar un paso adelante y crear componentes que tengan una estructura más sólida para el manejo de datos. Para lograr esto, podemos utilizar interfaces de TypeScript.

Crear Interfaces en Typescript

A medida que avanzamos con nuestro proyecto de React y TypeScript, necesitaremos crear interfaces para definir los tipos de las propiedades de nuestros componentes. Esto no solo nos ayudará a evitar errores al momento de renderizar el componente, sino que también brindará intellisense personalizada.

Un ejemplo básico sería crear una interfaz que represente a un usuario:

typescript
interface UserProps {
name: string;
email: string;
}


Tipar Props en Typescript

Ahora que tenemos nuestra interfaz creada, podemos utilizarla para tipar las props de nuestro componente. Esto nos asegurará de que el componente reciba solo los datos esperados y de la forma correcta.

```typescript
interface UserInterface {
name: string;
email: string;
}

const User = ({ name, email }: UserProps) => {
// Código del componente aquí...
};
```

Interfaces con Tipos Extendidos

Además de utilizar interfaces para tipar las propiedades individuales, también podemos utilizarlas para crear tipos más complejos. Esto nos permite capturar los estados y comportamientos que nuestro componente pueda necesitar.

Un ejemplo podría ser crear una interfaz que represente a un estado del componente:

typescript
interface UserState {
isSignedIn: boolean;
}


Y luego utilizarla en nuestra clase de React:

```typescript
class User extends Component {
constructor(props: UserProps) {
super(props);
this.state = { isSignedIn: false };
}

// Código del componente aquí...
}
```

Con este tipo de interfaces y tipos extendidos, podemos asegurarnos de que nuestros componentes de React sean más robustos y menos propensos a errores al manejar datos complejos.

Tipos para los hooks de useState y useRef

Usando React con TypeScript es una excelente manera de mejorar la seguridad, manteneribilidad y escalabilidad de tu aplicación. Al tipar nuestros componentes, podemos aprovechar las funcionalidades adicionales que ofrece TypeScript.

En este apartado, veremos cómo aplicar los principios de tipado para garantizar un uso correcto del Hook useState en React con TypeScript. Un Hook es una función especial que nos permite el uso de estado y efectos sin necesidad de pasar por la clase. Primero debemos comprender cómo funciona este Hook.

El Hook useState es muy útil cuando queremos cambiar el valor de un objeto o una variable en nuestra aplicación a medida que interactúa con ella, siempre que se genere algún evento.

Cuando configuramos la función del Hook useState, debemos pasarle como primer argumento un tipo de dato. Por ejemplo:

```typescript
import React from 'react';

const Counter = () => {
const [counter, setCounter] = React.useState(0);

return (

);
};
```

Integración de terceros y uso de paquetes con TypeScript

Cuando se trabaja con un proyecto React que utiliza TypeScript, a menudo es necesario incorporar bibliotecas o paquetes de terceros para agregar funcionalidades específicas. A diferencia del JavaScript, donde la adición de bibliotecas externas puede requerir solo copiar y pegar archivos JavaScript en el directorio raíz del proyecto, con TypeScript requiere un enfoque más organizado.

Usando npm o yarn para instalar paquetes de terceros es común y sencillo. Lo que cambia aquí es cómo se integraran estos paquetes dentro de un proyecto que utiliza TypeScript, asegurándose de que estén tipados correctamente. Por lo tanto, el uso de un archivo tsconfig.json que declare los archivos y directorios a compilar es crucial. Es común tener scripts de compilación en package.json que facilitan las tareas relacionadas con la compilación, como construir y empaquetar.

Al integrar paquetes, asegúrate de revisar la documentación de cada paquete para conocer si requiere instalación adicional o configuraciones específicas en un proyecto React TypeScript.

Pruebas unitarias y pruebas de integración con Jest y React Testing Library

Cuando se utiliza React Js con TypeScript, la verificación y el aseguramiento de que nuestra aplicación se comporta correctamente es crucial, ya sea una pequeña o gran aplicación.

Pruebas unitarias

Las pruebas unitarias son una forma efectiva de verificar la funcionalidad de nuestras funciones y componentes individuales. En el caso de Typescript, esto significa escribir pruebas para cada función y método que nos ayude a garantizar su comportamiento correcto. Una excelente forma de hacer esto es utilizar Jest, un popular framework de pruebas unitarias.

Por ejemplo, podemos crear una prueba unitaria para un componente de tipo "HelloWorld.js" en Typescript así:

```typescript
import React from 'react';
import { renderToString } from 'react-dom/server';

describe('HelloWorld', () => {
it('renders a greeting message', () => {
const div = document.createElement('div');
const htmlString = renderToString();
const h1 = new DOMParser().parseFromString(htmlString, 'text/html').getElementsByTagName('h1')[0];
expect(h1.textContent).toBe('¡Hola Mundo!');
});
});
```

En este ejemplo se muestra cómo utilizar Jest para verificar si un componente de tipo "HelloWorld" es renderizado correctamente.

Pruebas de integración

Las pruebas de integración son más complejas que las unitarias y verifican el comportamiento correcto de nuestros componentes en la aplicación completa. La forma más efectiva de hacer esto con React Js con Typescript es utilizar React Testing Library.

Por ejemplo, podemos crear una prueba de integración para un componente de tipo "HelloWorld.js" en Typescript así:

```typescript
import { render } from '@testing-library/react';
import HelloWorld from './HelloWorld';

describe('HelloWorld', () => {
it('renders a greeting message', () => {
const { getByText } = render();
expect(getByText('¡Hola Mundo!')).toBeInTheDocument();
});
});
```

En este ejemplo se muestra cómo utilizar React Testing Library para verificar si un componente de tipo "HelloWorld" es renderizado correctamente en la aplicación completa.

Herramientas y plugins para mejorar la experiencia del desarrollador

Al incorporar React TypeScript, te enfrentas a una variedad de herramientas y plugins que pueden ayudarte a mejorar tu experiencia como desarrollador. Estos recursos incluyen:

ESLint Configurado con TypeScript

ESLint es un lenguaje de extensión de configuración para JavaScript que ayuda a identificar problemas comunes en el código, lo cual mejora la seguridad del React Js With Typescript.

Prettier y Format

Prettier es un formateador de texto que se asegura de mantener tu código uniforme, mientras que Format garantiza una presentación consistente de las clases. Es posible configurar estos herramientas en tu proyecto de React con TypeScript.

Tsconfig y Webpack

Para configurar correctamente el compilador de TypeScript, necesitas crear un archivo tsconfig.json, donde puedes definir las opciones de compilación adecuadas para tu aplicación de React Js With Typescript. De manera similar, es importante configurar Webpack de forma que se compile tu código correctamente.

Storybook

Storybook es una herramienta ideal para construir y probar componentes en React con TypeScript. Es un sistema que permite crear historias (storys) para cada componente, lo cual te facilita el desarrollo y pruebas de tus React Js With Typescript.

Conclusión

El uso de TypeScript en aplicaciones de React puede ser una excelente manera de agregar estructuras y funcionalidades a tu código, asegurando la coherencia y seguridad de tu proyecto. Al seguir los pasos descritos en este artículo, puedes comenzar a utilizar React Js With Typescript, creando componentes con tipos, tipando hooks y aprovechando las características de autocompletado del editor para mejorar tu experiencia.

Algunas de las ventajas clave que ofrece el uso de TypeScript son la detección temprana de errores, mejor legibilidad del código y una estructura más sólida al principio. Esto permite a los desarrolladores detectar problemas de tipos antes de que se vuelvan errores difíciles de arreglar en producción.

Al integrar typescript en tu proyecto de React Js, puedes aprovechar las mejores prácticas para escribir código maduro y robusto, mejorando así la calidad de tu aplicación.

Si quieres conocer otros artículos parecidos a Usando TypeScript con React - Guía para Desarrolladores puedes visitar la categoría Blog.