Typescript将json反序列化为多种类型的集合

Z时代
2024-01-10
分类：问答

我正在为项目使用Typescript，需要将集合序列化为json，将其保存到文件中，然后将该文件反序列化为类似的集合。该集合看起来像：

elements: Array<tool>

我的工具界面如下所示：

export interface tool {
    name: string;
    draw(context:any);
}

工具实现如下所示：

export class textTool implements tool {
    name: string;
    fontSize:number;
    fontType:string;
    draw(context:any){
        // draws the control...
    }
}

我有一些工具界面的实现：textTool，imageTool和rectangleTool。我需要解决的问题是，当我将文件内容反序列化为工具集合时，我只会得到一个常规对象，而不是例如textTool的实例。

我JSON.stringify(elements)用来创建一个json并JSON.parse(jsonText)反序列化。

我知道解析器无法知道应该创建哪种类型的实例，因为json文本没有相关信息。我想添加一个字段或一些东西来标识我需要哪个类实例，然后手动“新建”该类。我不需要手动将json解析为工具集合（具有正确类型）的任何选项？

回答：

如您所说，您可以添加一个字段type，在类型字符串到实现类之间创建一个映射，然后转换代码将非常简单：

export interface tool {
    type: string;
    name: string;
    draw(context:any): void;
}
class textTool implements tool {
    type:string = 'textTool';
    name:string;
    fontSize:number;
    fontType:string;
    draw(context:any):void {
    }
}
const typeMapping:any = {
    'textTool' : textTool
    //all other types
};
let json = '[{"type":"textTool", "name": "someName", "fontSize": 11}]';
let elements: Array<tool> = JSON.parse(json).map((i:any) => {
    let target:any = new typeMapping[i.type];
    for (const key in i) {
        target[key] = i[key];
    }
    return target;
});