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