0

对于可能很无聊的问题，我很抱歉，但我正在学习打字稿并且遇到了我无法克服的情况。

我使用组件接受传递类型数据的胜利DomainPropType图表。所以我下载并安装了@types/victory来使用这种类型。

从那以后，可以将数据传递给组件。

但 ...

// unimportant code was striped out

import { DomainPropType } from 'victory';

class Charts extends Component<Props, State> {
    private entireDomain: DomainPropType;

    public constructor(props: Props) {
        super(props);

        this.entireDomain = this.getEntireDomain();
        console.log(this.entireDomain);    // <= got {x:[82800000, 1206000000] ,y: [0, 1]}
        console.log(this.entireDomain.x);  // <= got 'Property 'x' does not exist on type 'DomainPropType'.
    }


    public getEntireDomain(): DomainPropType {
        const xValues = this.entireDataSet.map((item: DataSetItem) => item.x);
        const yValues = this.entireDataSet.map((item: DataSetItem) => item.y);

        return {
            x: [xValues[0].valueOf(), xValues[xValues.length - 1].valueOf()],
            y: [Math.min(...yValues), Math.max(...yValues)]
        };
    }
}

在第一个 console.log 中可以清楚地看到它entireDomain是带有 key 的对象x。那么为什么在第二个 console.log 中 typeScript 会抛出以下错误呢？

Property 'x' does not exist on type 'DomainPropType'.
Property 'x' does not exist on type '[number, number]'.

好的，它也说[number, number]。然而，这就是类型的样子：

在此处输入图像描述

如果我理解正确... DomainPropType 也可以是 type { x?: DomainTuple; y: DomainTuple; }。那为什么 typeScript 选择了错误的验证呢？请有人向我解释。

4

2 回答 2

3

当您将类型添加到函数参数/构造函数时，打字稿假定代码中的其他位置，有人可能会使用这些参数调用该函数/构造函数。

因此，即使您只使用您的类一次，并且在这种特定情况下您传递了一个带有xandy属性的对象，您仍然有可能稍后也使用该类并使用[number, number]or[Date, Date]格式。

为避免这种情况，您有 2 个选择：

  1. 不要DomainPropType用作参数类型，而只使用您实际想要使用的特定类型。
  2. 在您的构造函数中，正确处理[number, number]and[Date, Date]情况。

如果您从不打算使用[Date, Date]or调用此对象[number, number]，则选择选项 1 可能是最简单的。

我认为适用于您的情况的更具体类型的示例：

type MyDomainPropType = {
   x: DomainTuple,
   y?: DomainTuple
}
于 2020-04-30T20:00:19.943 回答
0

你可以像这样投射你的数组：

return {
            x: [xValues[0].valueOf(), xValues[xValues.length - 1].valueOf()],
            y: [Math.min(...yValues), Math.max(...yValues)]
        } as DomainPropType;

也许您的错误与您可以在屏幕截图中看到的可为空的 x 或 y 相关联。

于 2020-04-30T19:51:00.190 回答