TypeScript接口中数组的默认值|极客教程

TypeScript接口中数组的默认值

在TypeScript中，我们经常会使用接口来描述对象的结构。接口使得代码更具可读性和更易于维护。但是，在某些情况下，我们可能想要在接口中定义一个数组，并给数组一个默认值。本文将详细讨论如何在TypeScript接口中给数组设置默认值。

1. 基本数组默认值

首先，让我们看一个简单的示例，演示如何在TypeScript接口中给数组指定一个默认值：

interface Person {
  name: string;
  hobbies: string[];
}

const person1: Person = {
  name: 'Alice',
  hobbies: ['reading', 'traveling']
};

console.log(person1);

在上面的代码中，我们定义了一个名为Person的接口，其中包含一个名为name的字符串属性和一个名为hobbies的字符串数组属性。接着，我们创建了一个名为person1的对象，该对象符合Person接口的定义，并指定了默认的hobbies值为['reading', 'traveling']。

当我们运行上面的代码时，将输出以下结果：

{ name: 'Alice', hobbies: [ 'reading', 'traveling' ] }

2. 数组默认值的情况

接下来，让我们看一下如何为数组的每个元素设置默认值。例如，如果我们希望将hobbies数组的每个元素都设置为'unknown'，我们可以这样做：

interface Person {
  name: string;
  hobbies: string[];
}

const person2: Person = {
  name: 'Bob',
  hobbies: Array(3).fill('unknown') // hobbies默认值设为['unknown', 'unknown', 'unknown']
};

console.log(person2);

在上面的代码中，我们使用Array(3).fill('unknown')来创建一个长度为3的数组，并将每个元素填充为'unknown'，然后将该数组作为hobbies的默认值。

当我们运行上面的代码时，将输出以下结果：

{ name: 'Bob', hobbies: [ 'unknown', 'unknown', 'unknown' ] }

3. 使用泛型扩展数组默认值

有时，我们可能希望在接口中定义一个通用的数组结构，并且希望能够扩展数组的默认值。为了实现这一点，我们可以使用泛型来定义接口。下面是一个示例代码：

interface GenericPerson<T> {
  name: string;
  hobbies: T[];
}

const person3: GenericPerson<string> = {
  name: 'Charlie',
  hobbies: ['coding', 'gaming']
};

console.log(person3);

在上面的代码中，我们定义了一个泛型接口GenericPerson<T>，其中T是数组元素的类型。然后，我们创建了一个person3对象，该对象符合GenericPerson<string>接口的定义，hobbies的默认值为['coding', 'gaming']。

当我们运行上面的代码时，将输出以下结果：

{ name: 'Charlie', hobbies: [ 'coding', 'gaming' ] }

4. 结论

在TypeScript中，我们可以使用接口来描述对象的结构，并且可以为数组设置默认值。通过本文的示例代码，你可以了解如何在接口中定义数组并设置默认值，以及如何使用泛型来扩展数组的默认值。

TypeScript接口中数组的默认值