En JavaScript puedes pasar un número donde se espera una cadena y nada te avisa hasta que algo se rompe en tiempo de ejecución. En un proyecto grande, ese tipo de error es caro.

TypeScript lo arregla. Comprueba tu código mientras escribes y subraya los problemas en rojo. Si ya conoces lo básico, nuestro tutorial de JavaScript es el mejor lugar para empezar.

¿Por qué usar TypeScript?

• Menos errores: los errores de tipos aparecen pronto.
• Mejor ayuda del editor: el autocompletado y el renombrado seguro funcionan mucho mejor.
• Código autodocumentado: los tipos dicen a quien lee qué espera una función.
• Cambios más seguros: es más fácil actualizar los proyectos grandes.
• Genial para pruebas: Playwright y muchas otras herramientas tienen soporte de primera clase para TypeScript.

Configura TypeScript

Instala Node.js y crea un proyecto:

mkdir ts-demo && cd ts-demo
npm init -y
npm install --save-dev typescript tsx
npx tsc --init

Crea hello.ts:

const message: string = "¡Hola, TypeScript!";
console.log(message);

Ejecútalo con npx tsx hello.ts, o compílalo con npx tsc para obtener un archivo .js.

Tipos básicos

let name: string = "Asha";
let age: number = 28;
let isActive: boolean = true;

let tags: string[] = ["qa", "ts"];
let pair: [string, number] = ["id", 7];   // tupla

let anything: unknown = "puede ser cualquier valor";

age = "veinte";   // Error: Type 'string' is not assignable to type 'number'

A menudo no necesitas escribir el tipo. TypeScript lo infiere: let count = 5 ya es un número. Evita any, porque desactiva la comprobación. Usa unknown cuando de verdad no conozcas el tipo.

Funciones con tipos

function add(a: number, b: number): number {
  return a + b;
}

const greet = (name: string, title?: string): string =>
  title ? `${title} ${name}` : name;

add(2, "3");   // Error

El ? marca un parámetro opcional. El : number tras los paréntesis es el tipo de retorno.

Interfaces y alias de tipo

Úsalos para describir la forma de un objeto.

interface User {
  id: number;
  name: string;
  email?: string;        // opcional
  readonly role: string; // no se puede cambiar
}

const user: User = { id: 1, name: "Asha", role: "tester" };

type ID = string | number;

Las interfaces y los alias de tipo se solapan. Una regla sencilla: usa interface para formas de objeto que puedas ampliar, y type para uniones y otras combinaciones.

Uniones y estrechamiento

type Status = "pending" | "paid" | "failed";

function show(value: string | number) {
  if (typeof value === "string") {
    return value.toUpperCase();   // TS sabe que aquí es una cadena
  }
  return value.toFixed(2);        // y aquí un número
}

function label(s: Status) { /* solo 3 valores válidos */ }

El estrechamiento (narrowing) significa que TypeScript deduce el tipo exacto dentro de cada rama. Las uniones literales, como "pending" | "paid", son estupendas para sustituir cadenas arbitrarias.

Genéricos

Los genéricos permiten que una función trabaje con muchos tipos y siga siendo segura.

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([10, 20]);        // number | undefined
const s = first(["a", "b"]);      // string | undefined

interface ApiResponse<T> {
  data: T;
  error?: string;
}

const res: ApiResponse<User[]> = { data: [] };

Piensa en T como un marcador de posición que se rellena cuando usas la función.

Clases

class Account {
  constructor(
    public owner: string,
    private balance = 0
  ) {}

  deposit(amount: number): void {
    this.balance += amount;
  }

  get total(): number {
    return this.balance;
  }
}

const acc = new Account("Asha");
acc.deposit(100);
acc.balance;   // Error: 'balance' is private

Opciones clave de tsconfig

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

"strict": true activa el conjunto completo de comprobaciones de seguridad. Puede mostrar más errores al principio, pero merece la pena. En un proyecto de JavaScript existente, avanza paso a paso: cambia el nombre de un archivo cada vez a .ts.

Usar TypeScript en la automatización de pruebas

TypeScript hace más seguro el código de pruebas, porque las erratas en los métodos de los page objects o en los datos se detectan antes de la ejecución. Playwright está construido pensando en TypeScript. Nuestro ejemplo de framework lo usa en todo momento, y puedes comparar herramientas en las mejores herramientas de automatización de pruebas.

Preguntas frecuentes

Sigue aprendiendo