TypeScript
Cómo TypeScript infiere tipos a partir de valores y contexto, cuándo conviene anotar y cómo contextual typing mejora callbacks, objetos y expresiones.
TypeScript no necesita una anotación en cada valor. Utiliza información del código para inferir tipos y utiliza el contexto para comprobar expresiones.
const quantity = 3;
const name = "Keyboard";let quantity: number = 3;La anotación declara un contrato para el binding.
No convierte el valor:
let quantity: number = "3";produce un error; TypeScript no transforma el string en número.
let total = 0;
total = 100;total se infiere como number.
total = "100";no es compatible con el tipo inferido.
Ruidoso:
const name: string = "Nicolás";
const active: boolean = true;
const count: number = 0;Más claro:
const name = "Nicolás";
const active = true;
const count = 0;La anotación no aporta información nueva.
let status: "idle" | "loading" | "success" = "idle";Sin anotación, un let inicializado con un string suele ampliarse a string porque puede recibir otros strings.
Aquí el tipo limita el estado a posibilidades válidas.
function calculateSubtotal(
price: number,
quantity: number,
) {
return price * quantity;
}Los parámetros de una declaración normal no tienen un valor inicial desde el cual inferir un contrato general. Bajo noImplicitAny, debes tiparlos o proporcionar un contexto.
function calculateSubtotal(
price: number,
quantity: number,
) {
return price * quantity;
}El retorno se infiere como number.
export function createProduct(input: ProductInput): Product {
return {
id: createId(),
...input,
};
}Una anotación de retorno puede:
En helpers locales simples, la inferencia suele ser suficiente.
Sin anotación:
export function getUser() {
return {
id: "user-1",
internalToken: "secret",
};
}El tipo público incluye internalToken.
Con contrato:
type PublicUser = {
id: string;
};
export function getUser(): PublicUser {
return {
id: "user-1",
};
}El contexto puede tipar una función sin anotaciones internas.
const names = ["Nicolás", "Ana"];
names.map((name) => name.toUpperCase());map conoce el tipo de elementos y utiliza su firma para inferir que name es string.
type Formatter = (value: number) => string;
const formatCurrency: Formatter = (value) => {
return `$${value.toFixed(2)}`;
};value se tipa por contexto y el retorno se comprueba contra string.
button.addEventListener("click", (event) => {
event.currentTarget;
});La firma de addEventListener proporciona el tipo del evento.
Extraer la callback sin contrato puede perder ese contexto:
const handleClick = (event) => {};Bajo reglas estrictas, event queda implícitamente any.
const handleClick: EventListener = (event) => {};const values = [1, 2, null];TypeScript busca un tipo capaz de representar todos los elementos, por ejemplo (number | null)[] bajo null checking estricto.
Si las posibilidades no representan la intención, declara el contrato.
function pair<T>(first: T, second: T) {
return [first, second] as const;
}El checker intenta encontrar un tipo compatible con ambos argumentos. En generics, la inferencia puede producir un tipo más amplio del esperado o fallar si las relaciones son incompatibles.
Conceptualmente, TypeScript utiliza información:
const handler: (value: string) => void = (value) => {
console.log(value.length);
};El contexto viaja hacia la callback.
Anotación:
const product: Product = value;El valor debe ser compatible.
Assertion:
const product = value as Product;Le indica al checker que acepte una interpretación permitida, aunque no exista una demostración completa.
Prefiere anotaciones, narrowing o validación antes que assertions.
let product: Product;La anotación define qué podrá asignarse después.
El análisis de asignación definida intenta impedir leerla antes de recibir un valor.
class ProductService {
private repository: ProductRepository;
constructor(repository: ProductRepository) {
this.repository = repository;
}
}La anotación comunica el contrato de una propiedad cuyo valor llega más tarde.
TypeScript no ejecuta funciones para descubrir el resultado real ni consulta una API externa.
const value = JSON.parse(text);Históricamente JSON.parse retorna any, por lo que no existe una inferencia segura del contenido. Una capa de parsing debe devolver un tipo comprobado.
type Configuration = {
apiUrl: string;
retries: number;
};
export const configuration: Configuration = {
apiUrl: process.env.API_URL ?? "",
retries: 3,
};La anotación comprueba que el objeto satisface la API, aunque más adelante satisfies permitirá conservar una inferencia más específica en ciertos casos.
¿Por qué name no necesita anotación dentro de este callback?
["Ana", "Nicolás"].map((name) => name.length);Porque la firma de map conoce que el array contiene strings y proporciona ese tipo como contexto para el parámetro de la callback.
Literal types, widening, as const y satisfies explica por qué un valor específico a veces se amplía y cómo conservar precisión sin mentir al checker.