TypeScript 中的对象数组
- TypeScript 中对象数组的内联类型
-
在 TypeScript 中为对象数组使用属性
id
- 在 TypeScript 中使用接口定义对象数组
- 在 TypeScript 中使用接口结构打印数组中的所有对象
![TypeScript 中的对象数组](/img/TypeScript/feature-image---array-of-objects-in-typescript.webp)
在 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
}]
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 中对对象数组进行排序
- 在 TypeScript 中初始化包含数组的 Map
- 检查 TypeScript 数组中是否存在字符串
- 在 TypeScript 中过滤数组
- 在 TypeScript 中排序数组