TypeScript 中的对象数组

  2. 贴士文章
  3. TypeScript 贴士
  4. TypeScript 中的对象数组
Muhammad Maisam Abbas 2023年1月30日
TypeScript TypeScript Array TypeScript Object
  1. TypeScript 中对象数组的内联类型
  2. 在 TypeScript 中为对象数组使用属性 id
  3. 在 TypeScript 中使用接口定义对象数组
  4. 在 TypeScript 中使用接口结构打印数组中的所有对象
TypeScript 中的对象数组

在 TypeScript 中声明数组的一种方法是在一个变量中存储多个值的对象数组。定义的属性必须在每个对象中声明。

本教程将介绍使用内联类型和使用 TypeScript 中的接口定义的对象数组的概念。

TypeScript 中对象数组的内联类型

对象数组在大括号 {} 内定义。可以使用内联类型定义对象数组。

例子：

let detail: {name: string, gender: string, age: number}[] = [
{"name": "John", "gender": "male", "age": 20},
{"name": "Carter", "gender": "male", "age": 18},
{"name": "Kate", "gender": "female", "age": 19},
{"name": "Louis", "gender": "male", "age": 21},
];

console.log('Hi, I am ' + detail[0].name + '. I am a ' + detail[0].gender + ' and I am ' + detail[0].age + ' years old.');
console.log('Hi, I am ' + detail[2].name + '. I am a ' + detail[2].gender + ' and I am ' + detail[2].age + ' years old.');

输出：

Hi, I am John. I am a male and I am 20 years old.
Hi, I am Kate. I am a female and I am 19 years old.

detail[] 是内联类型 name、gender 和 age 的数组，分别用类型 string、string 和 number 定义。上面示例中的重要概念是数组 detail 没有定义类型。

在 TypeScript 中，数组也被认为是一种类似于字符串、数字等的数据类型。

在 TypeScript 中为对象数组使用属性 id

这个概念在处理项目时非常有用。每当我们创建一个对象数组时，最好传递 id 属性，因为它有利于唯一性和项目开发。

例子：

let detail: {id: number, name: string, gender: string, age: number}[] = [
{"id": 1, "name": "John", "gender": "male", "age": 20},
{"id": 2, "name": "Carter", "gender": "male", "age": 18},
{"id": 3, "name": "Kate", "gender": "female", "age": 19},
{"id": 4, "name": "Louis", "gender": "male", "age": 21},
];

console.log('ID = ' + detail[0].id + '. Hi, I am ' + detail[0].name + '. I am a ' + detail[0].gender + ' and I am ' + detail[0].age + ' years old.');
console.log('ID = ' + detail[2].id + '. Hi, I am ' + detail[2].name + '. I am a ' + detail[2].gender + ' and I am ' + detail[2].age + ' years old.');

输出：

ID = 1. Hi, I am John. I am a male and I am 20 years old.
ID = 3. Hi, I am Kate. I am a female and I am 19 years old.

在 TypeScript 中使用接口定义对象数组

接口是在 TypeScript 中定义对象数组的最简单且最常用的方法。接口是定义对象的广泛属性和方法的框架。

接口中定义的属性将在对象中调用。

例子：

interface Details {
id: number;
name: string;
gender: string;
age: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
age: 17
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The first entry of the array is', detail[0]);

输出：

The first entry of the array is { id: 0, name: 'John', gender: 'male', age: 17 }

假设用户忘记在对象 test1 中定义 age 属性。将引发一个错误，指示 "a property age is missing but is required in the type Details"。

为了克服这个问题，用户可以在界面 Details 中使用语法 age?: number 使属性成为可选，如下面的片段。

例子：

interface Details {
id: number;
name: string;
gender: string;
age?: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The first entry of the array is', detail[0]);
console.log('The second entry of the array is', detail[1]);

输出：

The first entry of the array is { id: 0, name: 'John', gender: 'male' }
The second entry of the array is { id: 1, name: 'Kate', gender: 'female', age: 19 }

为第二个条目给出了输出语句 age，但没有为第一个条目给出，并且没有引发错误。这是因为属性 age 在界面 Details 中是可选的。

在 TypeScript 中使用接口结构打印数组中的所有对象

让我们再举一个例子，下面将调用整个数组来打印数组中的所有对象。

例子：

interface Details {
id: number;
name: string;
gender: string;
age: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
age: 17
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The array is', detail);

输出：

The array is,  [{
"id": 0,
"name": "John",
"gender": "male",
"age": 17
}, {
"id": 1,
"name": "Kate",
"gender": "female",
"age": 19
}, {
"id": 2,
"name": "Chips",
"gender": "male",
"age": 22
}]
作者： Muhammad Maisam Abbas
Muhammad Maisam Abbas avatar Muhammad Maisam Abbas avatar

Maisam is a highly skilled and motivated Data Scientist. He has over 4 years of experience with Python programming language. He loves solving complex problems and sharing his results on the internet.

LinkedIn

相关文章 - TypeScript Array

相关文章 - TypeScript Object