Inferencia de tipos en TypeScript: cuándo anotar y cuándo no

La inferencia de tipos es TypeScript deduciendo un tipo que no escribiste. Inicializa una variable y toma el tipo del valor; devuelve un valor desde una función y el tipo de retorno se deduce solo. La mayor parte del código TypeScript lleva muchas menos anotaciones de lo que la gente espera.

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

Los comentarios muestran lo que enseña un editor al pasar el cursor por cada nombre. La última línea es un error de compilación (TS2322) aunque count nunca se anotó; // @ts-expect-error la marca como esperada para que el resto del bloque se ejecute.

let frente a const: ensanchamiento de literales

Una const no puede cambiar nunca, así que TypeScript le da el tipo más estrecho: el propio valor literal. Una let recibe el tipo más amplio, porque puede reasignarse más tarde.

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

Esto importa cuando una función solo acepta ciertos valores:

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

Arréglalo con const o anotando la variable: let dir: "left" | "right" = "left". Los tipos literales tienen su propia página, tipos literales.

Objetos y arrays ensanchan sus miembros

Las propiedades de un objeto literal son mutables, así que se ensanchan como con let, incluso cuando el objeto en sí es const. Los elementos de un array hacen lo mismo. as const lo vuelve todo readonly y conserva los tipos literales.

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

Inferencia del tipo de retorno

El tipo de retorno de una función se infiere a partir de sus sentencias return. Cuando hay varias, el resultado es la unión de todas.

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

Los tipos de retorno inferidos sirven para la mayoría de funciones. Escribe el tipo de retorno de forma explícita en funciones exportadas o públicas cuando quieras que la firma sea un contrato: si un cambio en el cuerpo devuelve otro tipo, el error aparece en la función y no en alguna llamada lejana.

Tipado contextual: los callbacks reciben sus tipos

Los parámetros no se infieren a partir de cómo se llama una función. Hay dos excepciones. Un parámetro con valor por defecto toma el tipo de ese valor (function retry(times = 3) hace que times sea number). Y una función escrita donde ya se espera un tipo de función recibe los tipos de sus parámetros de ese contexto, así que los parámetros de un callback no necesitan anotación.

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

Lo mismo vale para forEach, filter, reduce, los callbacks de Promise, los manejadores de eventos y cualquier función que pases a un parámetro con un tipo de función declarado.

Los parámetros necesitan anotaciones

Sin un valor por defecto ni un contexto como ese, TypeScript no mira cómo se llama una función para adivinar los tipos de sus parámetros. Con strict activado, un parámetro sin anotar es el error TS7006:

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

Escribe function double(x: number) y el bloque imprime 42, con el tipo de retorno number inferido de x * 2.

Mejor tipo común

Para un array literal con valores de distinta clase, TypeScript infiere un array de la unión de sus tipos. No busca un tipo base compartido que no hayas mencionado.

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

El array vacío es el único caso a vigilar. const list = [] empieza como un array «evolutivo» cuyo tipo crece con cada push; una anotación, const list: string[] = [], deja clara la intención desde el principio y se entiende mejor.

Cuándo anotar

La forma más rápida de ver qué se infirió es pasar el cursor por el nombre en tu editor. Sin editor, asigna el valor a una variable de un tipo incorrecto, como const probe: boolean = mixed;, y el mensaje de error del compilador nombra el tipo inferido.