Aprende TypeScript desde cero

function doble(n: number) {
  return n * 2;
}

doble(4);        // 8
doble("cuatro"); // Error del compilador:
// Argument of type 'string' is not assignable to parameter of type 'number'.

let nombre: string = "Ana";
let edad = 30;            // inferido: number
const notas: number[] = [7, 8.5, 9];

edad = "treinta";
// Error: Type 'string' is not assignable to type 'number'.

function saludar(nombre: string, titulo?: string): string {
  return titulo ? `Hola, ${titulo} ${nombre}` : `Hola, ${nombre}`;
}

saludar("García", "Sra.");  // "Hola, Sra. García"
saludar("Luis");            // "Hola, Luis"

interface Producto {
  nombre: string;
  precio: number;
  enOferta?: boolean;
}

const teclado: Producto = { nombre: "Teclado", precio: 25.9 };

function etiqueta(p: Producto): string {
  return `${p.nombre}: ${p.precio.toFixed(2)} €`;
}

type Tema = "claro" | "oscuro";
let tema: Tema = "oscuro";

function formatear(valor: string | number): string {
  if (typeof valor === "number") {
    return valor.toFixed(2);   // aquí valor es number
  }
  return valor.trim();         // aquí valor es string
}

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

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

interface Usuario {
  nombre: string;
  direccion?: { ciudad: string };
}

function ciudad(u: Usuario): string {
  return u.direccion?.ciudad ?? "Sin ciudad";
}

ciudad({ nombre: "Eva" });                              // "Sin ciudad"
ciudad({ nombre: "Leo", direccion: { ciudad: "Vigo" } }); // "Vigo"

interface Avisador {
  avisar(mensaje: string): void;
}

class AvisoConsola implements Avisador {
  private enviados = 0;
  constructor(readonly prefijo: string) {}

  avisar(mensaje: string): void {
    this.enviados++;
    console.log(`${this.prefijo} ${mensaje} (#${this.enviados})`);
  }
}

new AvisoConsola("[info]").avisar("Copia terminada");

interface Producto { id: number; nombre: string; precio: number }

type CambiosProducto = Partial<Producto>;      // todo opcional
type Resumen = Pick<Producto, "id" | "nombre">;
const stock: Record<string, number> = { teclado: 10, raton: 0 };

function actualizar(p: Producto, cambios: CambiosProducto): Producto {
  return { ...p, ...cambios };
}

# En la terminal
npm install --save-dev typescript
npx tsc --init      # crea tsconfig.json

# tsconfig.json (fragmento)
{
  "compilerOptions": {
    "strict": true,
    "target": "es2022",
    "outDir": "dist"
  }
}

npx tsc             # compila a la carpeta dist

type Talla = "S" | "M" | "L";

function precioCamiseta(talla: Talla): number {
  return talla === "L" ? 15 : 12;
}

console.log(precioCamiseta("M"));  // 12
// precioCamiseta("XL");           // error: "XL" no es una Talla

const ESTADOS = ["pendiente", "enviado", "entregado"] as const;
type Estado = (typeof ESTADOS)[number];  // "pendiente" | "enviado" | "entregado"

const estado: Estado = "enviado";
console.log(ESTADOS.indexOf(estado));    // 1

type Forma =
  | { tipo: "circulo"; radio: number }
  | { tipo: "rectangulo"; ancho: number; alto: number };

function area(forma: Forma): number {
  switch (forma.tipo) {
    case "circulo":
      return Math.PI * forma.radio ** 2;    // aquí solo existe radio
    case "rectangulo":
      return forma.ancho * forma.alto;      // aquí, ancho y alto
    default: {
      const imposible: never = forma;       // error si falta algún caso
      return imposible;
    }
  }
}

console.log(area({ tipo: "rectangulo", ancho: 3, alto: 4 })); // 12
console.log(area({ tipo: "circulo", radio: 1 }).toFixed(2));  // "3.14"

interface Usuario {
  nombre: string;
  edad: number;
}

function esUsuario(dato: unknown): dato is Usuario {
  return typeof dato === "object" && dato !== null
    && typeof (dato as Usuario).nombre === "string"
    && typeof (dato as Usuario).edad === "number";
}

const recibido: unknown = JSON.parse('{"nombre": "Ana", "edad": 31}');

if (esUsuario(recibido)) {
  console.log(recibido.nombre.toUpperCase()); // "ANA": aquí ya es Usuario
} else {
  console.log("Datos con un formato inesperado");
}

interface Usuario {
  id: number;
  nombre: string;
}

// Simula una petición que tarda medio segundo
function pedirUsuario(id: number): Promise<Usuario> {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id, nombre: "Ana" }), 500);
  });
}

async function saludar(id: number): Promise<string> {
  const usuario = await pedirUsuario(id);  // usuario: Usuario
  return `Hola, ${usuario.nombre}`;
}

saludar(1).then((texto) => console.log(texto)); // "Hola, Ana"

function minMax(numeros: number[]): [number, number] {
  return [Math.min(...numeros), Math.max(...numeros)];
}

const [menor, mayor] = minMax([7, 2, 9]);
console.log(menor, mayor);  // 2 9

interface Config {
  readonly url: string;
  readonly reintentos: number;
}

const config: Config = { url: "https://api.ejemplo.es", reintentos: 3 };
// config.reintentos = 5;   // error: es de solo lectura

const dias: readonly string[] = ["lunes", "martes"];
// dias.push("miércoles");  // error: no existe push en una lista readonly
console.log(config.url, dias.length);