打字稿错误：数字[]中缺少属性“0”

Question

我的课程：

class Point{
  coordinates: [number, number, number];
    constructor(coordinates: [string, string, string]) {
    this.coordinates = coordinates.map((coordinate) => {
      return Math.round(parseFloat(coordinate) *100)/100;
    })
  }
}

我得到的错误：

`Property '0' is missing in number[]`

demo

有什么问题？

Answer 1

coordinates是一种元组类型。在Typescript中，元组继承自数组，而元组上可用的方法实际上来自Array<T>。虽然这很有用，但这些方法在调用时会返回数组nto元组。所以，即使你在一个包含3个元素的元组上调用map，你会发现结果tu是一个包含3个元素的元组，它实际上就是一个数组。

最简单的解决方案是使用类型断言告诉编译器结果将是一个包含3个数字的元组：

this.coordinates = coordinates.map((coordinate) => {
    return Math.round(parseFloat(coordinate) * 100) / 100;
}) as [number, number, number];  

修改

或者，您可以扩展Array全局接口以正确键入map操作的结果：

interface Array<T> {
    // up to 3 tuple items, you can add more
    map<U>(this: [T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U];
    map<U>(this: [T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U];
    map<U>(this: [T, T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U, U];
}

class Point {
    coordinates: [number, number, number];
    constructor(coordinates: [string, string, string]) {
        // Will now work as expected
        this.coordinates = coordinates.map((coordinate) => {
            return Math.round(parseFloat(coordinate) * 100) / 100;
        });
    }
}

这个GitHub issue对这个话题进行了有趣的讨论。