TypeScript
Uso de union types para representar valores alternativos, limitar operaciones comunes y diseñar contratos que requieren narrowing antes de actuar.
Un representa un valor que puede pertenecer a varias posibilidades.
type Identifier = string | number;function printIdentifier(id: string | number): void {
console.log(id);
}function normalize(value: string | string[]): string[] {
return Array.isArray(value)
? value
: [value];
}Antes del narrowing, solo puedes usar miembros presentes en todas las variantes.
value.toUpperCase();No es válido para string[].
type Status =
| "idle"
| "loading"
| "success"
| "error";Son útiles para valores cerrados y autocomplete.
function setAlignment(
alignment: "left" | "center" | "right",
) {}Es más preciso que string: documenta y restringe los valores válidos.
type Payment =
| {
method: "card";
lastFourDigits: string;
}
| {
method: "cash";
receivedAmount: number;
};Cada variante puede tener propiedades distintas.
function describePayment(payment: Payment): string {
return payment.method;
}method existe en ambas. Para las demás necesitas narrowing.
type Value = A | B;Significa A o B, no un objeto con todas las propiedades de ambos.
type Value = string | "hello";Se simplifica a string, porque el conjunto de strings ya incluye "hello".
type Value = Product | never;Se simplifica a Product.
function findProduct(id: string): Product | undefined {
return products.find((product) => product.id === id);
}El consumidor debe manejar la ausencia.
Una propiedad no se vuelve opcional automáticamente por aparecer solo en una variante.
type Result =
| { ok: true; value: Product }
| { ok: false; error: Error };No puedes leer result.value antes de comprobar ok.
string | number[]significa string o array de numbers.
(string | number)[]significa array cuyos elementos pueden ser string o number.
type Handler =
| ((value: string) => void)
| ((value: number) => void);Llamar un valor así puede ser difícil porque el checker necesita un argumento seguro para ambas firmas. A menudo conviene relacionar la función con un discriminante o usar generics.
const statuses = [
"idle",
"loading",
"success",
"error",
] as const;
type Status = (typeof statuses)[number];El array runtime y el tipo permanecen conectados.
Menos seguro:
type RequestState = {
loading: boolean;
data?: Product[];
error?: Error;
};Más preciso:
type RequestState =
| { status: "idle" }
| { status: "loading" }
| { status: "success"; data: Product[] }
| { status: "error"; error: Error };type PriceFilter =
| { type: "minimum"; value: number }
| { type: "maximum"; value: number }
| { type: "range"; minimum: number; maximum: number };string cuando existe un conjunto cerrado.null o undefined sin definir quién lo maneja.A | B no exige todas las propiedades.¿Cuál es la diferencia entre string | number[] y (string | number)[]?
El primero es un string o un array de números. El segundo siempre es un array y cada elemento puede ser string o number.
Intersection types combina requisitos de varios tipos y muestra sus límites.