Volver a la página principal
lunes 12 agosto 2024
39

Cómo Usar TypeScript en React

TypeScript es un superconjunto tipado de JavaScript que agrega seguridad y robustez al desarrollo de aplicaciones. Usar TypeScript con React permite a los desarrolladores definir tipos para componentes, props y estados, lo que ayuda a detectar errores antes de ejecutar el código. En este artículo, aprenderás cómo configurar y usar TypeScript en un proyecto React.

¿Qué es TypeScript?

TypeScript es un lenguaje de programación desarrollado por Microsoft que extiende JavaScript con tipos estáticos. Al usar tipos, puedes definir de antemano qué tipo de datos espera una función o un componente, lo que reduce la posibilidad de errores en tiempo de ejecución.

Ventajas de Usar TypeScript en React

1. Detección Temprana de Errores: TypeScript te avisa sobre errores antes de que el código sea ejecutado, mejorando la calidad del código.

2. Mejor Autocompletado: Gracias a la tipificación estática, los editores de código pueden ofrecer autocompletado más preciso y sugerencias inteligentes.

3. Documentación Implícita: Los tipos en TypeScript actúan como documentación para el código, haciendo que sea más fácil entender lo que hace cada componente o función.

Paso 1: Crear un Proyecto React con TypeScript

La forma más sencilla de iniciar un proyecto React con TypeScript es utilizando Create React App con la plantilla de TypeScript.

1.1. Crear el Proyecto

Ejecuta el siguiente comando en la terminal: 

npx create-react-app mi-proyecto --template typescript

Este comando creará un nuevo proyecto React configurado para usar TypeScript.

1.2. Estructura del Proyecto

Después de que el comando haya terminado, notarás algunos cambios en la estructura del proyecto en comparación con un proyecto React estándar:

  • Los archivos de componentes tienen la extensión .tsx en lugar de .js o .jsx.
  • Se incluye un archivo tsconfig.json, que contiene la configuración de TypeScript.

Paso 2: Entender la Configuración de TypeScript

El archivo tsconfig.json define las reglas y configuraciones que TypeScript seguirá en tu proyecto.

2.1. Configuración Básica

El archivo tsconfig.json generado automáticamente podría parecerse a esto: 

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Algunas de las configuraciones clave son:

  • strict: Activa todas las verificaciones de tipo estrictas de TypeScript.
  • jsx: Especifica cómo debe compilar TypeScript el JSX; "react-jsx" es el valor recomendado para proyectos React modernos.
  • moduleResolution: Define cómo TypeScript resuelve los módulos. "node" es comúnmente usado para proyectos web.

Paso 3: Crear Componentes en TypeScript

Crear componentes en TypeScript es similar a hacerlo en JavaScript, con la adición de tipos que ayudan a prevenir errores.

3.1. Crear un Componente Funcional Tipado

Aquí te mostramos cómo crear un componente funcional que recibe props con TypeScript: 

import React from 'react';

interface SaludoProps {
  nombre: string;
}

const Saludo: React.FC<SaludoProps> = ({ nombre }) => {
  return <h1>Hola, {nombre}!</h1>;
};

export default Saludo;

En este ejemplo:

  • interface SaludoProps define la estructura de los props que el componente espera recibir. En este caso, el prop nombre debe ser una cadena de texto (string).
  • React.FC<SaludoProps> especifica que Saludo es un componente funcional que utiliza la interfaz SaludoProps.

3.2. Crear un Componente de Clase Tipado

Si prefieres trabajar con componentes de clase, TypeScript también te permite tiparlos: 

import React, { Component } from 'react';

interface ContadorState {
  count: number;
}

class Contador extends Component<{}, ContadorState> {
  state: ContadorState = {
    count: 0,
  };

  render() {
    return (
      <div>
        <p>Has hecho clic {this.state.count} veces</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Clic aquí
        </button>
      </div>
    );
  }
}

export default Contador;

En este ejemplo:

  • interface ContadorState define la estructura del estado, especificando que count es un número.
  • Component<{}, ContadorState> indica que el componente no recibe props ({}) y que su estado sigue la estructura definida por ContadorState.

Paso 4: Tipos para Eventos y Referencias

Cuando trabajas con eventos y referencias en React, TypeScript proporciona tipos específicos para manejar estos casos.

4.1. Tipos para Eventos

Para manejar eventos en TypeScript, debes especificar el tipo de evento. Por ejemplo: 

const MiComponente: React.FC = () => {
  const manejarClic = (evento: React.MouseEvent<HTMLButtonElement>) => {
    console.log('Botón clicado', evento);
  };

  return <button onClick={manejarClic}>Clic aquí</button>;
};

Aquí, React.MouseEvent<HTMLButtonElement> define que manejarClic es una función que maneja un evento de clic en un botón (HTMLButtonElement).

4.2. Tipos para Referencias (Refs)

Las referencias en React permiten acceder a elementos DOM directamente. Con TypeScript, puedes tiparlas de la siguiente manera: 

import React, { useRef } from 'react';

const InputConRef: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const enfocarInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={enfocarInput}>Enfocar Input</button>
    </div>
  );
};

export default InputConRef;

Aquí, useRef<HTMLInputElement>(null) indica que inputRef es una referencia a un elemento input de HTML.

Paso 5: Tipos para Hooks Personalizados

Si creas hooks personalizados en React, puedes tipar los hooks y sus retornos en TypeScript.

5.1. Crear un Hook Personalizado

Supongamos que quieres crear un hook que maneje el estado de un contador: 

import { useState } from 'react';

function useContador(inicial: number): [number, () => void] {
  const [count, setCount] = useState(inicial);

  const incrementar = () => setCount(count + 1);

  return [count, incrementar];
}

export default useContador;

En este ejemplo:

  • useContador(inicial: number): [number, () => void] define que useContador recibe un número (inicial) y retorna un arreglo que contiene un número (count) y una función (incrementar).

Conclusión

Integrar TypeScript en un proyecto React mejora la calidad del código al ofrecer un sistema de tipos robusto, lo que facilita la detección de errores y mejora la experiencia de desarrollo. A través de esta guía, has aprendido a configurar TypeScript en React, crear componentes tipados, manejar eventos y referencias, y trabajar con hooks personalizados. Ahora tienes una base sólida para construir aplicaciones React más seguras y mantenibles con TypeScript. ¡Aprovecha al máximo esta poderosa combinación!

Etiquetas:
react typescript desarrollo web
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer