Question

我正在研究为Plotly.js创建一个Typescript定义文件。我查看了DefinitelyTyped存储库中的一些示例定义文件。想到的一个问题是Data对象的接口。 Data对象是一个Traces数组，如plot-schema中所示。

考虑数据对象的这个例子。

data = [
    {
         type: 'scatter',  
         x: [1, 2, 3],     
         y: [3, 1, 6],     
         marker: {         
             color: 'rgb(16, 32, 77)' 
         }
    },
    {
         type: 'bar',      
         x: [1, 2, 3],     
         y: [3, 1, 6],     
         name: 'bar chart example' 
    }
];

跟踪类型（例如“scatter”和“bar”）可以具有不同的属性。例如，'pie'跟踪类型具有“方向”属性。

虽然我想为每种跟踪类型定义单独的接口，并且在更高级别的接口中考虑了常见属性，但我没有看到这样做的好方法。

我能想到的最直观的方法就是这样......

interface Trace {
    x: Array<any>;
    y: Array<any>;
}

interface BarTrace extends Trace {
   type: 'bar';
   // bar specific members
}

interface ScatterTrace extends Trace {
    type: 'scatter';
    // scatter specific members
}

这不是有效的打字稿。期望一种类型，而不是字符串'bar'或'scatter'。

是否有人知道具有类似结构的其他库具有打字稿定义，或者更好的方法来构造此JSON结构的打字稿定义文件？

Answer 1

我认为您最好的选择是按原样继续，但将type定义为字符串。如下所示：

interface Trace {
    type: string;
    x: Array; 
    y: Array; 
}

interface BarTrace extends Trace {
   // bar specific members
}

interface ScatterTrace extends Trace {
    // scatter specific members
}

let data: Array<Trace> = [
    {
         type: 'scatter',  
         x: [1, 2, 3],     
         y: [3, 1, 6],     
         marker: {         
             color: 'rgb(16, 32, 77)' 
         }
    },
    {
         type: 'bar',      
         x: [1, 2, 3],     
         y: [3, 1, 6],     
         name: 'bar chart example' 
    }
];

确定type是否＆＃34;分散＆＃34;或＆＃34; bar＆＃34;，您可以按如下方式转换变量。

data.forEach((item) => {
    if (item.type === 'scatter') {
        let trace: ScatterTrace = item;
        // ...
    } else {
        let trace: BarTrace = item;
        // ...
    }
});

具有字符串属性作为类型指示符的json对象的Typescript定义文件

1 个答案: