💻 Integración con TypeScript

💻 Integración con TypeScript

Aprende cómo añadir y configurar TypeScript en tu proyecto Next.js para mejorar la productividad, la calidad del código y evitar errores comunes en tiempo de desarrollo.

---

🧩 ¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript que añade tipado estático al lenguaje. Esto significa que puedes definir tipos de datos (como string, number o tipos personalizados) para detectar errores antes de ejecutar el código.

Next.js soporta TypeScript de forma nativa, por lo que puedes integrarlo fácilmente en cualquier momento del desarrollo.

---

⚙️ Configuración inicial

Si creas un proyecto nuevo con Next.js, puedes habilitar TypeScript desde el inicio:

npx create-next-app@latest --typescript

Si ya tienes un proyecto existente, solo necesitas instalar las dependencias necesarias:

npm install --save-dev typescript @types/react @types/node

Luego, ejecuta el servidor de desarrollo:

npm run dev

Next.js detectará automáticamente los archivos y creará un archivo de configuración tsconfig.json como este:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
      

💡 Consejo: El modo strict activa comprobaciones más rigurosas para un código más seguro.

---

🧠 Ejemplo básico con TypeScript

Vamos a crear un componente sencillo con tipado de propiedades.

📄 app/components/Saludo.tsx

type Props = {
  nombre: string;
  edad?: number; // Propiedad opcional
};

export default function Saludo({ nombre, edad }: Props) {
  return (
    <div>
      <h3>Hola, {nombre}!</h3>
      {edad && <p>Tienes {edad} años.</p>}
    </div>
  );
}
      

📄 app/page.tsx

import Saludo from './components/Saludo';

export default function Home() {
  return (
    <main className="p-4 text-center">
      <Saludo nombre="Jorge" edad={30} />
      <Saludo nombre="María" />
    </main>
  );
}
      

Aquí, el componente Saludo recibe un tipo definido llamado Props, que describe las propiedades esperadas. Si intentas pasar un tipo incorrecto (por ejemplo, edad="treinta"), TypeScript mostrará un error inmediato.

---

🏗️ Tipos avanzados en Next.js

TypeScript también es útil para tipar funciones asincrónicas, llamadas a API y componentes de servidor.

📄 app/api/usuarios/route.ts

import { NextResponse } from 'next/server';

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

export async function GET() {
  const usuarios: Usuario[] = [
    { id: 1, nombre: 'Ana', email: 'ana@mail.com' },
    { id: 2, nombre: 'Luis', email: 'luis@mail.com' },
  ];

  return NextResponse.json(usuarios);
}
      

Aquí usamos un tipo personalizado Usuario para asegurar que la respuesta del endpoint siempre siga la estructura esperada.

---

🚀 Beneficios de usar TypeScript en Next.js

• ✅ Detección temprana de errores de tipo
• 📚 Autocompletado y documentación automática en el editor
• 🔒 Código más mantenible y predecible
• 🧠 Mejor integración con IDEs como VS Code

---

🧩 Conclusión

Integrar TypeScript en tu proyecto Next.js es sencillo y aporta enormes ventajas para la escalabilidad del código. Puedes combinarlo con API Routes, Server Components y React Hooks para un desarrollo más robusto y profesional.

← Volver al índice