Typescript JSON反序列化以接口缺少的方法答案

【问题标题】：Typescript JSON deserialize to interface missing methodsTypescript JSON反序列化以接口缺少的方法
【发布时间】：2016-08-15 20:37:08
【问题描述】：

我有一组类，其中包含一组相当简单的字段：

interface IQuiz {
    name: string;
    questions: Question[];
    score(): number;
}
export class Quiz implements IQuiz {
    name: string;
    questions: Question[];
    score(): number {
        var theScore: number = 0;
        this.questions.forEach(question => (theScore += question.value));
        return theScore;
    }
}

interface IQuestion {
    text: string;
    value: number;
}
export class Question {
    text: string;
    value: number;
}

然后我有一些 JSON 代表这些对象的一些实例。此 JSON 包括 Quiz.name 的值，Quiz.questions 的数组，每个数组都有其 text 和 value 字段的值。

在其他地方，我引用了这个从 JSON.parse(json) 创建的 Quiz 类，如下面的代码：

var json = '{"name": "quizA", "questions": [{"text": "Question A", "value": 0 }, ... ]}'
var quiz = <IQuiz>JSON.parse(json);

// Some other stuff happens which assigns values to each question

var score = quiz.score(); // quiz.score is not a function

似乎反序列化的对象实际上并不是所提供接口的实现。

如何获得对正确接口实例的引用，以便我可以调用 quiz.score() 并实际调用方法？

【问题讨论】：

将<IQuiz> 放在表达式之前不会将对象转换为该接口的实例。它只是告诉 TypeScript 编译器 assume 它是该接口的一个实例。要回答您的问题：stackoverflow.com/questions/5873624/…
谢谢，我看到了这个问题，但我仍然希望有更好的答案。否则看起来我需要为每个接受解析对象（或其属性）的对象创建一个构造函数，并将它们映射进去。对于这个问题中的对象来说很简单，但对于更复杂的对象图来说很乏味......

标签： json properties typescript

【解决方案1】：

不需要接口，它会增加两倍的维护模型属性的工作。在您的 Quiz 类中添加一个构造函数，以便它扩展您的 json 对象。

export class Quiz {
    constructor( json: any )
    {
      $.extend(this, json);

      // the same principle applies to questions:
      if (json.questions)
        this.questions = $.map( json.questions, (q) => { return new Question( q ); } );
    }
    name: string;
    questions: Question[];
    score(): number { ... }
}

在您的 ajax 回调中，从您的 json 对象创建 Quiz 对象：

let newQuiz = new Quiz( jsonQuiz );
let score = newQuiz.score();

我在post中详细说明了解决方案。

【讨论】：