如何描述 typescript 中具有动态名称的类型？答案

【问题标题】：How do I describe the a type in typescript that has dynamic name?如何描述 typescript 中具有动态名称的类型？
【发布时间】：2016-04-07 05:03:45
【问题描述】：

我想描述一个具有以下行为的类型

export class myData {
    key          : string;
    display_name : string;  
}

但是，我想使用我提供的实际键和 display_name 为 key 和 display_name 设置动态名称

例如。以下将是有效的 myData 类型

mySample1:myData =
{ 
    myKey    : 'myKeyValue'
    myName   : 'myNameValue'
}

mySample1:myData =
{ 
    myKey2    : 'myKeyValue2'
    myName2   : 'myNameValue2'
}

这样做的动机是我有很多来自 API 的数据，这些数据返回一个对象列表，该列表具有相同数量的键和每个键的相同类型的值。但问题是每个数据都有不同的键名。

我想在 angular2 中创建一个Component，它只接受具有一定数量键的对象列表，并且每个键的值必须是特定类型。

例如，我不想让我的Component 占用

var test =
{ 
    myKey2    : 1
    myName2   : 'myNameValue2'
}

或

var test2 =
{ 
    myKey2    : 'myNameValue1'
    myName2   : 'myNameValue2'
    mySomeOtherKey : 'myNameValue10'
}

这在打字稿中可能吗？如果可能的话，这在打字稿中是个好主意吗？

【问题讨论】：

标签： javascript typescript angular

【解决方案1】：

例如。以下将是有效的 myData 类型

TypeScript 是结构化的。由于您希望这两个都是有效：

mySample1:myData =
{ 
    myKey    : 'myKeyValue'
    myName   : 'myNameValue'
}

mySample1:myData =
{ 
    myKey2    : 'myKeyValue2'
    myName2   : 'myNameValue2'
}

您可以轻松地将myData 声明为这两种类型的联合：

type MyData = {
    myKey: string;
    myName: string;
}
    | {
        myKey2: string;
        myName2: string;
    }

let mySample1: MyData =
    {
        myKey: 'myKeyValue',
        myName: 'myNameValue'
    }

mySample1 =
    {
        myKey2: 'myKeyValue2',
        myName2: 'myNameValue2'
    }

【讨论】：