在 TypeScript 中声明一个二维数组

作者

在 TypeScript 中声明一个二维数组

Declare a Two-dimensional Array in TypeScript

要声明一个二维数组，请将数组的类型设置为Type[][]，例如const arr: string[][] = [['one'], ['two']]。您可以将类型读取为包含特定类型数组的数组。尝试向数组添加任何其他类型会导致类型检查器出错。

索引.ts
// ✅ Two-dimensional array with inline declaration
const arr: string[][] = [['one'], ['two']];

// ✅ Empty two-dimensional array
const arr2: number[][] = [];

// ✅ Using a type
type Employee = {
  id: number;
  name: string;
};

const arr3: Employee[][] = [
  [{ id: 1, name: 'Alice' }],
  [{ id: 2, name: 'Bob' }],
];

第一个示例演示如何声明包含字符串数组的二维数组。

该类型看起来有点混乱，但string[]它是一个字符串数组，因此您可以将string[][]其视为包含字符串数组的数组。

如果您尝试将任何其他类型的值添加到数组中，则会出现错误。

索引.ts
const arr: string[][] = [['one'], ['two']];

// ⛔️ Error: Type 'number' is not assignable
// to type 'string'.ts(2322)
arr.push([100]);

当您必须将二维数组初始化为空时，这种方法非常有用。如果您没有显式键入空数组，TypeScript 会假定其类型为any[].

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

TypeScript 不知道我们将向数组添加什么类型的值，因此它使用非常广泛的any类型。

这意味着我们可以将anytype 的值添加到数组中，但我们不会从类型检查器那里得到任何帮助。

您应该始终显式设置空数组的类型。

索引.ts
const arr: string[][] = [
  ['hello', 'world'],
  ['one', 'two'],
];

arr.push(['a', 'b']);

// ⛔️ Error: Type 'boolean' is not
// assignable to type 'string'.ts(2322)
arr.push([true, false]);

另一方面，如果你用值初始化二维数组，你可以让 TypeScript 推断它的类型。

索引.ts
// 👇️ const arr: string[][]
const arr = [
  ['hello', 'world'],
  ['one', 'two'],
];

您还可以使用类型来定义二维数组。

索引.ts
type Nested = number[][];

const arr: Nested = [
  [1, 2, 3],
  [4, 5, 6],
];

如果你有一个对象，其属性是一个二维数组，你也可以使用一个接口。

索引.ts
interface Example {
  nested: number[][];
}

const arr: Example = {
  nested: [
    [1, 2, 3],
    [4, 5, 6],
  ],
};

在某些情况下，您可能知道二维数组将只有 N 个特定类型的嵌套数组。在这种情况下，您可以使用元组数组。

索引.ts
const arr: [[string, string], [string, string]] = [
  ['hello', 'world'],
  ['one', 'two'],
];

我们上面声明的arr变量是一个包含 2 个元组的数组，每个元组存储 2 个字符串。

如果需要声明readonly二维数组，请使用
Readonly
实用程序类型。

索引.ts
const arr: Readonly<string[][]> = [
  ['hello', 'world'],
  ['one', 'two'],
];

// ⛔️ Error: Property 'push' does not
// exist on type 'readonly string[][]'.ts(2339)
arr.push(['a', 'b']);

我们将string[][]类型传递给Readonly实用程序类型，因此数组只能读取，不能更改。

还有一种更具体的ReadonlyArray实用程序类型可以实现相同的结果。

索引.ts
const arr: ReadonlyArray<string[]> = [
  ['hello', 'world'],
  ['one', 'two'],
];

// ⛔️ Error: Property 'push' does not
// exist on type 'readonly string[][]'.ts(2339)
arr.push(['a', 'b']);

请注意，我们传递了而string[]不是
实用程序类型。string[][]ReadonlyArray

–

发表评论