添加新属性时，映射类型出现 ts(1170) 错误答案

【问题标题】：ts(1170) error with mapped type when a new property is added添加新属性时，映射类型出现 ts(1170) 错误
【发布时间】：2021-07-27 02:49:18
【问题描述】：

我有以下代码：

enum A {
    FOO = 0,
    BAR = 1,
    BAZ = 2
}
type B = {
    [key in A]: number
}
declare let b: B;

它工作正常。我可以使用b[A.FOO]，但不能使用b[123]。不过，我也希望能够使用b.length，但是当我添加属性以键入B 时，就像这样......

type B = {
    length: number,
    [key in A]: number
}

...我收到以下错误

类型文字中的计算属性名称必须引用其类型为文字类型或“唯一符号”类型的表达式。ts(1170) 计算属性名称必须是“字符串”、“数字”、“符号”或“任意”类型。ts(2464)

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

您发现{[K in XXX]: YYY} 形式的mapped type 不允许附加属性。幸运的是，您可以使用intersection type 获得相同的效果；两种对象类型的交集具有两者的所有属性：

type B = {
    [key in A]: number
} & { length: number };

在您的特定情况下，由于所有这些属性都是 number 类型，您还可以使用单个映射类型，其中键类型是 A 枚举值的 union 和 literal type @987654330 @：

type B = {
    [key in A | "length"]: number;
}

两个版本都可以按您的意愿工作：

let b: B = {
    [A.FOO]: 12,
    [A.BAR]: 34,
    [A.BAZ]: 56,
    length: 78
} // okay

【讨论】：