来自枚举成员

时间:2019-04-18 14:38:20

标签: typescript enums interface

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

由于某种原因,解决方案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中运行

1 个答案:

答案 0 :(得分:0)

在一些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
};

因此,如果您不知道,那么您是否会从后端收到propertyApropertyB(这是我最初的问题),并且您想使用计算机那么,您可能需要将key设置为可选,或者将其设置为别名类型(或枚举)(例如type myType = 'propertyA' | 'propertyB'),然后将其用作您的属性的键界面,如:

interface MyInterface { 
    myType: number 
}