时间戳

首页 > 解决方案 > 如何使用 Typescript 和 Angular 将 JSON 转换为复杂对象

angular - 如何使用 Typescript 和 Angular 将 JSON 转换为复杂对象

问题描述

我有一个 JavaScript 函数，可以在我的 Typescript 类中创建一个样式对象。我的项目使用的是 Angular 版本 5：

private createCircle(parameters: any): any {        
    return new Circle({
        radius: parameters.radius,
        snapToPixel: parameters.snapToPixel,
        fill: new Fill(parameters.fill),
        stroke: new Stroke(parameters.stroke)
    });
}

Circle，Fill并且Stroke是第三方库类。函数参数 ( parameters) 是一个 JSON 对象，如下所示：

    {
        "radius": 10,
        "snapToPixel": true,
        "fill": {
            "color": "rgba(255, 255, 0, 0.4)"
        },
        "stroke": {
            "color": "red",
            "width": 1,
            "lineDash": null,
            "lineCap": "round",
            "lineJoin": "round",
            "miterLimit": 10
        }
    }

我可以Circle直接将此 JSON 对象转换为一个类吗？( Circle,Fill并且Stroke应该使用new关键字创建)

标签： angulartypescript

解决方案

不，您还不能直接在 TypeScript 中执行此操作；对于您的特定用例，这是不可能的，因为如果没有适当的配置，任何编译器都无法在特定时刻理解您的特定意图。

不过，如果您希望魔法发生，有一些库可以提供帮助。例如，其中之一就是所谓的Type-aware-JSON。这允许您使用一组装饰器定义类，然后可以直接从 JSON 文件反序列化它们，然后使用相同的元数据序列化回来。在您的特定场景中，当类来自第 3 方时，我看到的唯一选择是扩展所有这些类并在每个属性上使用ta装饰器代理每个属性。

但是，无浪漫的工厂功能会更有效。编写一个遍历每个对象并使其对每个属性做出反应的递归函数；另一种解决方案是再次扩展每个类并让它们接受正常的 JSON 结构，同时仍然通过调用super().

推荐阅读