Cómo crear tipos reutilizables para proyectos frontend modernos

En los proyectos frontend modernos, especialmente con TypeScript, React y Next.js, crear tipos reutilizables permite organizar mejor el código, reducir errores y mantener una estructura más fácil de ampliar. En lugar de definir los mismos tipos en diferentes archivos, podemos centralizarlos y utilizarlos en componentes, formularios y respuestas de API.

1. ¿Qué son los tipos reutilizables?

Son definiciones que describen la estructura de los datos que utiliza una aplicación. Por ejemplo, si trabajamos con usuarios, podemos definir un tipo que especifique su nombre, correo electrónico e identificador.

export type Usuario = {
  id: number;
  nombre: string;
  email: string;
};

Este tipo puede utilizarse en cualquier parte del proyecto sin repetir su estructura.

2. Organizar los tipos en el proyecto

Una buena práctica consiste en crear una carpeta llamada types dentro de src. Allí podemos guardar las definiciones compartidas.

src/
 ├── components/
 ├── app/
 └── types/
      ├── usuario.ts
      └── producto.ts

Por ejemplo, en producto.ts definimos:

export type Producto = {
  id: number;
  nombre: string;
  precio: number;
  disponible: boolean;
};

Gracias a export, otros archivos pueden importar estos tipos y utilizarlos directamente.

3. Reutilizar tipos en componentes de React

Los tipos también permiten definir las propiedades o props que recibe un componente.

import type { Usuario } from "../types/usuario";

type TarjetaUsuarioProps = {
  usuario: Usuario;
};

export function TarjetaUsuario({
  usuario
}: TarjetaUsuarioProps) {
  return (
    <article>
      <h2>{usuario.nombre}</h2>
      <p>{usuario.email}</p>
    </article>
  );
}

Ahora, cualquier componente que utilice TarjetaUsuario deberá proporcionar un objeto compatible con el tipo Usuario. TypeScript detectará errores de estructura durante el desarrollo.

4. Utilizar tipos genéricos

Los genéricos permiten crear estructuras reutilizables para diferentes tipos de datos. Son especialmente útiles cuando una API devuelve usuarios, productos u otros recursos.

export type RespuestaAPI<T> = {
  datos: T;
  correcto: boolean;
  mensaje?: string;
};

Podemos utilizarla de esta manera:

import type { Usuario } from "./usuario";
import type { RespuestaAPI } from "./respuesta";

const respuesta: RespuestaAPI<Usuario[]> = {
  datos: [],
  correcto: true
};

El símbolo T representa un tipo que se especifica cuando utilizamos la estructura.

5. Diferencias entre type e interface

TypeScript ofrece type e interface para describir estructuras. Ambos permiten definir objetos, aunque tienen diferencias: interface admite declaraciones ampliables y type también permite crear uniones y alias para otros tipos.

type Estado = "cargando" | "completado" | "error";

Esta definición restringe los valores permitidos y evita estados escritos incorrectamente.

Crear tipos reutilizables mejora la consistencia, legibilidad y mantenimiento de los proyectos frontend. Centralizar las definiciones, tipar las propiedades de los componentes y aprovechar los genéricos permite construir aplicaciones con React y Next.js más organizadas y escalables.

La clave es reutilizar los tipos cuando representan estructuras compartidas, sin crear abstracciones innecesarias. Así, TypeScript se convierte en una herramienta fundamental para desarrollar software moderno con mayor seguridad y claridad.