60 retos de TypeScript con solución

¿Qué es TypeScript?

¿Te atascas? Repasa la lección ¿Qué es TypeScript?.

[TypeScript] ¿Qué hace TypeScript con este código?

const socio = { nombre: "Lucía", cuota: 35 };
console.log(socio.couta);

Imprime undefined, igual que JavaScript Corrige solo la errata y usa cuota Da un error de compilación: la propiedad couta no existe (¿quisiste decir cuota?) Lo compila y falla al ejecutar con un TypeError

[TypeScript] Este código está en modo estricto. ¿Por qué da error la última línea?

const rutas = [{ nombre: "Cares", km: 12 }];
const ruta = rutas.find((r) => r.km > 20);
console.log(ruta.nombre);

Porque find solo funciona con números Porque find puede devolver undefined y TypeScript obliga a tenerlo en cuenta Porque nombre no existe en las rutas Porque falta anotar el tipo de rutas

Instalar y compilar

¿Te atascas? Repasa la lección Instalar y compilar.

Tipos básicos

¿Te atascas? Repasa la lección Tipos básicos.

[TypeScript] ¿Por qué da error la última línea?

let autor = "Patrick Rothfuss";
autor = 42;

No da error: let acepta cualquier valor Porque let no permite reasignar variables Porque falta la anotación de tipo en la primera línea Porque autor es un string y 42 es un number: TypeScript infirió string del valor inicial

[TypeScript] ¿Qué ocurre con esta línea?

let entrada: unknown = "  Ana  ";
console.log(entrada.trim());

Error de compilación: no se puede usar entrada sin comprobar antes que es un string Imprime Ana, porque el valor es un texto Imprime undefined Compila y falla al ejecutar con un TypeError

[TypeScript] ¿Qué tipo infiere TypeScript para tema y para modo?

const tema = "oscuro";
let modo = "oscuro";

Los dos son string tema es "oscuro" y modo es string tema es string y modo es "oscuro" Los dos son "oscuro"

[TypeScript] ¿Qué pasa al ejecutar esto, si el JSON no incluye paginas?

const texto = '{"titulo": "Dune"}';
const libro = JSON.parse(texto) as { titulo: string; paginas: number };
console.log(libro.paginas.toFixed(0));

TypeScript da error de compilación porque falta paginas Devuelve NaN Compila sin avisar y falla al ejecutar con un TypeError, porque as no comprueba nada Lanza un error de compilación solo con strict

Arrays y tuplas

¿Te atascas? Repasa la lección Arrays y tuplas.

[TypeScript] ¿Qué tipo infiere TypeScript para pesos?

const pesos = ["A-12", 40, "B-07", 15];

[string, number] (string | number)[] string | number any[]

[TypeScript] ¿Qué ocurre con la última línea?

const cima: [string, number] = ["Torre Cerredo", 2648];
console.log(cima[2]);

Imprime undefined Imprime null Imprime 2648 Error de compilación: la tupla no tiene ningún elemento en el índice 2

[TypeScript] ¿Qué hace TypeScript con esta línea?

const punto: [number, number] = [3, 4];
punto.push(5);

Compila bien y el array queda como [ 3, 4, 5 ] Error: push no existe en los arrays de solo lectura Error: la tupla solo admite dos elementos Lanza una excepción al ejecutar

[TypeScript] ¿Qué error da esta llamada?

const categorias: readonly string[] = ["Escalada", "Camping"];
categorias.push("Esquí");

Argument of type 'string' is not assignable to type 'number' Cannot find name 'categorias' Property 'push' does not exist on type 'readonly string[]' No da error: los arrays const se pueden modificar

Objetos e interfaces

¿Te atascas? Repasa la lección Objetos e interfaces.

[TypeScript] Dado interface Socio { nombre: string; cuota: number }, ¿qué hace TypeScript con la línea siguiente?

const ana: Socio = { nombre: "Ana", cuota: 35, cuotta: 40 };

Da un error de propiedad sobrante: cuotta no existe en Socio La acepta: las propiedades de más no importan La acepta y añade cuotta a la interfaz Da un error porque falta cuota

[TypeScript] ¿Por qué da error la función ahorro?

interface Producto { precio: number; descuento?: number }
function ahorro(p: Producto): number {
  return p.precio * p.descuento / 100;
}

Porque descuento no está en la interfaz Porque las propiedades opcionales no se pueden usar en operaciones Porque descuento es number | undefined y no se puede multiplicar sin comprobarlo Porque precio es readonly

[TypeScript] ¿Cuál de estas llamadas da error?

interface ConNombre { nombre: string }
function etiqueta(x: ConNombre): string { return `[${x.nombre}]`; }
const ruta = { nombre: "Cares", km: 12 };

etiqueta(ruta) Ninguna: las tres compilan etiqueta({ nombre: "Toby" }) etiqueta({ nombre: "Toby", raza: "Beagle" })

Uniones y alias

¿Te atascas? Repasa la lección Uniones y alias.

[TypeScript] ¿Por qué da error toUpperCase en esta función?

function formatear(valor: string | number): string {
  return valor.toUpperCase();
}

Porque toUpperCase no existe en JavaScript Porque falta el tipo de retorno Porque con una unión solo puedes usar lo que existe en todos los tipos, y number no tiene toUpperCase Porque valor puede ser null

[TypeScript] ¿Qué hace TypeScript con la última línea?

type Euros = number;
type Kilos = number;
const precio: Euros = 12;
const peso: Kilos = precio;

La acepta: un alias es solo otro nombre para number Error: Euros y Kilos son tipos distintos Convierte el precio a kilos Da un aviso pero compila

Funciones

¿Te atascas? Repasa la lección Funciones.

[TypeScript] ¿Qué error da la llamada?

function precioConIva(precio: number, iva: number): number {
  return precio * (1 + iva / 100);
}
precioConIva(50);

Argument of type 'number' is not assignable to type 'string' Expected 2 arguments, but got 1 Cannot find name 'iva' No da error: iva vale undefined

[TypeScript] ¿Es válido este código?

type Manejador = (nombre: string, indice: number) => void;
const imprimir: Manejador = (nombre) => console.log(nombre);

No: la función debe devolver string No: la función debe declarar también indice Sí: una función con menos parámetros es compatible con un tipo que declara más No: console.log devuelve undefined

Estrechar tipos

¿Te atascas? Repasa la lección Estrechar tipos.

[TypeScript] ¿Qué devuelve mostrarPlazas(0)?

function mostrarPlazas(plazas: number | undefined): string {
  if (plazas) {
    return `Quedan ${plazas} plazas`;
  }
  return "Sin información";
}

"Quedan 0 plazas" Da error de compilación undefined "Sin información"

[TypeScript] Añades Hexagono a la unión Figura pero olvidas actualizar el switch. ¿Por qué se queja TypeScript en el default?

default: {
  const imposible: never = f;
  throw new Error("Figura desconocida");
}

Porque el default no puede tener throw Porque en el default f puede ser aún un Hexagono y no es asignable a never Porque el switch no admite más de dos tipos No se queja: solo falla al ejecutar

Clases

¿Te atascas? Repasa la lección Clases.

[TypeScript] Con strict activado, ¿qué error da esta clase?

class Ruta {
  nombre: string;
  kilometros: number;
  constructor(nombre: string) {
    this.nombre = nombre;
  }
}

Ninguno: kilometros se queda como undefined Property 'kilometros' has no initializer and is not definitely assigned in the constructor Property 'nombre' does not exist on type 'Ruta' Constructors cannot have parameters

[TypeScript] ¿Qué error da la última línea?

abstract class Actividad {
  abstract caloriasPorMinuto(): number;
}
class Natacion extends Actividad {
  caloriasPorMinuto(): number { return 9.5; }
}
const a = new Actividad();

Cannot create an instance of an abstract class Property 'calorias' is private Class 'Actividad' must implement 'Natacion' No da error: se crea una actividad genérica

[TypeScript] ¿Qué avisa TypeScript en esta clase hija?

class Base {
  saludar(): string { return "hola"; }
}
class Hija extends Base {
  override saludr(): string { return "buenas"; }
}

Nada: saludr es un método nuevo Que override no se puede usar con métodos Que el método marcado con override no existe en la clase base Que Hija debe ser abstracta

Enums y literales

¿Te atascas? Repasa la lección Enums y literales.

[TypeScript] ¿Por qué da error la segunda llamada?

enum EstadoPedido { Pendiente = "PENDIENTE", Pagado = "PAGADO" }
function cobrar(estado: EstadoPedido): void {}
cobrar(EstadoPedido.Pagado);
cobrar("PAGADO");

Porque "PAGADO" no existe Porque cobrar no devuelve nada Porque los enums son nominales: solo valen sus miembros, no el texto suelto Porque los enums de texto no se pueden pasar a funciones

[TypeScript] ¿Qué imprime este programa?

enum Talla { S, M, L, XL }
console.log(Talla.XL, Talla[1]);

XL M undefined M 3 1 3 M

[TypeScript] Con el objeto Rol (as const), ¿qué tipo es (typeof Rol)[keyof typeof Rol]?

const Rol = {
  Admin: "admin",
  Editor: "editor",
  Lector: "lector",
} as const;

"Admin" | "Editor" | "Lector" "admin" | "editor" | "lector" string Rol

Genéricos

¿Te atascas? Repasa la lección Genéricos.

[TypeScript] ¿Qué tipo tiene ultimaNota?

function ultimo<T>(lista: T[]): T | undefined {
  return lista[lista.length - 1];
}
const ultimaNota = ultimo([7, 9.5, 6]);

any number number | undefined T

[TypeScript] ¿Cómo se arregla el error de Property 'length' does not exist on type 'T'?

function masLargo<T>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

Restringiendo el genérico: <T extends { length: number }> Cambiando T por any Escribiendo a.length as number Quitando strict del tsconfig

[TypeScript] ¿Qué hace la restricción K extends keyof T en esta función?

function obtener<T, K extends keyof T>(objeto: T, clave: K): T[K] {
  return objeto[clave];
}

Hace que objeto sea de solo lectura Convierte la clave en un número Permite cualquier texto como clave Obliga a que la clave sea una de las propiedades existentes de objeto, y el resultado tiene el tipo de esa propiedad

[TypeScript] ¿Qué tipo tiene pendientes, si crearLista<T>(): T[] se llama sin argumentos ni tipo?

function crearLista<T>(): T[] {
  return [];
}
const pendientes = crearLista();

string[] unknown[] never[] any[]

Tipos utilitarios

¿Te atascas? Repasa la lección Tipos utilitarios.

[TypeScript] ¿Qué permite el parámetro cambios: Partial<Producto>?

function actualizar(producto: Producto, cambios: Partial<Producto>): Producto {
  return { ...producto, ...cambios };
}

Pasar el producto como solo lectura Pasar cualquier objeto sin comprobar tipos Pasar el producto sin el id Pasar solo los campos que cambian, cada uno con su tipo correcto

[TypeScript] ¿Qué error da TypeScript en etiquetas?

type Talla = "S" | "M" | "L" | "XL";
const etiquetas: Record<Talla, string> = {
  S: "Pequeña",
  M: "Mediana",
  L: "Grande",
};

Sobra la propiedad L Falta la propiedad XL, que Record<Talla, string> exige S debe ser un número No da error: Record admite claves incompletas

[TypeScript] ¿Qué falla en este código?

function crearSesion(usuario: string) {
  return { usuario, activa: true };
}
type Sesion = ReturnType<crearSesion>;

ReturnType no existe Falta Awaited crearSesion es un valor y hace falta typeof: ReturnType<typeof crearSesion> crearSesion debe ser async

Módulos y tsconfig

¿Te atascas? Repasa la lección Módulos y tsconfig.

[TypeScript] Con verbatimModuleSyntax activado, ¿qué error da esta línea y cómo se arregla?

import { crearSocio, Socio } from "./socio.js";

Cannot find module; instalando @types/node No da error: es una importación válida Duplicate identifier; renombrando Socio 'Socio' is a type and must be imported using a type-only import; se arregla con import type o { type Socio }

TypeScript y el DOM

¿Te atascas? Repasa la lección TypeScript y el DOM.

[TypeScript] ¿Por qué da error nombre.value?

const nombre = document.querySelector("#nombre");
if (nombre) {
  console.log(nombre.value);
}

Porque nombre es de tipo string Porque value es privada Porque querySelector con un selector CSS devuelve Element | null, y Element no tiene value Porque falta await

Proyecto: tareas

¿Te atascas? Repasa la lección Proyecto: tareas.

Retos de TypeScript