El operador de tipo `typeof`

El operador de tipo typeof

JavaScript ya tiene un operador typeof que puedes usar en un contexto de expresión:

Prueba este código ↗

// Imprime "string"
console.log(typeof "Hello world");

TypeScript agrega un operador typeof que puedes usar en un contexto type para referirte al type de una variable o propiedad:

Prueba este código ↗

let s = "hello";
let n: typeof s;

let n: string

Esto no es muy útil para tipos básicos, pero combinado con otros operadores de tipo, puedes usar typeof para expresar convenientemente muchos patrones. Por ejemplo, comencemos mirando el tipo predefinido ReturnType<T>. Toma un tipo de función y produce su tipo de retorno:

Prueba este código ↗

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;

type K = boolean

Si intentamos usar ReturnType en el nombre de una función, vemos un error instructivo:

Prueba este código ↗

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<f>;

'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

Recuerda que valores y tipos no son lo mismo. Para referirnos al tipo que tiene el valor f usamos typeof:

Prueba este código ↗

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

type P = {
    x: number;
    y: number;
}

Limitaciones

TypeScript limita intencionalmente los tipos de expresiones en las que puedes usar typeof.

Específicamente, solo es legal usar typeof en identificadores (es decir, nombres de variables) o sus propiedades. Esto ayuda a evitar la trampa confusa de escribir código que crees que se está ejecutando, pero no lo está:

Prueba este código ↗

// Diseñado para usar = ReturnType<typeof msgbox>
let shouldContinue: typeof msgbox("Are you sure you want to continue?");

',' expected.