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

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”，可以具有不同的属性。例如，“饼图”跟踪类型具有“方向”属性。

虽然我想为每种跟踪类型定义单独的接口，并将公共属性分解为更高级别的接口，但我没有看到这样做的好方法。

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

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'。

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

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 是“散点”还是“条形”，您可以按如下方式转换变量。

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