TypeScript desde cero: guía práctica para desarrolladores JavaScript

Si sos un desarrollador JavaScript y todavía no le diste una oportunidad a TypeScript, este es el momento ideal para hacerlo. TypeScript ha estado ganando popularidad por su capacidad de llevar tipado estático al mundo dinámico de JavaScript, lo que resulta en un código más robusto y mantenible. En este artículo, te voy a guiar a través de los conceptos fundamentales de TypeScript con ejemplos prácticos y consejos basados en mi experiencia en proyectos como RHINO y Menteo AI.

Introducción a TypeScript

TypeScript es un superconjunto de JavaScript desarrollado por Microsoft que, esencialmente, añade tipos estáticos opcionales al lenguaje. Lo bueno de esto es que podés escribir código más seguro y reducir errores en tiempo de ejecución porque muchos problemas se detectan en tiempo de compilación. Cuando empecé a usar TypeScript en RHINO, me di cuenta de lo mucho que ayudaba a documentar el código y mejorar la colaboración en equipo.

A diferencia de JavaScript, TypeScript requiere compilarse a JavaScript antes de ejecutarse en el navegador o en Node.js. Para empezar, necesitás instalar TypeScript globalmente en tu máquina:

npm install -g typescript

Con TypeScript instalado, podés compilar tus archivos `.ts` a `.js` usando el comando `tsc`. Vamos a ver los tipos básicos para que te vayas ambientando.

Tipos básicos

Uno de los beneficios más grandes de TypeScript es su capacidad para definir tipos explícitos. En JavaScript, las variables son dinámicas, pero en TypeScript podemos definir tipos para variables, parámetros de función y valores de retorno. Acá te muestro algunos tipos básicos:

// Definición de tipos básicos
let nombre: string = 'Marcos';
let edad: number = 30;
let esDesarrollador: boolean = true;

// Función con tipos en parámetros y retorno
function saludar(persona: string): string {
    return `Hola, ${persona}`;
}

console.log(saludar(nombre));

En proyectos como Merchant Hub Akua, donde el manejo de datos era crucial, definir claramente los tipos ayudó a evitar errores comunes y a mejorar la legibilidad del código.

**Consejo:** Siempre que podás, definí tipos explícitos para tus variables. Esto te ayudará a documentar tus intenciones y a recibir ayuda del autocompletado en los IDEs.

Interfaces vs Types

En TypeScript, podés usar tanto `interfaces` como `types` para definir la forma de un objeto. Aunque parecen similares, tienen sus diferencias y cada uno tiene su lugar. Las interfaces se usan para definir la estructura de los objetos y son más recomendables cuando planeás extenderlas.

// Definición de una interfaz
interface Persona {
    nombre: string;
    edad: number;
    saludar(): string;
}

// Definición de un tipo
type Vehiculo = {
    marca: string;
    modelo: string;
};

// Implementando una interfaz
class Empleado implements Persona {
    constructor(public nombre: string, public edad: number) {}

    saludar(): string {
        return `Hola, soy ${this.nombre} y tengo ${this.edad} años.`;
    }
}

En mi experiencia, usé interfaces en Menteo AI para definir contratos claros entre diferentes módulos del sistema. Esto facilitó la integración de nuevas funcionalidades sin romper el código existente.

**Pros y contras:**

• Las interfaces son extendibles, lo que las hace ideales para herencias.
• Los types son más flexibles y pueden usarse para tipos complejos, como uniones.
• Usá interfaces cuando desarrolles bibliotecas públicas o APIs.

Generics

Los Generics en TypeScript son una herramienta poderosa que te permite crear componentes reutilizables que trabajan con cualquier tipo, mientras mantienen la seguridad de tipos. Esto es particularmente útil en estructuras de datos como listas, pilas o colas.

// Función genérica
function invertirArray<T>(items: T[]): T[] {
    return items.reverse();
}

const numeros: number[] = [1, 2, 3, 4];
const invertidos = invertirArray(numeros); // [4, 3, 2, 1]

const palabras: string[] = ['uno', 'dos', 'tres'];
const invertidas = invertirArray(palabras); // ['tres', 'dos', 'uno']

En RHINO, utilizamos generics para manejar diferentes tipos de datos en nuestras APIs, lo cual nos permitió mantener el código limpio y evitar duplicación.

**Tip:** Mantené tus generics simples. Usar demasiados parámetros de tipo puede hacer tu código difícil de entender. Nombrá tus parámetros de tipo con letras como `T`, `U`, `V` para que sean claros.

Utility Types

TypeScript incluye una serie de utility types que te permiten manipular tipos de manera eficiente. Estos son muy útiles para crear tipos derivados sin tener que escribir mucho código repetitivo.

// Ejemplo de Partial
interface Usuario {
    nombre: string;
    edad: number;
    email: string;
}

const actualizarUsuario = (usuario: Usuario, cambios: Partial<Usuario>): Usuario => {
    return { ...usuario, ...cambios };
};

let usuario: Usuario = { nombre: 'Marcos', edad: 30, email: 'marcos@ejemplo.com' };
usuario = actualizarUsuario(usuario, { edad: 31 });

En Merchant Hub Akua, los utility types nos permitieron manejar diferentes escenarios de actualización de datos sin tener que escribir tipos adicionales.

**Utility Types comunes:**

• Partial<T>: hace que todas las propiedades de T sean opcionales.
• Readonly<T>: hace que todas las propiedades de T sean de solo lectura.
• Pick<T, K>: crea un tipo con un subconjunto de propiedades de T.
• Record<K, T>: crea un tipo que representa un objeto con propiedades de tipo K y valores de tipo T.

Configuración de tsconfig.json

El archivo `tsconfig.json` es el corazón de tu proyecto TypeScript. Define cómo se debe compilar tu código y qué opciones de lenguaje están habilitadas. Aquí te dejo un ejemplo básico y te explico algunas configuraciones clave:

{
  "compilerOptions": {
    "target": "es6",           // Versión de JavaScript a la que se compila
    "module": "commonjs",      // Sistema de módulos
    "strict": true,            // Activa todas las verificaciones estrictas
    "esModuleInterop": true,   // Compatibilidad con módulos ES6
    "skipLibCheck": true,      // Omite la comprobación de tipos de las bibliotecas
    "outDir": "./dist"         // Carpeta de salida para los archivos compilados
  },
  "include": ["src/**/*"],     // Archivos a incluir en la compilación
  "exclude": ["node_modules", "**/*.spec.ts"]  // Archivos a excluir
}

En Menteo AI, configuramos `tsconfig.json` para asegurar que nuestro código fuera compatible con diferentes versiones de Node.js y navegadores.

**Consejos de configuración:**

• Usá `strict` para hacer tu código más robusto.
• Configurá `outDir` para mantener tu proyecto organizado.
• Incluí y excluí rutas de manera adecuada para evitar errores de compilación.

Conclusión

TypeScript es una herramienta poderosa que puede transformar tu manera de escribir JavaScript. Al principio puede parecer un poco intimidante, pero con práctica y paciencia, vas a ver cómo mejora la calidad de tu código. En mis proyectos, TypeScript ha sido crucial para mantener el orden y evitar errores costosos en producción. Si querés dar el siguiente paso en tu carrera como desarrollador, definitivamente te recomiendo aprender y usar TypeScript.

Espero que esta guía te haya sido útil para dar tus primeros pasos con TypeScript. Si tenés alguna pregunta o querés compartir tus experiencias, no dudes en contactarme.