使用继承解析复杂的JSON对象

使用继承解析复杂的JSON对象,json,typescript,local-storage,Json,Typescript,Local Storage,我正在构建一个批处理过程,其中包括许多不同类型的步骤 export interface IStep { id: number; icon: string; name: string; selected: boolean; } export class InitStep implements IStep { id: number; icon: string; name: string; selected = false; } ex

我正在构建一个批处理过程,其中包括许多不同类型的步骤

export interface IStep {
    id: number;
    icon: string;
    name: string;
    selected: boolean;
}

export class InitStep implements IStep {
    id: number;
    icon: string;
    name: string;
    selected = false;
}

export class InputStep implements IStep {
    id: number;
    icon: string;
    name: string;
    selected = false;
    primaryKey: string;
    file: File;
}

export class QueryStep implements IStep {
    constructor () {
        this.filters = [];
        this.output_fields = [];
        this.table_fields = [];
        const filter = new Filter;
        this.filters.push(filter);
    }

    get input_ids(): number[] {
        return this.filters.map(filter => filter.input_id);
    }

    id: number;
    icon: string;
    name: string;
    selected = false;
    table: string;
    table_fields: string[];
    filters: Filter[];
    output_fields: string[];
}

export class OutputStep implements IStep {

    constructor() {
        this.fields = [];
    }

    id: number;
    icon: string;
    name: string;
    selected = false;
    fields: string[];
}

export class DeliveryStep implements IStep {

    constructor() {
        this.output_ids = [];
    }

    id: number;
    icon: string;
    name: string;
    selected = false;
    output_ids: number[];
    format: BatchOutputType;
    frequency: BatchFrequencyType;
    email: string;
    password: string;
}
我希望能够拥有这些步骤的任意组合/数量的数组,并且能够将它们保存到localstorage并从中读取

const key = 'notgunnawork';
localStorage.setItem(key, JSON.stringify(this.steps));
const s = JSON.parse(key) as IStep[];
我知道有一个滚雪球的机会,这将正确解析,显然解析器不知道哪些步骤最终属于什么类。我只是想知道是否有一种简单的方法可以让我的数组以与它相同的方式显示出来。我最终将把这个列表发布到服务器上,并希望我的.Net核心代码也能够解析这个JSON,而无需制作自定义解析器

编辑


添加了我试图序列化的完整类,以获取更多详细信息。无论何时尝试序列化然后反序列化,我都会遇到一个错误:“位置1处JSON中的意外标记o”

因此,我将回答我认为您的问题,如果我错了,请忽略我,我认为这将被否决,除非您提供更多详细信息。到目前为止你都试了些什么?我不明白为什么这不能像你想要的那样工作!你的代码应该一切都很好,我想从字里行间读懂。。。序列化/反序列化项不再是类的实例,这是您的问题吗?如果是这样的话,也许类并没有给你带来太多的好处,你可以用接口来代替。或者,您必须为JSON解析制作一个自定义恢复程序,以便反序列化到类实例中。但是我想我们需要更多的信息才能帮助您。@jcalz谢谢您的评论,如果这增加了任何细节,我已经添加了实际的类,并且在我尝试序列化然后反序列化JSON时就收到了错误。您正在解析localstorage键而不是-value吗?在您担心反序列化到类实例之前,需要先解决这个问题。天哪,是的,就是这个!非常感谢你!嘿@jcalz,谢谢你的详细回答。我正在处理一个与ikenhead类似的问题,但我还必须处理实际的继承问题。现在我有一个主类事件,我从中派生子类。我该如何着手归档您描述的相同行为?不确定。。。您可能需要发布一个新问题,并说明您尝试了什么(以及为什么这里的代码不适用于它)。我看不出会有什么问题,除了您可能应该确保超类的
className
属性仍然是
string
类型,并且没有缩小到字符串文本?