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

Question

我正在研究为 Plotly.js 创建 Typescript 定义文件。我查看了 DefinitelyTyped 存储库中的许多示例定义文件。想到的一个问题是数据对象的接口(interface)。 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' 
    }
];

轨迹类型，例如“散点图”和“条形图”，可以具有不同的属性。例如，“饼图”跟踪类型具有“方向”属性。

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

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

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
}

这不是有效的 typescript 。需要一个类型，而不是字符串“bar”或“scatter”。

是否有人知 Prop 有类似结构的其他库具有 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 是“scatter”还是“bar”，就可以按如下方式转换变量。

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