Saltar al contenido principal

Ejercicios de Typescript

Este archivo contiene 30 ejercicios pensados para practicar TypeScript. Cada ejercicio tiene:

  • Código en JavaScript (punto de partida).
  • Una pista que indica la característica de TypeScript a utilizar y para qué sirve.
  • La solución oculta usando <details> para que los estudiantes puedan intentar primero.

No están separados por niveles; la dificultad aumenta de forma gradual.

Ejercicio 1: Suma simple (tipos básicos)​

// Convierte a TypeScript
function sumar(a, b) {
  return a + b;
}

Pista: Usa tipos number en los parámetros y en el tipo de retorno. number sirve para representar valores numéricos y ayuda a evitar pasar strings por error.

💡 Ver solución
function sumar(a: number, b: number): number {
  return a + b;
}

Ejercicio 2: Parámetro opcional y por defecto​

// Convierte a TypeScript
function saludar(nombre, saludo) {
  saludo = saludo || "Hola";
  return `${saludo}, ${nombre}`;
}

Pista: Usa ? para parámetros opcionales y valores por defecto. param?: T indica que puede omitirse y = valor da un valor por defecto.

💡 Ver solución
function saludar(nombre: string, saludo: string = "Hola"): string {
  return `${saludo}, ${nombre}`;
}

Ejercicio 3: Definir un objeto con interfaz​

// Convierte a TypeScript
const crearUsuario = (u) => {
  return `Usuario ${u.nombre} creado con id ${u.id}`;
};

Pista: Usa interface para declarar la forma del objeto Usuario. interface sirve para definir contratos de forma clara entre partes del código.

💡 Ver solución
interface Usuario {
  id: number;
  nombre: string;
  email?: string; // opcional
}

const crearUsuario = (u: Usuario): string => {
  return `Usuario ${u.nombre} creado con id ${u.id}`;
};

Ejercicio 4: Readonly y tipos literales​

// Convierte a TypeScript
const config = {
  mode: "production",
  version: "1.0.0"
};

Pista: Usa readonly para propiedades inmutables y un union type literal (por ejemplo "dev" | "prod"). readonly evita reasignaciones accidentales.

💡 Ver solución
type Mode = "development" | "production" | "test";

interface Config {
  readonly mode: Mode;
  readonly version: string;
}

const config: Config = {
  mode: "production",
  version: "1.0.0"
};

// config.version = '1.0.1' // Error: no se puede asignar a 'version' porque es readonly

Ejercicio 5: Tuplas​

// Convierte a TypeScript
function crearPar(nombre, edad) {
  return [nombre, edad];
}

Pista: Usa una tupla [string, number] para representar (nombre, edad). Las tuplas permiten tipos fijos en posiciones concretas.

💡 Ver solución
function crearPar(nombre: string, edad: number): [string, number] {
  return [nombre, edad];
}

const p = crearPar("Ana", 30);

Ejercicio 6: Enums para estados​

// Convierte a TypeScript
const estado = "Activo"; // puede ser 'Activo' o 'Inactivo'

Pista: Usa enum para representar un conjunto de valores nombrados. enum ayuda a mantener valores constantes legibles y seguros.

💡 Ver solución
enum Estado {
  Activo = "Activo",
  Inactivo = "Inactivo"
}

const estado: Estado = Estado.Activo;

Ejercicio 7: Genéricos: identidad​

// Convierte a TypeScript
function identidad(x) {
  return x;
}

Pista: Usa generics (<T>) para que la función preserve y acepte cualquier tipo. Los genéricos permiten escribir funciones y tipos reutilizables y tipados.

💡 Ver solución
function identidad<T>(x: T): T {
  return x;
}

const a = identidad<number>(123);
const b = identidad("hola");

Ejercicio 8: Genéricos con restricción (length)​

// Convierte a TypeScript
function cuentaLongitud(x) {
  return x.length;
}

Pista: Usa T extends { length: number } para restringir a tipos que tengan length. Esto garantiza que x.length existe.

💡 Ver solución
function cuentaLongitud<T extends { length: number }>(x: T): number {
  return x.length;
}

console.log(cuentaLongitud('hola')); // 4
console.log(cuentaLongitud([1,2,3])); // 3

Ejercicio 9: Unión de tipos y narrowing​

// Convierte a TypeScript
function formatear(x) {
  if (typeof x === 'number') {
    return x.toFixed(2);
  }
  return x.trim();
}

Pista: Usa string | number y typeof para hacer narrowing. typeof permite distinguir tipos primitivos en tiempo de ejecución.

💡 Ver solución
function formatear(x: string | number): string {
  if (typeof x === 'number') {
    return x.toFixed(2);
  }
  return x.trim();
}

Ejercicio 10: Type guard con in​

// Convierte a TypeScript
function descripcion(animal) {
  if (animal.nombre) {
    return `Animal: ${animal.nombre}`;
  }
  return 'Anónimo';
}

Pista: Usa in para comprobar presencia de una propiedad (p.ej. if ('nombre' in animal)). Esto sirve como type guard para objetos con distintas formas.

💡 Ver solución
type Gato = { nombre: string; ronronea: boolean };
type Pez = { tipo: string; nada: boolean };

function descripcion(animal: Gato | Pez): string {
  if ('nombre' in animal) {
    return `Animal: ${animal.nombre}`;
  }
  return 'Anónimo';
}

Ejercicio 11: Narrowing con instanceof​

// Convierte a TypeScript
class A { constructor() {} }
class B { constructor() {} }

function esA(x) {
  if (x instanceof A) return true;
  return false;
}

Pista: Usa clases y instanceof para distinguir instancias en tiempo de ejecución. instanceof es útil con clases y permite inferir el tipo dentro del bloque.

💡 Ver solución
class A { a = 1 }
class B { b = 2 }

function esA(x: A | B): boolean {
  if (x instanceof A) return true;
  return false;
}

const a = new A();
console.log(esA(a));

Ejercicio 12: Uniones discriminadas (formas geométricas)​

// Convierte a TypeScript
function area(shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius * shape.radius;
  }
  return shape.size * shape.size;
}

Pista: Usa type con una propiedad literal discriminante kind. Las uniones discriminadas facilitan el narrowing y la seguridad de tipos.

💡 Ver solución
type Circulo = { kind: 'circle'; radius: number };
type Cuadrado = { kind: 'square'; size: number };
type Shape = Circulo | Cuadrado;

function area(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius * shape.radius;
  }
  return shape.size * shape.size;
}

Ejercicio 13: keyof y pluck​

// Convierte a TypeScript
function pluck(obj, keys) {
  return keys.map(k => obj[k]);
}

Pista: Usa keyof y genéricos K extends keyof T para asegurar que las claves existen en obj. keyof obtiene las claves de un tipo.

💡 Ver solución
function pluck<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
  return keys.map(k => obj[k]);
}

const persona = { nombre: 'Ana', edad: 28 };
const resultados = pluck(persona, ['nombre']); // tipo: string[]

Ejercicio 14: Utility type: Pick​

// Convierte a TypeScript
const user = { id: 1, nombre: 'Ana', password: '123' };
// Queremos un objeto público sin password

Pista: Usa Pick<T, K> para construir un nuevo tipo con solo algunas propiedades. Pick sirve para exponer solo un subconjunto del tipo original.

💡 Ver solución
interface Usuario {
  id: number;
  nombre: string;
  password: string;
}

type UsuarioPublico = Pick<Usuario, 'id' | 'nombre'>;

const user: UsuarioPublico = { id: 1, nombre: 'Ana' };

Ejercicio 15: Utility type: Omit​

// Convierte a TypeScript
const user = { id: 1, nombre: 'Ana', password: '123' };
// Queremos un usuario sin password

Pista: Usa Omit<T, K> para crear un tipo sin ciertas propiedades. Omit es útil para eliminar campos sensibles como contraseña.

💡 Ver solución
interface Usuario {
  id: number;
  nombre: string;
  password: string;
}

type UsuarioSinPassword = Omit<Usuario, 'password'>;

const safeUser: UsuarioSinPassword = { id: 1, nombre: 'Ana' };

Ejercicio 16: Partial y Required​

// Convierte a TypeScript
function actualizar(usuario, cambios) {
  return { ...usuario, ...cambios };
}

Pista: Usa Partial<T> para permitir objetos con propiedades opcionales en cambios. Partial convierte todas las propiedades en opcionales; Required hace lo contrario.

💡 Ver solución
interface Usuario {
  id: number;
  nombre: string;
  email?: string;
}

function actualizar(usuario: Usuario, cambios: Partial<Usuario>): Usuario {
  return { ...usuario, ...cambios };
}

const u: Usuario = { id: 1, nombre: 'Ana' };
const actualizado = actualizar(u, { email: 'a@b.com' });

Ejercicio 17: ReadonlyArray y readonly​

// Convierte a TypeScript
const nums = [1,2,3];
nums.push(4); // debería no permitirse si queremos inmutabilidad

Pista: Usa readonly o ReadonlyArray<T> para arrays inmutables. readonly evita métodos mutativos como push o splice en tiempo de compilación.

💡 Ver solución
const nums: ReadonlyArray<number> = [1, 2, 3];
// nums.push(4); // Error: Property 'push' does not exist on type 'readonly number[]'.

Ejercicio 18: Sobrecarga de funciones​

// Convierte a TypeScript
function combinar(a, b) {
  if (typeof a === 'number' && typeof b === 'number') return a + b;
  return `${a}${b}`;
}

Pista: Usa overloads (declaraciones de firma) para expresar que la función puede aceptar y devolver distintos tipos. Esto mejora la inferencia para quien la use.

💡 Ver solución
function combinar(a: number, b: number): number;
function combinar(a: string, b: string): string;
function combinar(a: any, b: any): any {
  if (typeof a === 'number' && typeof b === 'number') return a + b;
  return `${a}${b}`;
}

const n = combinar(1, 2); // number
const s = combinar('a', 'b'); // string

Ejercicio 19: Mapped types: crear Optionalize​

// Convierte a TypeScript
// Queremos un tipo igual al original pero con todas las propiedades opcionales

Pista: Crea un mapped type Optionalize<T> con [P in keyof T]?: T[P]. Los mapped types transforman propiedades de un tipo a través de keyof.

💡 Ver solución
type Optionalize<T> = { [P in keyof T]?: T[P] };

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

type PersonaOpcional = Optionalize<Persona>; // { id?: number; nombre?: string }

Ejercicio 20: Tipos condicionales simples​

// Convierte a TypeScript
// Queremos un tipo que sea 'yes' si T es string, y 'no' en caso contrario

Pista: Usa T extends U ? X : Y para crear tipos condicionales. Sirven para calcular tipos basados en otros.

💡 Ver solución
type IsString<T> = T extends string ? 'yes' : 'no';

type A = IsString<string>; // 'yes'
type B = IsString<number>; // 'no'

Ejercicio 21: unknown vs any​

// Convierte a TypeScript
function parse(json) {
  return JSON.parse(json);
}

Pista: Usa unknown como tipo de retorno de parse y narrowing antes de usarlo. unknown obliga a comprobar el tipo antes de operar, a diferencia de any.

💡 Ver solución
function parse(json: string): unknown {
  return JSON.parse(json);
}

const data = parse('{"x":1}');
if (typeof data === 'object' && data !== null && 'x' in data) {
  // ahora TypeScript permite acceso seguro
  console.log((data as any).x);
}

Ejercicio 22: never y chequeo exhaustivo​

// Convierte a TypeScript
function procesar(valor) {
  switch(valor) {
    case 'a': return 1;
    case 'b': return 2;
  }
}

Pista: Usa un never en la rama default para forzar exhaustividad (assertNever). never representa valores que nunca ocurren y ayuda a detectar casos no manejados.

💡 Ver solución
type T = 'a' | 'b';

function assertNever(x: never): never {
  throw new Error('Valor inesperado: ' + x);
}

function procesar(valor: T): number {
  switch (valor) {
    case 'a': return 1;
    case 'b': return 2;
    default: return assertNever(valor as never);
  }
}

Ejercicio 23: Index signatures / Record​

// Convierte a TypeScript
const puntuaciones = {};
puntuaciones['ana'] = 10;
puntuaciones['juan'] = 8;

Pista: Usa Record<string, number> o interface con index signature [k: string]: number para tipar objetos con claves dinámicas.

💡 Ver solución
const puntuaciones: Record<string, number> = {};
puntuaciones['ana'] = 10;
puntuaciones['juan'] = 8;

Ejercicio 24: Módulos: export / import​

// Convierte a TypeScript (dos archivos)
// utils.js
function doble(x) { return x * 2; }
module.exports = { doble };

// index.js
const { doble } = require('./utils');
console.log(doble(3));

Pista: Usa export y import con tipos. export declara lo que se comparte desde un módulo y import lo consume.

💡 Ver solución
// utils.ts
export function doble(x: number): number { return x * 2; }

// index.ts
import { doble } from './utils';
console.log(doble(3));

Ejercicio 25: 'as const' para inferencia literal​

// Convierte a TypeScript
const opciones = { modo: 'auto', retry: 3 };

Pista: Usa as const para fijar valores como literales (readonly). as const convierte propiedades en readonly y sus valores en tipos literales.

💡 Ver solución
const opciones = { modo: 'auto', retry: 3 } as const;
// tipo de opciones.modo es 'auto' (literal), no string

Ejercicio 26: Tuplas con elementos rest​

// Convierte a TypeScript
function makeTuple(first, ...rest) {
  return [first, ...rest];
}

Pista: Declara la tupla como [string, ...number[]] por ejemplo. Los rest elements en tuplas permiten mezclar longitud fija con repetición tipada.

💡 Ver solución
function makeTuple(first: string, ...rest: number[]): [string, ...number[]] {
  return [first, ...rest];
}

const t = makeTuple('x', 1, 2, 3); // tipo: [string, ...number[]]

Ejercicio 27: Promises y async/await​

// Convierte a TypeScript
async function fetchUser() {
  const r = await fetch('/user');
  return r.json();
}

Pista: Tipa la función con Promise<Usuario> y el método json() con el tipo correcto. Las promesas en TS se declaran como Promise<T>.

💡 Ver solución
interface Usuario { id: number; nombre: string; }

async function fetchUser(): Promise<Usuario> {
  const r = await fetch('/user');
  const data = await r.json() as Usuario;
  return data;
}

Ejercicio 28: Type assertion y non-null assertion​

// Convierte a TypeScript
const el = document.getElementById('app');
el.innerHTML = 'Hola';

Pista: Usa as HTMLElement o ! para indicar a TypeScript que conoces el tipo o que no es null. ! (non-null assertion) asume que el valor no es null/undefined.

💡 Ver solución
const el = document.getElementById('app') as HTMLElement | null;
if (el) {
  el.innerHTML = 'Hola';
}

// o usando non-null assertion (con precaución)
const el2 = document.getElementById('app')!;
el2.innerHTML = 'Hola';