如何在 TypeScript 中声明对象数组

在 TypeScript 中声明一个对象数组

How to declare an Array of Objects in TypeScript

要在 TypeScript 中声明一个对象数组，请将变量的类型设置为
{}[]，例如const arr: { name: string; age: number }[] = []。一旦设置了类型，数组就只能包含符合指定类型的对象，否则类型检查器会抛出错误。

索引.ts


// ✅ with inline type
const arr: { name: string; age: number }[] = [
  { name: 'Alice', age: 27 },
  { name: 'Bob', age: 28 },
  { name: 'Carl', age: 29 },
];

// ✅ with existing Type or Interface
interface Person {
  name: string;
  age: number;
}

const arr2: Person[] = [
  { name: 'Alice', age: 27 },
  { name: 'Bob', age: 28 },
  { name: 'Carl', age: 29 },
];

// ✅ array of objects with type, without values
const arr3: { name: string; age: number }[] = [];

在第一个示例中，我们使用内联声明将arr
变量类型设置为对象数组。每个对象都包含一个name字符串age属性和一个number.

在第二个示例中，我们使用接口来键入存储对象数组的变量。

第三个示例展示了如何初始化一个空数组，但仍将其类型设置为对象数组。

如果我们尝试将一个不符合指定类型的对象添加到数组中，我们会得到一个错误。

索引.ts


const arr: { name: string; age: number }[] = [
  { name: 'Alice', age: 27 },
  { name: 'Bob', age: 28 },
  { name: 'Carl', age: 29 },
];

// ⛔️ Argument of type '{ hello: string; }'
// is not assignable to parameter of
// type '{ name: string; age: number; }'.
arr.push({ hello: 'world' });

当您必须将变量初始化为空数组时，这尤其有用。如果您将一个变量初始化为空数组并且没有显式设置其类型，则假定为any[].

索引.ts


// 👇️ const arr3: any[]
const arr3 = [];

最好避免使用any，这样我们就可以利用类型检查器。

一旦我们将变量键入为特定类型的对象数组，如果我们尝试将不符合该类型的元素添加到数组中，我们会收到通知。

索引.ts


const arr3: { name: string; age: number }[] = [];

// ✅ Works
arr3.push({ name: 'Alice', age: 30 });

// ⛔️ Error: Argument of type '{ hello: string; }'
// is not assignable to parameter of type
// '{ name: string; age: number; }'
arr3.push({ hello: 'world' });

另一方面，如果你声明一个带有值的数组，你可以让 TypeScript 推断数组的类型。

索引.ts


// 👇️ const arr: {name: string; age: number;}[]
const arr = [
  { name: 'Alice', age: 27 },
  { name: 'Bob', age: 28 },
  { name: 'Carl', age: 29 },
];

即使我们没有显式键入arr变量，TypeScript 也已经知道它是一个对象数组，其中每个对象都有一个nametype属性string和一个agetype 属性number。

在声明对象数组的类型时，您可能事先不知道对象所有键的名称或值的类型。如果是这种情况，您可以使用索引签名。

索引.ts


interface Person {
  name: string;
  age: number;
  [key: string]: any; // 👈️ index signature
}

const arr2: Person[] = [
  { name: 'Alice', age: 27 },
  { name: 'Bob', age: 28, country: 'Chile' },
];

arr2.push({ name: 'Carl', age: 30, country: 'Canada' });

当我们事先不知道类型属性的所有名称及其值的形状时，将使用索引
签名。

示例中的索引签名意味着当一个对象被索引为 astring时，它将返回一个any类型的值。

{[key: string]: string}您可能还会在示例中看到索引签名。它代表一个键值结构，当用 a 索引时string返回一个 type 的值string。

示例中的Person接口指定该对象必须具有一个
name属性 astring和一个age属性 a number，但它可能具有任何其他属性 astring并且它们的值可能是any类型。

当您事先不知道对象中所有键的名称时，这种方法很有用。

尽可能明确总是更好。您应该始终添加您知道的键值对的名称和类型。

这使我们能够尽可能多地利用类型检查器，这就是使用 TypeScript 的全部意义所在。

–