TypeScript 怎么用可辨识联合处理多种状态？

Question

仓乃文 · Accepted Answer

异步操作有 loading/success/error 多种状态，用可选属性（data?: T; error?: E）无法保证状态和数据的对应关系。可辨识联合用共同的可辨识属性（如 type 或 status）区分状态，每个状态只包含自己需要的字段，编译时自动收窄。定义状态类型： ```typescript type AsyncState = | { status: "loading" } | { status: "success"; data: T } | { status: "error"; error: string }; ``` 使用时自动收窄： ```typescript function render(state: AsyncState) { switch (state.status) { case "loading": return "加载中..."; case "success": return state.data.map(u => u.name); // OK：data 存在 case "error": return state.error; // OK：error 存在 } } ``` 替代不安全的可选属性： ```typescript // 不安全：loading 时 data 和 error 都可能存在或不存在 interface UnsafeState { loading: boolean; data?: T; error?: string; } ``` 补充说明： - 可辨识属性必须是字面量类型（string 字面量或数字字面量） - switch/if 配合可辨识属性自动收窄，无需类型断言 - Redux/Zustand 等状态管理中推荐用可辨识联合定义 action - 比可选属性更安全，保证状态和数据的对应关系 - 穷尽检查：default 分支赋值给 never 类型确保没有遗漏