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 playground here中运行

Answer 1

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

以上内容（非常糟糕的示例，很抱歉）可以这样解决：

（请参阅live code here）

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（这是我最初的问题），并且您想使用计算机那么，您可能需要将key设置为可选，或者将其设置为别名类型（或枚举）（例如type myType = 'propertyA' | 'propertyB'），然后将其用作您的属性的键界面，如：

interface MyInterface { 
    myType: number 
}

来自枚举成员

1 个答案: