TypeScript模板字符串构造类型报错原因及优化方案咨询

两种写法的差异 #

第一种写法报错是因为TypeScript的映射类型语法规则限制：一个对象字面量内部只能存在一个独立的[key in ...]映射结构，不允许在同一个对象里声明多个并行的映射条目。你写的第一个Test类型试图在同一个对象里同时定义两个映射属性，这违反了TS的语法约束，因此抛出A mapped type may not declare properties or methods.ts(7061)错误。

第二种写法Test2则是把两个独立的映射类型用交叉类型&合并在一起：每个{ [key in ...]: ... }都是合法的单个映射类型，交叉操作会将两个类型的属性合并为一个完整的类型，完全符合TS的语法规则，所以能正常编译。

更优的构造方式 #

确实没必要用多个独立映射再交叉，你可以把需要生成的键合并成联合类型，在单个映射里通过条件类型区分不同键对应的属性值，写法更简洁：

type Test<Name extends string> = {
  [key in `a${Name}` | `b${Name}`]: key extends `a${Name}` ? 88 : 21;
};

这种方式的核心是：

• 用模板字符串联合类型a${Name} | b${Name}定义所有需要的键
• 通过key extends ...的条件判断，为不同前缀的键分配对应的属性类型
• 整个逻辑集中在一个映射类型里，更符合映射类型的设计意图，代码也更紧凑

内容的提问来源于stack exchange，提问作者QurakNerd