Narrowing: typeof instanceof uniones discriminadas
Use protectores de tipos para acotar tipos de unión en tiempo de ejecución con typeof, instanceof y patrones de unión discriminada.
Narrowing: typeof instanceof uniones discriminadas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es el estrechamiento de tipos?
TypeScript comienza con un tipo amplio, como string | number. El estrechamiento es el proceso de refinar el tipo a uno más específico dentro de un bloque condicional. TypeScript realiza este seguimiento automáticamente.
Estrechamiento con typeof
El operador typeof estrecha los tipos primitivos. Dentro de un bloque if, TypeScript conoce el tipo exacto.
function format(value: string | number | boolean): string {
if (typeof value === 'string') {
return value.toUpperCase(); // string here
}
if (typeof value === 'number') {
return value.toFixed(2); // number here
}
return String(value); // boolean here
}Estrechamiento con instanceof
instanceof estrecha las instancias de clases. TypeScript conoce la clase específica dentro del bloque.
function processError(err: unknown) {
if (err instanceof Error) {
console.error(err.message); // Error methods available
} else if (err instanceof Response) {
console.error('HTTP error:', err.status);
} else {
console.error('Unknown:', err);
}
}Estrechamiento por veracidad
TypeScript excluye null y undefined mediante el estrechamiento en las comprobaciones de veracidad.
function printLength(value: string | null | undefined) {
if (value) {
console.log(value.length); // string here (null/undefined filtered)
}
}Estrechamiento por igualdad
La igualdad estricta estrecha al tipo literal. Resulta útil para las uniones discriminadas y los enums de cadenas.
function handle(action: 'submit' | 'cancel' | 'reset') {
if (action === 'submit') {
// action is exactly 'submit'
doSubmit();
}
}Estrechamiento con el operador in
El operador in estrecha los tipos unión de objetos comprobando qué propiedades existen.
interface Cat { meow(): void; }
interface Dog { bark(): void; }
function speak(animal: Cat | Dog) {
if ('meow' in animal) {
animal.meow(); // Cat
} else {
animal.bark(); // Dog
}
}Uniones discriminadas — estrechamiento basado en etiquetas
Una unión discriminada tiene una propiedad de tipo literal compartida (el discriminante). TypeScript estrecha la unión en switch/if basándose en esa propiedad.
type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;
function render(state: State) {
switch (state.status) {
case 'loading': return '<Spinner />';
case 'success': return renderUsers(state.data); // state.data available
case 'error': return renderError(state.message);
}
}Predicados de tipo — protectores de tipo personalizados
Una función de predicado de tipo estrecha el tipo para quien la llama. Utilice param is Type como tipo de retorno.
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'name' in value &&
typeof (value as User).name === 'string'
);
}
const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
console.log(data.name); // typed as User
}Funciones de aserción
Una función de aserción lanza una excepción si la condición falla y estrecha el tipo después de la llamada.
function assertIsString(val: unknown): asserts val is string {
if (typeof val !== 'string') throw new Error('Expected string');
}
const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string hereComprobación de exhaustividad
Cuando un switch sobre una unión discriminada deja un tipo never en la rama predeterminada, TypeScript garantiza que se hayan gestionado todos los casos. Añada un valor predeterminado que asigne a never para obtener un error de compilación si se agrega una variante nueva.
function render(state: State): string {
switch (state.status) {
case 'loading': return '...';
case 'success': return state.data.length.toString();
case 'error': return state.message;
default:
const _exhaustive: never = state;
throw new Error('Unhandled state: ' + _exhaustive);
}
}Estrechamiento con Array.isArray
Array.isArray() estrecha un valor al tipo array.
function processInput(input: string | string[]) {
if (Array.isArray(input)) {
return input.join(', '); // string[]
}
return input.toUpperCase(); // string
}Comprobación rápida
¿Qué técnica de estrechamiento utiliza una propiedad literal compartida para distinguir las variantes de un tipo unión?
Recapitulación: estrechamiento en TypeScript
typeof para tipos primitivos. instanceof para clases. El operador in para formas de objetos. La veracidad filtra null/undefined. Las uniones discriminadas con una propiedad literal compartida permiten instrucciones switch exhaustivas. Predicados de tipo personalizados (is) para comprobaciones complejas en tiempo de ejecución. Comprobación de exhaustividad con never en los valores predeterminados.
Preguntas frecuentes
¿La lección «Narrowing: typeof instanceof uniones discriminadas» es gratis?
Sí — el texto completo de «Narrowing: typeof instanceof uniones discriminadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Narrowing: typeof instanceof uniones discriminadas»?
Use protectores de tipos para acotar tipos de unión en tiempo de ejecución con typeof, instanceof y patrones de unión discriminada. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Narrowing: typeof instanceof uniones discriminadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Genéricos: T extends y restricciones
- Tipos utilitarios: Partial Required Pick Omit
- Tipos mapeados y tipos condicionales
- Narrowing: typeof instanceof uniones discriminadas