在 TypeScript 中为类型化变量声明一个空数组

作者

在 TypeScript 中为类型化变量声明一个空数组

Declare an Empty Array for a typed Variable in TypeScript

要为类型化变量声明一个空数组，请将数组的类型设置为
Type[]。

添加到数组中的任何元素都需要符合指定的类型，否则会引发错误。

索引.ts
type Animal = {
  name: string;
  age: number;
};

const arr: Animal[] = [];

const a1: Animal = { name: 'Alfred', age: 2 };

arr.push(a1);

// 👇️ [{name: 'Alfred', age: 2}]
console.log(arr);

我们声明了一个arr变量并将其设置为一个空的
对象数组
Animal[]。

相同的方法可用于声明一个空的基元数组。

索引.ts
const arr: string[] = [];
console.log(arr);

arr.push('bobby', 'hadz', 'com');

// 👇️ ['bobby', 'hadz', 'com']
console.log(arr);

该arr变量只能存储 type 的值string。

我们只能将指定类型的元素添加到数组中，否则会引发错误。

索引.ts
type Animal = {
  name: string;
  age: number;
};

const arr: Animal[] = [];

// ⛔️ Error: Argument of type {test: string} is not
// assignable to parameter of type 'Animal'
arr.push({ test: 'hello' });

我们试图推入数组的对象不符合类型Animal，因此 TypeScript 出错。

如果您忘记添加类型所需的属性，TypeScript 也会警告您。

索引.ts
type Animal = {
  name: string;
  age: number;
};

const arr: Animal[] = [];

// ⛔️ Error: Property of type 'age' is missing
// but required in type Animal
arr.push({ name: 'Alfred' });

any如果您不想显式键入数组，则可以使用该类型。

索引.ts
const arr: any[] = [];

arr.push('bobby');
arr.push(30);
arr.push({ country: 'Chile' });

// 👇️ [ 'bobby', 30, { country: 'Chile' } ]
console.log(arr);

该any类型有效地
关闭了类型检查，应该谨慎使用。

如果您需要在 TypeScript 中过滤对象数组，请查看以下
文章。

使用类型断言为类型化变量声明一个空数组

或者，您可以使用
类型断言
来声明一个空类型数组。

索引.ts
type Animal = {
  name: string;
  age: number;
};

const arr = [] as Animal[];

const a1: Animal = { name: 'Alfred', age: 2 };

arr.push(a1);

// 👇️ [{name: 'Alfred', age: 2}]
console.log(arr);

使用类型断言时，我们有效地告诉 TypeScript 我们知道得更多，并且变量arr肯定是 type Animal[]。

从数据库等远程源获取数据时经常使用类型断言，因为 TypeScript 可能不知道您使用 API 请求获取的数据类型。

当使用类型断言时，当我们试图将不符合类型的值压入数组时，我们也会得到一个错误。

索引.ts
type Animal = {
  name: string;
  age: number;
};

const arr = [] as Animal[];

// ⛔️ Error: Property of type 'age' is missing
// but required in type Animal
arr.push({ name: 'Alfred' });

// ⛔️ Error: Argument of type {test: string}
// is not assignable to parameter of type Animal
arr.push({ test: 'hello' });

第一次调用该push()方法会导致错误，因为age对象缺少该属性。

第二次调用导致错误，因为提供的对象不是 类型
Animal。

您选择哪种方法是个人喜好的问题。在这种情况下，我会选择第一种方法，因为实际上不需要类型断言。

我还写了一篇关于
如何从数组类型中获取数组元素类型的文章。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：