打字稿选择错误的类型

Question

很抱歉我可能遇到沉闷的问题，但是我正在学习打字稿，遇到无法克服的情况。

我使用Victory图表，其中组件接受以传递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是键为x的对象。那么，为什么在第二个console.log typeScript中引发以下错误？

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

还可以说[number, number]。但是，类型如下所示：

如果我正确理解... DomainPropType也可以是{ x?: DomainTuple; y: DomainTuple; }类型。那么，为什么TypeScript选择了错误的密码进行验证？请有人向我解释。

Answer 1

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

因此，即使您只使用一次类，并且在这种特定情况下，您传递的对象具有x和y属性，以后仍然可能会使用该类并使用[number, number]或[Date, Date]格式。

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

1. 请勿使用DomainPropType作为参数类型，而应仅使用您实际要使用的特定类型。
2. 在构造函数中，正确处理[number, number]和[Date, Date]情况。

如果您从未打算使用[Date, Date]或[number, number]来调用该对象，那么选择选项1可能是最简单的。

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

type MyDomainPropType = {
   x: DomainTuple,
   y?: DomainTuple
}

Answer 2

您可以像这样转换数组：

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

也许您的错误与您可以在屏幕快照中看到的可为空的x或y有关。