TypeScript
Cómo TypeScript reduce unions mediante el flujo de control, asignaciones, condiciones y retornos para obtener tipos más específicos en cada rama.
reduce un tipo amplio a una posibilidad más específica usando comprobaciones que también existen en JavaScript.
function format(value: string | number): string {
if (typeof value === "string") {
return value.toUpperCase();
}
return value.toFixed(2);
}TypeScript sigue asignaciones, retornos, throws y condiciones para conocer qué posibilidades siguen vivas en cada punto.
function requireName(name: string | undefined): string {
if (name === undefined) {
throw new Error("Name is required");
}
return name;
}Después del throw, name es string.
let value: string | number;
value = "hello";
value.toUpperCase();El tipo declarado permite ambos, pero el tipo observado en ese punto es string.
value = Math.random() > 0.5 ? "hello" : 10;El tipo vuelve a ser string | number.
function print(value: string | null): void {
if (value === null) {
return;
}
console.log(value.toUpperCase());
}Las guard clauses ayudan tanto al diseño como al narrowing.
if (value) {
// elimina null, undefined, false, 0, "" y otros falsy posibles
}Puede ser incorrecto cuando 0 o "" son datos válidos.
if (value !== undefined) {}Expresa una condición más precisa.
if (first === second) {}Si first es string | number y second es string, dentro de la rama first puede reducirse a string.
const isString = typeof value === "string";
if (isString) {
value.toUpperCase();
}TypeScript puede seguir ciertas condiciones guardadas en constants.
if (result.ok) {
result.value;
} else {
result.error;
}El checker relaciona la propiedad literal con la forma completa.
if (user.profile) {
user.profile.name;
}Una llamada o mutación externa puede invalidar algunas suposiciones en casos complejos. Copiar una referencia estable puede ayudar:
const profile = user.profile;
if (profile) {
useProfile(profile);
}let product: Product | undefined;
if (product) {
setTimeout(() => {
product.name;
});
}Si el binding puede reasignarse antes de ejecutar la callback, TypeScript no siempre conserva el narrowing. Captura un constant:
const currentProduct = product;
if (currentProduct) {
setTimeout(() => {
console.log(currentProduct.name);
});
}type Status = "idle" | "loading";
function describe(status: Status): string {
if (status === "idle") return "Idle";
if (status === "loading") return "Loading";
status;
// never
}const value: unknown = await response.json();
if (
typeof value === "object" &&
value !== null &&
"id" in value &&
typeof value.id === "string"
) {
// forma parcialmente comprobada
}El narrowing surge de checks runtime reales. Una assertion no añade esos checks.
function executeAction(
user: User | AnonymousUser,
): void {
if (user.kind === "anonymous") {
throw new AuthorizationError();
}
performAuthorizedAction(user);
}¿Por qué if (quantity) puede ser una comprobación incorrecta para number | undefined?
Porque también excluye 0, aunque cero pueda ser una cantidad válida. quantity !== undefined expresa la ausencia exacta.
Type guards nativos reúne las comprobaciones runtime que TypeScript entiende de forma incorporada.