如何在TypeScript中从后端返回的数组动态生成类型用于类型约束?
如何在TypeScript中从后端返回的数组动态生成类型用于类型约束?
这个问题我之前也碰到过,TypeScript的静态类型系统确实需要点小技巧来处理这种从动态数组生成类型的场景,我来给你一步步拆解解决方案:
首先得明确:TypeScript的类型检查是在编译阶段完成的,所以如果直接用普通的数组,TypeScript会把它推断成宽泛的string[],没法提取出具体的元素字面量类型。我们需要让TypeScript“记住”数组里每个元素的具体值,这时候就要用到const断言。
步骤1:给API返回的数组添加const断言
把你的数组定义改成这样:
// 用as const让TypeScript将数组元素推断为字面量类型,而不是宽泛的string const KEYS_FROM_API = ['ARE_YOU_SURE', 'NOT_NOW', 'GO_BACK'] as const;
这时候KEYS_FROM_API的类型就变成了readonly ['ARE_YOU_SURE', 'NOT_NOW', 'GO_BACK'],每个元素的具体值都被保留在类型层面了。
步骤2:动态生成联合类型
接下来我们可以通过typeof和索引访问类型,从数组的类型中提取出元素的联合类型:
// 用typeof获取数组的类型,再通过[number]索引访问得到所有元素的字面量联合类型 type DYNAMIC_KEYS_TYPE = typeof KEYS_FROM_API[number];
这时候DYNAMIC_KEYS_TYPE就等价于你之前硬编码的'ARE_YOU_SURE' | 'NOT_NOW' | 'GO_BACK',但它是完全从数组动态生成的。
步骤3:继续用Record创建约束对象的类型
这一步和你原来的代码逻辑一致,用Record来定义对象的类型:
type ResultType = Record<DYNAMIC_KEYS_TYPE, string>;
步骤4:验证最终效果
现在你的RESULT对象依然会被严格约束,必须包含所有数组中的key,且值都是string类型:
const RESULT: ResultType = { ARE_YOU_SURE: 'Are You sure', NOT_NOW: 'Not Now', GO_BACK: 'go back' }; // 正常访问,没有类型错误 console.log(RESULT.ARE_YOU_SURE, RESULT.NOT_NOW, RESULT.GO_BACK); // 如果少写一个key,或者写错key,TypeScript会直接抛出类型错误 // 比如下面这行代码会报错:类型"{ ARE_YOU_SURE: string; NOT_NOW: string; }"缺少属性"GO_BACK" // const BAD_RESULT: ResultType = { ARE_YOU_SURE: 'test', NOT_NOW: 'test' };
这样一来,只要你修改KEYS_FROM_API数组的内容,对应的类型会自动更新,完全不需要手动维护硬编码的联合类型,完美适配你从后端动态获取key的场景。
备注:内容来源于stack exchange,提问作者sibabrat swain
相关产品推荐
相关产品推荐

