如何定义对象数组?


196

我在TypeScript中创建对象数组:

 userTestStatus xxxx = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
 };

有人可以告诉我如何正确声明其类型吗?是否可以内联,或者我需要两个定义?

我正在尝试用xxx类型声明代替,以便稍后在TypeScript上使用userTestStatus[3].nammme错误的提示来提醒我。

Answers:


278

最好使用本机数组而不是具有类似数字的属性的对象文字,这样,编号(以及许多其他数组函数)就可以立即使用。

您在这里寻找的是数组的内联接口定义,该接口定义了该数组中的每个元素(无论是最初出现的还是稍后引入的):

let userTestStatus: { id: number, name: string }[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

如果您要立即使用值初始化数组,则不需要显式类型定义。TypeScript可以从初始分配中自动推断出大多数元素类型:

let userTestStatus = [
    { "id": 0, "name": "Available" },
    ...
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

4
您也可以这样声明一个对象数组:let someArray: Array<{ id: number, name: string }> = []
Alexander Kim

74

上面是对象,而不是数组。

要使数组使用[]包围对象。

userTestStatus = [
  { "id": 0, "name": "Available" },
  { "id": 1, "name": "Ready" },
  { "id": 2, "name": "Started" }
];

除此之外,TypeScript是JavaScript的超集,因此有效的JavaScript都是有效的TypeScript,因此不需要其他更改。

来自OP的反馈说明...需要定义发布的模型

您可以使用此处定义的类型来表示您的对象模型:

type MyType = {
    id: number;
    name: string;
}

type MyGroupType = {
    [key:string]: MyType;
}

var obj: MyGroupType = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
};
// or if you make it an array
var arr: MyType[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

抱歉,我的问题不清楚。我想做的是找到userTestStatus的定义。

1
@Marilou通常,只需将鼠标悬停userTestStatus在您喜欢的IDE中的变量上即可获取定义... TypeScript游乐场显示{ id: number, name: string; }[]。如果愿意interface NameThis { id: number, name: string; },可以将其包装在接口中并NameThis[]作为数组类型。
芬顿

我试过了,但它给了我一些错误。但是我认为这是我想要的东西:userTestStatus:{id:数字,name:字符串; } [] = {“ 0”:{“ id”:0,“名称”:“可用”},“ 1”:{“ id”:1,“名称”:“就绪”},

在您定义的示例中var arr: MyType,您不会使用属性名称/索引声明,例如"0": { … }; 您此时只需要使用对象文字即可。
gfullam '16

@gfullam你是正确的,我更新了我的答案(这是一个粗心的快速编辑)
Brocco

34

一些tslint规则禁止使用[],例如消息:Array type using 'T[]' is forbidden for non-simple types. Use 'Array<T>' instead.

然后,您可以将其编写为:

var userTestStatus: Array<{ id: number, name: string }> = Array(
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
);

2
有史以来最实用的方法。它是简单数组使用案例的简单直接解决方案。以我的+1
Julio Vedovatto

16

您真正想要的可能只是一个枚举

如果您正在寻找某种类似于枚举的行为(因为我看到您正在定义一个对象并附加一个顺序ID 0、1、2,并且包含一个您不想拼写错误的名称字段(例如,name vs naaame) ,最好定义一个枚举,因为顺序ID会自动处理,并为您提供类型验证。

enum TestStatus {
    Available,     // 0
    Ready,         // 1
    Started,       // 2
}

class Test {
    status: TestStatus
}

var test = new Test();
test.status = TestStatus.Available; // type and spelling is checked for you,
                                    // and the sequence ID is automatic

上面的值将被自动映射,例如,“ Available”为“ 0”,您可以使用访问它们TestStatus.Available。当您传递这些文字时,Typescript将强制使用该文字。

如果您坚持将新类型定义为自定义类型的数组

您需要一个对象数组(不完全是具有键“ 0”,“ 1”和“ 2”的对象),因此让我们先定义对象的类型,然后再定义包含数组的类型。

class TestStatus {
    id: number
    name: string

    constructor(id, name){
        this.id = id;
        this.name = name;
    }
}

type Statuses = Array<TestStatus>;

var statuses: Statuses = [
    new TestStatus(0, "Available"),
    new TestStatus(1, "Ready"),
    new TestStatus(2, "Started")
]

抱歉,我的问题不清楚。我想做的是找到userTestStatus的定义,以便Typescript可以让我检查它的使用位置,例如,我无法输入userTestStatus [1] .naaaame。

我想在“ userTestStatus”和“ =“之间插入一些内容。以与我可能在其中输入字符串或数字的方式相同,以说明变量具有的类型。像Brocco一样,但如果可能的话,只用一行。

-1

您也可以尝试

    interface IData{
        id: number;
        name:string;
    }

    let userTestStatus:Record<string,IData> = {
        "0": { "id": 0, "name": "Available" },
        "1": { "id": 1, "name": "Ready" },
        "2": { "id": 2, "name": "Started" }
    };

要检查记录的工作方式:https : //www.typescriptlang.org/docs/handbook/utility-types.html#recordkt

在我们的案例中,Record用于声明一个对象,该对象的键将是一个字符串,其值将是IData类型,因此当我们尝试访问其属性时,它将为我们提供智能感知,并且在我们尝试访问时将抛出类型错误类似于userTestStatus [0] .nameee


你应该给,为什么这解决手头的问题的详细信息
山茱萸RAIU
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.