代码之家  ›  专栏  ›  技术社区  ›  barteloma

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

  •  1
  • barteloma  · 技术社区  · 6 年前

    我有一个JavaScript函数,它在我的Typescript类中创建一个样式对象。我的项目使用的是角度版本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
            }
        }
    

    我能把这个JSON对象转换成 圆圈 直接上课?( 圆圈 , 填充 (打、击等的)一下 应该使用 new 关键字)

    2 回复  |  直到 6 年前
        1
  •  1
  •   smnbbrv    6 年前

    不,您还不能直接在TypeScript中这样做;对于您的特定用例,这是不可能的,因为没有正确的配置,任何编译器都无法理解您在特定时刻的特定意图。

    不过,如果你想让魔法发生,有些库可以提供帮助。其中一个是所谓的 Type-aware-JSON . 这允许您使用一组装饰器定义类,然后可以从JSON文件中对它们进行反序列化,然后使用相同的元数据进行反序列化。在您的特定场景中,当类来自第三方时,我看到的唯一选项是扩展所有类并用 ta 每家酒店的装修师。

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

        2
  •  0
  •   Mattijs    6 年前

    我不清楚JSON是从哪里获得的,但我假设是从一个服务调用获得的? 如果是这样,您很可能已经从服务返回了JSON。如果不是(xml?),您必须转换它。

    所以当你打电话给 createCircle 函数并传入 parameters 有效载荷,只要你所指的所有关键点(半径、填充、笔划、snapToPixel)都可用,它就会创建你的圆。

    你提到了casting,所以我假设参数是JSON字符串?如果它来自一个服务,那么它应该只是一个具有相同形状的javascript对象(Dictionary)。 如果出于某种原因得到一个JSON字符串,则必须调用 const param = JSON.parse( parameters ); 首先将JSON解析为一个对象。

    不管怎样,我做了很多假设,希望我的回答有帮助。