Typescript: ¿Por donde empezar?

Si eres un desarrollador de JavaScript que busca crear aplicaciones más robustas, escalables y mantenibles, TypeScript es tu siguiente mejor paso. Es un superset de JavaScript que añade static typing, trayendo muchos beneficios tradicionalmente encontrados en lenguajes fuertemente tipados como C# o Java.

¿Por qué usar un lenguaje tipado en vez de uno dinámico?

JavaScript es famoso por su flexibilidad, como Python, Ruby o PHP; quizás demasiado flexible. Aunque eso lo hace ideal para prototipado rápido, introduce riesgos en bases de código grandes. Estos riesgos incluyen errores en tiempo de ejecución que podrían haberse detectado antes, dificultades para mantener y refactorizar el código, y desafíos para asegurar un comportamiento consistente en un equipo. TypeScript aborda estos problemas añadiendo tipado estático, lo que ayuda a los desarrolladores a detectar errores durante el desarrollo, mejora la legibilidad del código y proporciona mejor soporte de herramientas.

Característica	Dinámico (JavaScript)	Estático (TypeScript)
Errores de tipo	Detectados en tiempo de ejecución	Detectados en tiempo de compilación
Seguridad al refactorizar	Arriesgado sin buenas pruebas	Más seguro, gracias a la comprobación de tipos
Soporte en IDE	Autocompletado básico	Intellisense avanzado y comprobación de errores
Documentación de código	Requiere esfuerzo manual	Los tipos actúan como documentación
Colaboración en equipo	Más propenso a errores y malentendidos	Los tipos e interfaces ayudan a definir expectativas

Los lenguajes tipados te ayudan a detectar errores temprano, mejorar las herramientas y reducir la ambigüedad en tu código, pero lo más importante, facilitan escalar aplicaciones sin introducir cambios que rompan producción. Y con TypeScript, no tienes que renunciar a la flexibilidad de JavaScript—la mejoras.

Por supuesto, como esto es solo un superconjunto de JavaScript, en realidad no haces que JavaScript sea estático en tiempo de ejecución; puedes cometer las mismas malas prácticas/errores que con JavaScript, la única diferencia es que recibirás retroalimentación sobre ellos mientras escribes el código gracias al compilador.

---

¿Por dónde empezar con TypeScript?

Comenzar es sencillo:

1. Instalar TypeScript globalmente:

   npm install -g typescript

2. Inicializar projecto de Typescript:

   tsc --init

3. Escrite tu primer archivo .ts:

   Crea un archivo llamado “hello.ts”:

   function greet(name: string): void {
     console.log(`Hello, ${name}!`);
   }
   greet("World");

4. Compilar a JavaScript:

   tsc hello.ts

5. Ejecuta el archivo “hello.js” con Node.js o en el navegador.

---

Características útiles de TypeScript

1. Types & Interfaces

Los types e interfaces definen la forma de los datos, permitiendo mejores contratos de código.

type User = {
  id: number;
  name: string;
  email?: string; // Optional property
};

interface Product {
  id: string;
  name: string;
  price: number;
}

function printUser(user: User) {
  console.log(user.name);
}

Usa “type” para uniones, tipos primitivos y composiciones más complejas. Usa “interface” cuando esperas que la estructura sea extendida. Aquí tienes un artículo al respecto: Interface vs Type – Una guía completa

---

2. Genéricos

Los genéricos te permiten escribir componentes flexibles y reutilizables.

function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(42);
const str = identity<string>("hello");

Aunque este es un ejemplo muy simple, esta herramienta es poderosa para funciones, clases y estructuras de datos donde el tipo no se conoce de antemano.

Si quieres aprender más al respecto, aquí tienes un artículo que explica todo sobre genéricos en TypeScript:

Entendiendo los Genéricos en TypeScript

---

3. Decoradores (Experimental)

Los decoradores son una poderosa característica de meta-programación. Permiten anotar clases, métodos y propiedades con comportamientos reutilizables.

function Log(target: any, key: string, descriptor: Property) {
  const original = descriptor.value;
  descriptor.value = function (...args: T[]) {
    console.log(`Calling ${key} with`, args);
    return original.apply(this, args);
  };
}

class Calculator {
  @Log
  add(a: number, b: number): number {
    return a + b;
  }
}

Este patrón también se encuentra en lenguajes tipados como C# y Java, sin embargo, también puedes encontrarlo en Python.

Debes habilitar los decoradores en tu “tsconfig.json”:

{ "experimentalDecorators": true }

---

Recursos para Aprender

Manual Oficial de TypeScript TypeScript Deep Dive Referencia de tsconfig

---

Ten en cuenta…

Como mencioné antes muchas… muchas veces, esto es solo un superconjunto de JavaScript, así que el lenguaje original no fue diseñado para funcionar como un lenguaje estático-tipado, haciendo que a veces sea inevitable el uso de las palabras clave “any” o “unknown”.

const random_val: any = get_random_value();
const unkown_val: unknown = get_unknown_value();

Por supuesto, este es un ejemplo bastante tonto, y la mejor práctica es evitar usarlos, pero puede suceder en proyectos reales.

Cuando estaba comenzando, mi primer proyecto profesional con TypeScript estaba lleno de esos errores. Aquí tienes un fragmento:

let result: any = [];
let levelOfDepth: any = 0;
for (const man of divisions) {
    levelOfDepth = _.isUndefined(man.level) ? 0 : man.level;
    result = [...result, ...getLevel(byManager, man, levelOfDepth)];
}

let resultRev = result.slice().reverse();
let resultFilttered = resultRev.filter(function (elem: any, index: any, self: any) {
    return index == self.indexOf(elem);
});

let finalResult = resultFilttered.slice().reverse();
finalResult = finalResult.filter(function (elem: any, index: any, self: any) {
    return index == self.indexOf(elem);
});

let endResult: any

¿Qué demonios es eso? ¿En qué estaba pensando?

Además, aunque no lo hace mejor, cambié algunos nombres de variables en ese código por razones de NDA.

Conclusión

TypeScript te da lo mejor de ambos mundos: la libertad de JavaScript con la seguridad de los tipos. A medida que tus proyectos y equipos crecen, la claridad, las herramientas y la confianza que proporciona TypeScript se vuelven invaluables.

No tienes que adoptarlo por completo de inmediato: comienza poco a poco, adopta tipos de forma incremental, y tal vez en algún momento aprendas .TSX también (Así fue como aprendí gran parte de TypeScript).