Respuesta.

Historia de la pregunta

En JavaScript, el operador typeof se utiliza para verificar el tipo de valores primitivos en tiempo de ejecución. TypeScript amplía este mecanismo y lo convierte en parte del sistema de reducción de tipos (type narrowing) a través de las guardas de tipo (type guards). TypeScript utiliza el resultado del operador typeof para especificar el tipo de una variable dentro de un bloque de código, lo que permite describir de manera más precisa la lógica de la función, especialmente al trabajar con tipos union.

Problema

En JavaScript, después de verificar el tipo de un valor usando typeof, no hay ninguna garantía de tipo: el programador debe recordar qué sucede en cada parte del código. Sin embargo, en TypeScript, la tarea se complica por la presencia de diferentes tipos y tipos union, y sin una adecuada reducción de tipo, es fácil cometer un error, por ejemplo, llamando a un método inexistente. Además, el operador tiene limitaciones concretas: solo "ve" tipos primitivos básicos, por ejemplo, para arrays y objetos retornará 'object'.

Solución

TypeScript permite combinar el operador typeof con análisis de tipos para reducir el tipo de la variable dentro de un bloque de código. Esto aumenta automáticamente la seguridad, ya que el compilador sabe con qué tipo trabaja el código y sugiere las posibles propiedades y métodos.

Ejemplo de código:

function printId(id: number | string) {
  if (typeof id === 'string') {
    // En esta rama id: string
    console.log(id.toUpperCase());
  } else {
    // En esta rama id: number
    console.log(id.toFixed(2));
  }
}

Características clave:

• Funciona solo con primitivos: 'string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function', 'bigint'.
• Ayuda a TypeScript a reducir el tipo union a un primitivo específico dentro de un bloque de código.
• No distingue entre arrays y objetos, siempre retorna 'object' para ellos.

Preguntas trampa.

¿Puede el operador typeof identificar un array?

No, typeof para un array y un objeto devolverá el mismo valor — 'object'. Para identificar arrays es mejor usar el método Array.isArray().

Ejemplo de código:

const arr = [1, 2, 3];
console.log(typeof arr); // 'object'
console.log(Array.isArray(arr)); // true

¿Se puede diferenciar null y objeto con typeof?

No, typeof null devuelve 'object'; esta es una peculiaridad histórica de JavaScript.

Ejemplo de código:

console.log(typeof null); // 'object'

¿Se puede verificar una clase personalizada con typeof?

No, para las instancias de clases, typeof también devolverá 'object'. Para esto se utilizan el operador instanceof o funciones de guardas de tipo personalizadas.

Ejemplo de código:

class User {}
const u = new User();
console.log(typeof u); // 'object'
console.log(u instanceof User); // true

Errores de tipo y anti-patrones

• Usar typeof para verificar estructuras de datos complejas (por ejemplo, arrays, null, objetos).
• Ignorar el uso de los operadores instanceof y Array.isArray() para una reducción de tipo más precisa.
• Verificar tipos solo en tiempo de ejecución, ignorando la verificación estática.

Ejemplo de la vida real

Caso negativo

Un programador escribió una función que quería verificar si un value era un array usando typeof, y basado en el resultado, llamar a diferentes métodos.

Pros:

• El código está escrito de manera sencilla.
• No requiere funciones adicionales.

Contras:

• La función falla al pasar un array: el array se percibe como un objeto, errores en tiempo de ejecución.

Caso positivo

Uso de Array.isArray y combinación con guardas de tipo.

Pros:

• Tipado estático seguro.
• Ausencia de errores con tipos de objetos frente a arrays.

Contras:

• Es necesario recordar diferentes herramientas de guardas de tipo.