TypeScript中如何为接口多个属性自动添加前缀？

当然可以！TypeScript的映射类型刚好能解决这种重复手动加前缀的麻烦事，实现起来简洁还省心。下面一步步给你演示怎么弄：

1. 先定义无前缀的基础属性类型 #

先把你需要的属性整理成一个不带前缀的类型，后续维护起来会方便很多：

type BaseProps = {
  foo: number;
  bar: string;
  baz: boolean;
};

2. 写一个通用的前缀映射工具类型 #

接下来用映射类型的键名重映射语法，遍历基础类型的所有属性，给每个属性名拼接上指定前缀：

type AddPrefix<T extends string, Props> = {
  // 把原属性名K和前缀T拼接成新的属性名
  [K in keyof Props as `${T}${string & K}`]: Props[K];
};

这里的as ${T}${string & K}``是核心——它会自动把每个原属性名和前缀组合，生成带前缀的新属性名，同时保留原属性的类型。

3. 生成你需要的最终类型 #

现在只需要把前缀和基础类型传入这个工具类型，就能得到带前缀的目标类型了：

// 可以用interface扩展
interface b extends AddPrefix<'PREFIX', BaseProps> {}

// 或者直接生成类型别名，更简洁
// type b = AddPrefix<'PREFIX', BaseProps>;

4. 使用示例 #

用的时候完全和你原来的写法一致，而且TypeScript还会自动提示补全带前缀的属性名：

let x: b = {
  PREFIXfoo: 1,
  PREFIXbar: '',
  PREFIXbaz: true,
};

以后要是想修改前缀或者增减属性，只需要改BaseProps或者前缀字符串就行，不用一个个手动改带前缀的属性名，维护起来轻松太多啦！

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