为何TypeScript为该函数动态属性推断出字符串与数组联合类型？

先看这段TypeScript函数：

export const createLetterGroups = (dynamicKey: string) => {
  const letters = ['A', 'B', 'C'];

  return letters.map(letter => ({
    letter,
    [dynamicKey]: [{ test: 'string1' }, { test: 'string2' }]
  }));
};

TypeScript推断出该函数的返回类型为：

const createLetterGroups: (dynamicKey: string) => {
    [x: string]: string | {
        test: string;
    }[];
    letter: string;
}[]

疑问点：为何TypeScript将该动态属性的类型推断为string | { test: string }[]，而非仅推断为{ test: string }[]？

原因解析 #

核心原因是dynamicKey的类型是string，它完全有可能和对象里已有的letter属性名重名。

比如当你调用createLetterGroups('letter')时，返回的每个对象里，原本的letter字符串属性会被动态键对应的数组覆盖。这时候这个属性的值既可能是原本的字符串类型（当动态键不是letter时），也可能是数组类型（当动态键就是letter时）。

TypeScript做类型推断时会考虑到这种属性名冲突的极端情况，所以把索引签名的类型设为两种类型的联合，确保无论dynamicKey传什么字符串，返回的对象类型都能合法兼容。

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