如何在打字稿中将 array.map 与元组一起使用？

每当我使用array.map对于元组，Typescript 将其推断为通用数组。例如，以下是简单 3x3 数独游戏的一些片段：

const _ = ' ' // a "Blank"

type Blank = typeof _

type Cell = number | Blank

type Three = [Cell, Cell, Cell]

type Board = [Three, Three, Three]

const initialBoard: Board = [
    [_, 1, 3],
    [3, _, 1],
    [1, _, _],
]

// Adds a `2` to the first cell on the first row
function applyMove(board: Board): Board {
    // ????errors here
    const newBoard: Board =  board.map((row: Three, index: number) => {
        if (index === 0) return <Three> [2, 1, 3]
        return <Three> row
    })
    return newBoard
}

function applyMoveToRow(row: Three): Three {
    // return [2, 1, 3] // This works
    const newRow: Three = [
        2,
        ...row.slice(1, 3)
    ]
    return newRow
}

TS 错误为：

Type '[Cell, Cell, Cell][]' is missing the following properties from type 
 '[[Cell, Cell, Cell], [Cell, Cell, Cell], [Cell, Cell, Cell]]': 0, 1, 2 .  

here http://www.typescriptlang.org/play/#code/MYewdgzgLgBA+jAvDA5KmB6DMCGMBEAQgDY5gDW+AsAFC1QCeADgKYwlnlIyOsgBm8WvWZsAwi2LFuYAK4BbAEYsATjAA+7UhWE1ebACoALFSzbIA2hKkAaGNeJ2HAXV372IHCoAm3C8dMWOwCzYJMzVzoaUEhYAEswOKg4nGJCTx8ALg8vX0taGEKYCzg7AEY7AGZnGwKii0q7UpgymrrCiwr4JraaSNosGABBb28IXBgAAwAmSZ4QHiM2fjiVaBhgSWlwReXV9ZUQAHdaflkwYGSdnCYmYgYAWRAANxYACkUM72z03IBKH5fGAAb3aG3A6zALCOvyyOR83Bgn1yADp5Dc3m9DkdsiEgjAEt4WAAPbJyJSqP5IAB8ILBRQJgjehJJSEQyAADFTTFBZCowDAADx42kWablKqRBkMnl8gXC8IsWnYsEAXz+YNl-JgUJhX1oqt0ZwuVwFNzujxeLAMIAASscscdcYqATA8XSaAzBlqBWKJTBqphsMY4uMjiAVOQIGCYpDofacW7FX56UVxanCiis9iURBiHFNm8upUNZ6ilKij6dfHjgagA这是在 TS Playground 里。

有什么方法可以告诉打字稿，当我映射一个元组时，它将返回一个同类的元组，而不仅仅是一个数组？我尝试非常明确地注释我的所有返回值等，但这并没有达到目的。

Typescript github 上有一个关于此的讨论：https://github.com/Microsoft/TypeScript/issues/11312 https://github.com/Microsoft/TypeScript/issues/11312

但我一直无法从中找到解决方案。

TypeScript 不会尝试在调用时保留元组长度map()。此功能是在微软/TypeScript#11312 https://github.com/Microsoft/TypeScript/issues/11312，实施于微软/TypeScript#11252 https://github.com/microsoft/TypeScript/pull/11252，并恢复到微软/TypeScript#16223 https://github.com/microsoft/TypeScript/pull/16223由于它对现实世界的代码造成的问题。看微软/TypeScript#29841 https://github.com/microsoft/TypeScript/issues/29841了解详情。

但如果你愿意，你可以合并到你自己的声明中 https://www.typescriptlang.org/docs/handbook/declaration-merging.html的签名Array.prototype.map()，以解释它保留元组长度的事实。这是一种方法：

interface Array<T> {
  map<U>(
    callbackfn: (value: T, index: number, array: T[]) => U,
    thisArg?: any
  ): { [K in keyof this]: U };
}

这使用多态性this https://www.typescriptlang.org/docs/handbook/advanced-types.html#polymorphic-this-types类型以及数组/元组映射类型 https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#mapped-types-on-tuples-and-arrays来表示变换。

那么你的代码可以写成如下：

function applyMove(board: Board): Board {
  return board.map(
    (row: Three, index: number) => (index === 0 ? applyMoveToRow(row) : row)
  );
}

function applyMoveToRow(row: Three): Three {
  return [2, row[1], row[2]];
}

并且不会有错误。请注意，我没有费心去处理Array.prototype.slice()。试图代表什么需要付出巨大的努力slice()对于元组类型，特别是因为没有真正的支持元组长度操作 https://github.com/microsoft/TypeScript/issues/26223...这意味着您可能需要一堆重载签名或其他类型的技巧来完成它。如果你只想使用slice()对于短数组，您也可以像我上面那样使用索引访问[2, row[1], row[2]]其中编译器does理解。

或者，如果您要将它用于较长的数组，但在代码中使用次数很少，您可能只想使用类型断言 https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions告诉编译器你知道你在做什么。就此而言，如果你只是做map()少数情况下，您也可以在此处使用类型断言，而不是上面的重新声明map()的签名：

function applyMove(board: Board): Board {
  return board.map(
    (row: Three, index: number) => (index === 0 ? applyMoveToRow(row) : row)
  ) as Board; // assert here instead of redeclaring `map()` method signature
}

不管怎样，类型断言的类型安全性较低，但更简单，而声明合并更安全，但更复杂。

希望有帮助；祝你好运！

链接到代码 http://www.typescriptlang.org/play/#code/MYewdgzgLgBA+jAvDARKg3DA9FmBDVAIQBs8wBrFAKCqgE8AHAUxhLPKRnuZADN50NbiwDCTYsU5gArgFsARkwBOMAD6tSFQbUYsAKgAslTFsgDaYiQBoYl4jbsBdbcNYg8SgCaczh40xs-E0CjE2caUEhYAEswaKhovGJCdy8ALjcPb3MzOBsARhsAZkcbMyKbPJh80pgzQvhKx3CqWKhlXjxgFgBBJSU8OgAePQA+GABvKhgYWTwGIYBVUYAKaZmYYCTieS7yXjAMlYA3JOkmDL0bWM8mAA8MmQVlGw8BukuzRwBKJHHFqzrGZQAzRCB9ADmAH4MmQ6OtvhkJnUANIwWIwchMOh8LigiCODKLGAAX0EJJovGkYGACXA+AYDGIdAAsiBjkwVvJUp4MiksojMl5JutjFBpEowDBuVkAHRzBhrDYwFZKEAAd0uoQC6LAtweMCeiiUv0Q4xWN3uSEQyAADDAoQymaz2Uw9CAAEoa1Ua34ZNXq74I8mU6m06L0+bOtkc91e9U+zUwIJMQUpkUzMUSqVmABMNgD9VqhdzzRDVCAA