06 - TypeScript

TypeScript es un superconjunto tipado de JavaScript: añade tipos estáticos al lenguaje y se compila a JavaScript, que es lo que ejecuta el navegador o Node.

npm init -y
npm install --save-dev typescript
npx tsc --init          # crea tsconfig.json
npx tsc                 # compila según tsconfig.json
node dist/main.js       # ejecuta el resultado

El tsconfig.json configura la compilación:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  }
}

Con “strict”: true el compilador exige disciplina de tipos: es la configuración recomendada.

const id: number = 42;
const title: string = "Código limpio";
const available: boolean = true;
const tags: string[] = ["programming", "craft"];
const pair: [string, number] = ["total", 3];

function discount(price: number, percent: number): number {
  return price * (1 - percent / 100);
}

interface Book {
  id: number;
  title: string;
  available: boolean;
  authorId?: number;      // opcional
  readonly createdAt: Date;  // no modificable tras crearlo
}

const book: Book = { id: 1, title: "Clean Code", available: true, createdAt: new Date() };

function show(b: Book): string {
  return `${b.title} (${b.available ? "available" : "out of stock"})`;
}

type OrderStatus = "PENDING" | "CONFIRMED" | "CANCELLED";

function canCancel(status: OrderStatus): boolean {
  return status === "PENDING";
}

El compilador rechaza cualquier valor fuera de los literales declarados: ideal para estados como los de un pedido.

// src/price-calculator.ts
export class PriceCalculator {
  discount(price: number, percent: number): number {
    return price * (1 - percent / 100);
  }
}

// src/main.ts
import { PriceCalculator } from "./price-calculator.js";

const calculator = new PriceCalculator();
console.log(calculator.discount(100, 20)); // 80

export publica, import consume. La extensión .js del import corresponde al archivo compilado.

Los tipos describen lo que devuelve la API:

interface BookResponse {
  id: number;
  title: string;
  authorName: string;
}

async function getBook(id: number): Promise<BookResponse> {
  const response = await fetch(`/api/books/${id}`);
  return response.json();
}