Materias · 🏛️ Universidad y trabajo
TypeScript
Ejercicios resueltos de TypeScript paso a paso, con el error que más se comete en cada uno: Uniones discriminadas y estrechamiento de tipos, Tipos opcionales y comprobación de nulos y más. Gratis y en español.
Preguntarle al tutor de TypeScriptSin instalar nada. Puedes probar antes de crear cuenta.
Ejercicios resueltos de TypeScript
Resueltos paso a paso, como te los explicaría el tutor, y con el error que más se comete.
Uniones discriminadas y estrechamiento de tipos
El compilador rechaza la línea del return:
type Pago =
| { tipo: "efectivo"; recibido: number }
| { tipo: "tarjeta"; ultimos4: string };
function describir(p: Pago) {
return `Recibí ${p.recibido}`;
}
Error: «La propiedad 'recibido' no existe en el tipo Pago». ¿Cómo se escribe bien?
Cómo se resuelve
- 1Pago es una unión: un valor de ese tipo es una de las dos formas, pero el compilador no sabe cuál hasta que el código lo demuestre.
- 2Sobre una unión sin estrechar solo se pueden leer las propiedades que existen en TODAS las variantes. Aquí la única común es tipo; recibido solo existe en una de las dos.
- 3El campo tipo es el discriminante: una propiedad presente en ambas variantes con un valor literal distinto en cada una. Sirve para que TypeScript deduzca cuál es.
- 4Al comparar el discriminante dentro de un if, TypeScript estrecha el tipo en esa rama: if (p.tipo === "efectivo") { ... } y dentro del bloque p ya es la variante de efectivo, con recibido disponible.
- 5Queda: if (p.tipo === "efectivo") return `Recibí ${p.recibido}`; return `Tarjeta terminada en ${p.ultimos4}`; Al agotar las dos ramas el compilador acepta ambas líneas.
- 6La ganancia real es a futuro: el día que se agregue la variante { tipo: "nequi"; telefono: string }, el compilador señalará todos los sitios que no la contemplan.
Respuesta: Estrechando la unión con el discriminante: if (p.tipo === "efectivo") return `Recibí ${p.recibido}`; return `Tarjeta terminada en ${p.ultimos4}`;
El error de siempre: Callar el error con (p as any).recibido o con un tipo que junte todo y marque los campos como opcionales. Compila, pero en tiempo de ejecución un pago con tarjeta imprime «Recibí undefined» y el compilador ya no puede avisar de nada. El punto de la unión discriminada es justamente que el error salte al escribir el código.
Tipos opcionales y comprobación de nulos
Con strictNullChecks activado, esto no compila:
const materia = materias.find((m) => m.id === id);
console.log(materia.nombre);
Error: «'materia' es posiblemente 'undefined'». ¿Por qué y cuál es el arreglo correcto?
Cómo se resuelve
- 1La firma de Array.prototype.find en TypeScript devuelve T | undefined, no T. No es un capricho: si ningún elemento cumple la condición, find devuelve undefined en tiempo de ejecución.
- 2Con strictNullChecks el compilador no deja leer una propiedad de un valor que podría ser undefined, porque eso reventaría con «Cannot read properties of undefined».
- 3Hay que decidir explícitamente qué pasa cuando no se encuentra nada, y el compilador obliga a hacerlo en el código.
- 4Si la ausencia es un caso válido, se comprueba y se estrecha: if (!materia) return; y después de esa línea TypeScript ya sabe que materia es del tipo completo.
- 5Si la ausencia es un error de verdad, se lanza: if (!materia) throw new Error(`No existe la materia ${id}`); que además deja un mensaje útil en el log en vez de un undefined suelto.
Respuesta: Porque find devuelve T | undefined. Se comprueba antes de usarlo: if (!materia) throw new Error(`No existe la materia ${id}`); y a partir de ahí el tipo ya es seguro.
El error de siempre: Poner materia!.nombre con el signo de admiración. Ese operador no comprueba nada: solo le dice al compilador «confía en mí». El error deja de verse al compilar y aparece igualito en producción, pero ahora sin ninguna pista de dónde venía.
¿Y si tu ejercicio no es ninguno de estos?
No hace falta buscar el ejercicio exacto en internet. Trae el tuyo, o pide los que te falten.
Todo esto es gratis y sin instalar nada. Puedes probar antes de crear cuenta.
Lo que cubre
- Uniones discriminadas y estrechamiento de tipos
- Tipos opcionales y comprobación de nulos
Preguntas que le puedes hacer
- Uniones discriminadas…Explícame «Uniones discriminadas y estrechamiento de tipos» con un ejemplo práctico y dime en qué suele equivocarse la gente.
- Tipos opcionales y co…Explícame «Tipos opcionales y comprobación de nulos» con un ejemplo práctico y dime en qué suele equivocarse la gente.
Cómo enseña este tutor
Es riguroso y completo: justifica cada paso y nombra el teorema, la norma o la buena práctica que está aplicando, para que puedas citarla en tu trabajo o en el parcial.
- · Te muestra el camino completo, no solo el resultado.
- · Si algo no te cuadra, te lo explica otra vez de otra manera.
- · Con una foto de tu cuaderno te dice dónde está el error.
- · Te arma quizzes de lo que acabas de ver para saber si de verdad quedó.
Otras materias de Universidad y trabajo
