TypeScript 怎么用自定义类型守卫收窄联合类型？

Question

仓乃文 · Accepted Answer

处理 API 响应、事件数据等联合类型时，typeof 和 instanceof 无法覆盖所有场景。自定义类型守卫用 is 关键字告诉编译器：函数返回 true 时参数就是指定类型，实现编译时类型收窄。基本用法： ```typescript interface SuccessResponse { status: "success"; data: string[]; } interface ErrorResponse { status: "error"; message: string; } type ApiResponse = SuccessResponse | ErrorResponse; function isSuccess(res: ApiResponse): res is SuccessResponse { return res.status === "success"; } function handleResponse(res: ApiResponse) { if (isSuccess(res)) { console.log(res.data); // OK：收窄为 SuccessResponse } else { console.log(res.message); // OK：收窄为 ErrorResponse } } ``` 数组元素类型过滤： ```typescript function isNonNull(value: T): value is NonNullable { return value !== null && value !== undefined; } const items: (string | null)[] = ["a", null, "b", null]; const filtered = items.filter(isNonNull); // string[] ``` 补充说明： - is 关键字是类型谓词，只用于函数返回值类型声明 - 类型守卫函数的返回值必须是 boolean - Array.filter 配合类型守卫可以正确收窄数组元素类型 - 可辨识联合（discriminated union）配合 switch 也能自动收窄 - 类型守卫是运行时检查 + 编译时收窄的结合