这是一种 TypeScript 的高级类型技巧，用于从值推导出类型，实现类型和值的完美同步。
基本语法
const values = ["A", "B", "C"] as const;
type ValueType = typeof values[number];
// ValueType = "A" | "B" | "C"
三个关键组成部分
1. as const - 常量断言
// 没有 as const: string[]
const names1 = ["Alice", "Bob"];// 有 as const: readonly ["Alice", "Bob"]
const names2 = ["Alice", "Bob"] as const;
2. typeof - 类型查询
// 获取值的类型
const arr = [1, 2, 3] as const;
type ArrType = typeof arr; // readonly [1, 2, 3]
3. [number] - 索引访问类型
const values = ["A", "B", "C"] as const;
type ValueType = typeof values[number]; // "A" | "B" | "C"
优势特点
// 只在这里定义一次
const eventNames = ["CREATE", "UPDATE", "DELETE"] as const;
type EventName = typeof eventNames[number];// 类型自动同步：EventName = "CREATE" | "UPDATE" | "DELETE"
自动同步
// 添加新值
const statuses = ["PENDING", "SUCCESS", "FAILED", "CANCELED"] as const;
type Status = typeof statuses[number];
// Status 自动变为: "PENDING" | "SUCCESS" | "FAILED" | "CANCELED"
运行时可用
// 可以在运行时使用数组
statuses.forEach(status => {console.log(`处理状态: ${status}`);
});// 验证函数
function isValidStatus(status: string): status is Status {return statuses.includes(status as Status);
}
适用场景
1. 固定值集合
// 颜色主题
const themes = ["light", "dark", "system"] as const;
type Theme = typeof themes[number];// 用户角色
const roles = ["admin", "user", "guest"] as const;
type Role = typeof roles[number];
2. 配置选项
const sortOptions = ["name", "date", "price"] as const;
type SortOption = typeof sortOptions[number];
3. API 端点
const apiEndpoints = ["/users", "/posts", "/comments"] as const;
type ApiEndpoint = typeof apiEndpoints[number];
对比其他方案
| 方案 | 类型安全 | 运行时可用 | 维护性 |
|---|---|---|---|
typeof values[number] |
✅ | ✅ | ✅ |
| 直接联合类型 | ✅ | ❌ | ❌ |
| 枚举 | ✅ | ✅ | ⚠️ |
最佳实践
推荐使用
// 定义常量数组
const eventNames = ["API:UN_AUTHORIZED", "API:INVAALID", "API:NETWORK_ERROR", "API:SESSION_EXPIRRED"] as const;
type EventName = typeof eventNames[number];
/*** 监听事件* @param eventNme 事件名称* @param listener */
on(eventName: EventName, listener: Function) {if(eventNames.includes(eventName)) {// 运行时安全this.listeners[eventName].add(listener);}
}
避免使用
// 不需要运行时验证的简单场景
type SimpleStatus = "active" | "inactive";
常见错误
忘记 as const
const colors = ["red", "blue"]; // string[]
type Color = typeof colors[number]; // string
错误的使用场景
// 不适合动态生成的数据
const dynamicValues = fetchDataFromAPI(); // 运行时数据
type DynamicType = typeof dynamicValues[number]; // 可能不是预期的类型
总结
使用时机：当你需要一组固定的值，并且希望在编译时和运行时都能使用这些值。
核心价值：保持类型定义和实际值的完全同步，避免重复和维护负担。
记住口诀：as const 定值，typeof 取型，[number] 得联合，类型值永同步！