Question

我想使用plot.ly在Angular应用程序中创建散点图。

所有在线示例都使用非类型对象，如下所示：

var trace = {
    x: [1, 2, 3],
    y: [4, 5, 6],
    . . .
}

我可以这样做，但由于我使用TypeScript，我想使用@types/plotly.js中定义的类型。其中一个是ScatterData，其定义如下（为简洁起见，我删除了大部分字段）：

export type Data = Partial<ScatterData>;

export interface ScatterData {
    type: 'bar' | 'scatter' | 'scattergl' | 'scatter3d';
    x: Datum[] | Datum[][];
    y: Datum[] | Datum[][];
    z: Datum[] | Datum[][] | Datum[][][];
    xaxis: string;
    yaxis: string;
    ...
}

我试图做的事情失败了：

const data: Plotly.Data = {
    type: 'scatter',
    x: [],
    y: [],
};

data.x.push(12);

我在推送电话TS2349: Cannot invoke an expression whose type lacks a call signature时收到错误。试图放置在后卫

if(data.x instanceof Ploty.Datum[]) ...

失败，因为它表示属性Datum不存在。

我可以通过不指定Plotly.Data来使一切正常，但它确实是我想诉诸的。

Answer 1

编译错误有点奇怪，但我认为问题是data.x属性被输入Datum[] | Datum[][]，这意味着它有两个不同的呼叫签名： push(Datum)和push(Datum[])。如果没有断言或类型保护，编译器无法验证push(12)是否正确。如果你添加一个断言它应该工作：

(data.x as Plotly.Datum[]).push(12);

还有其他要指出的事项，即使您没有将data注释为Plotly.Data，如果您将data分配给键入Plotly.Data的内容，那么类型-checker将确保它是正确的。唯一的缺点是，在构建data对象时不会得到IDE类型的建议，但如果构建错误，则会出现编译错误。

Plot.ly，TypeScript和ScatterData

1 个答案: