我是TS的新手,我有一个关于初始化类的问题 以下是解析对象的示例

const myObj = {
    "square": 100,
    "trees": [
        {
            "height": 100,
            "needles": 100500
        },
        {
            "height": 50,
            "apples": 20
        }
    ]
};


class Forest {
    constructor(
        public square: number,
        public trees: (Pine | AppleTree)[]
    ) {}
}

class Tree {
    constructor(
        public height: number,
    ) {}
}

class Pine extends Tree {
    constructor(
        public height: number,
        public needles: number,
    ) {
        super(height);
    }
}

class AppleTree extends Tree {
    constructor(
        public height: number,
        public apples: number,
    ) {
        super(height);
    }

    public getApples() {
        console.log(this.apples);
    }
}


export function initMyClass() {
    const forest: Forest = myObj;
}

但是这里有一个编译错误--myObject类型不能分配给类型‘森林’.我如何才能将对象解析到该类? 以及如何确定应该使用Tree的哪个子类来解析数组中的特定对象

我try 了界面,但可能不是正确的方式

推荐答案

我用lib https://www.npmjs.com/package/class-transformer解决了我的问题 代码如下:

enum TreeTypes {
    PINE = "pine",
    APPLETREE = "appleTree",
}

abstract class Tree {
    @Expose() public height: number;
    @Expose() public type: string;
}

class Pine extends Tree {
    @Expose() public height: number;
    @Expose() public needles: number;
}

class AppleTree extends Tree {
    @Expose() public height: number;
    @Expose() public apples: number;
    
    public getApples() {
        console.log(this.apples);
    }
}

class Forest {
    @Expose() square: number;
    
    @Type(() => Tree, {
        keepDiscriminatorProperty: true,
        discriminator: {
            property: 'type',
                subTypes: [
                { value: AppleTree, name: TreeTypes.APPLETREE },
                { value: Pine, name: TreeTypes.PINE },
            ],
        },
    })
    @Expose()
    trees: (Pine | AppleTree)[];

    @Expose() 
    getSquare() {
        console.log(this.square);
    }
}



export function initMyClass() {
    const forest: Forest = plainToClass(Forest, myObj, { excludeExtraneousValues: true, enableCircularCheck: true, exposeDefaultValues: true });
    console.log(forest);
    
}

Javascript相关问答推荐

禁用从vue.js 2中的循环创建的表的最后td的按钮

JS生成具有给定数字和幻灯片计数的数组子集

有条件的悲剧

我应该在redux reducer中调用其他reducer函数吗?

调用removeEvents不起作用

通过嵌套模型对象进行Mongoose搜索

JQuery. show()工作,但. hide()不工作

浮动Div的淡出模糊效果

将自定义排序应用于角形数字数组

MathJax可以导入本地HTML文档使用的JS文件吗?

并不是所有的iframe都被更换

我正在建立一个基于文本的游戏在react ,我是从JS转换.我怎样才能使变量变呢?

在Matter.js中添加从点A到另一个约束的约束

在不删除代码的情况下禁用Java弹出功能WordPress

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

将基元传递给THEN处理程序

在SuperBase JS客户端中寻址JSON数据

固定动态、self 调整的优先级队列

JavaScript:多个图像错误处理程序

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板?