请教：TypeScript中两种索引签名写法是否存在差异？

先看你给出的代码示例：

type KeyInString =  {
  [key in string]: string
}

type KeyColonString =  {
  [key: string]: string
}

const test2: KeyColonString = {
  random: 'ASDAS',
  more: "asdadsa"
}

const test1: KeyInString = {
  random: 'ASDAS',
  more: "asdadsa"
}

这两种写法看似相似，但本质和适用场景存在区别：

1. 语法本质不同 #

• { [key in string]: string } 属于映射类型，逻辑是遍历string类型的所有可能取值，为每个值生成对应的属性定义。虽然string是无限集合，这看起来和索引签名效果一致，但映射类型是一种更通用的类型构造器，能和其他TypeScript特性结合使用。
• { [key: string]: string } 是索引签名，是专门用来声明「所有字符串类型的键，对应的值都是string类型」的语法，是一种更直接的对象结构声明方式。

2. 实际能力的差异 #

在你给出的简单场景中，两者的类型检查表现几乎一致，但遇到复杂场景时区别明显：

• 映射类型可以基于已有类型的键生成新类型，比如结合keyof：

  type Person = { name: string; age: number }
  // 把Person的所有属性值类型改成string
  type PersonStringValues = { [key in keyof Person]: string }
  // 最终生成类型：{ name: string; age: string }
  

  这种基于已有类型键生成新类型的能力，索引签名做不到——索引签名只能声明任意键的类型范围，无法枚举具体的键。
• 映射类型可以通过修饰符灵活调整属性特性，比如添加/移除只读、可选标记：

  // 生成所有可选的字符串键属性
  type OptionalStringMap = { [key in string]?: string }
  // 生成所有只读的字符串键属性
  type ReadonlyStringMap = { readonly [key in string]: string }
  

  虽然索引签名也能加这些修饰符，但映射类型还支持通过+/-动态修改（比如{ [key in string]?: string }等价于{ [key in string]+?: string }），灵活性更强。

总结 #

在你提供的简单场景中，两种写法的类型检查和运行时表现没有差异，但映射类型是功能更全面的类型构造工具，适合处理基于已有类型生成新类型、动态调整属性特性等复杂场景；而索引签名是更简洁的语法，专门用于声明任意键类型的对象结构。

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