来自枚举成员的计算密钥（作为接口密钥）

Question

我试图通过枚举使用计算键选择对象的键来设置对象属性，如下面的代码片段所示。

由于某种原因，解决方案1和2不起作用。 这些是我想在我的代码中使用的解决方案，因为我需要为从API调用动态获取的键分配一个值。

我无知的是，解决方案4和5正在工作，这表明实际上解决方案1和2也可以“潜在地”工作，方法是在硬编码的属性密钥之后用动态密钥重新分配属性值。

这当然是因为TypeScript只要您提供匹配的接口属性，就可以接受任意数量的其他属性，但是，我仍然不明白为什么重复的动态属性可以在4和5中工作。

也就是说，为什么解决方案1和2无法正常工作？ 我究竟做错了什么？

谢谢你的帮助。

interface Cat {
    tail: boolean;
    legs: Quadruped;
}

interface Quadruped {
    totalNumber: number;
}

enum BodyParts {
    TAIL = 'tail',
    TOTAL_NUMBER = 'totalNumber'
}

let brokenArgo: Cat = { tail: true, legs: { totalNumber: 4 } };
let argo: Cat = { tail: true, legs: { totalNumber: 4 } };

argo.legs = null;

let TN = 'TOTAL_NUMBER';
let tn: BodyParts = BodyParts[TN];

// solution 1 = broken
brokenArgo.legs = { [tn]: 6 }
// solution 2 = broken
brokenArgo.legs = { [BodyParts[TN]]: 6 };
// solution 3 = working
argo.legs = { [BodyParts['TOTAL_NUMBER']]: 6 };
// solution 4 = working
argo.legs = {
    totalNumber: 0,
    [tn]: 6
};
// solution 5 = working
argo.legs = {
    totalNumber: 0,
    [BodyParts[TN]]: 6
};

您可以在此处在Typescript游乐场中看到上面运行的脚本

Answer 1

在一些TypeScript非官方文档之后，我意识到，由于声明的接口需要特定的属性（即，该接口不是可选的），因此我需要让TypeScript知道我实际上是将计算键“用作”期望的属性。 IE浏览器，我确信（我希望）可以从后端获取该属性。

上面的代码（非常糟糕的示例，很抱歉）可以这样修复：

（ 在此处查看实时代码 ）

interface Cat {
    tail: boolean;
    legs: Quadruped;
}

interface Quadruped {
    totalNumber: number;
}

enum BodyParts {
    TAIL = 'tail',
    TOTAL_NUMBER = 'totalNumber'
}

let brokenArgo: Cat = { tail: true, legs: { totalNumber: 4 } };
let argo: Cat = { tail: true, legs: { totalNumber: 4 } };

argo.legs = null;

let TN = 'TOTAL_NUMBER';
let tn: BodyParts.TOTAL_NUMBER = BodyParts[TN];

// solution 1 = broken
brokenArgo.legs = { [tn]: 6 }
// solution 2 = broken
brokenArgo.legs = { [BodyParts[TN as 'TOTAL_NUMBER']]: 6 };
// solution 3 = working
argo.legs = { [BodyParts['TOTAL_NUMBER']]: 6 };
// solution 4 = working
argo.legs = {
    // totalNumber: 0, // No more needed
    [tn]: 6
};
// solution 5 = working
argo.legs = {
    totalNumber: 0,
    [BodyParts[TN]]: 6
};

因此，如果您事先不知道是否会从后端收到propertyA或propertyB （这是我最初的问题），然后又想使用计算密钥，则可能需要或设置密钥接口声明为可选，或将其设置为别名类型（或枚举），如type myType = 'propertyA' | 'propertyB' type myType = 'propertyA' | 'propertyB' ，然后将其用作界面中属性的键，例如：

interface MyInterface { 
    myType: number 
}