从 Typescript 解析 JSON 恢复数据成员但不恢复类型:无法在结果上调用方法

Posted

技术标签:

【中文标题】从 Typescript 解析 JSON 恢复数据成员但不恢复类型:无法在结果上调用方法【英文标题】:Parsing JSON from Typescript restores data members but not type: cannot call methods on result 【发布时间】:2013-07-01 04:58:05 【问题描述】:

当我将对象 p1 的 JSON 字符串化结果解析回另一个对象 p2 时,第二个对象获取与第一个对象关联的数据,但我无法在其上调用任何网络。使用http://www.typescriptlang.org/Playground/ 我尝试了以下操作:

class Person

    constructor(public name: string, public age: number) 
    
    Age()  return this.age; 


// Create a person
var p: Person = new Person("One", 1);

// Create a second person from the JSON representation
// of the first (NOTE: assert it is of type Person!)
var p2: Person = <Person>JSON.parse(JSON.stringify(p));

document.writeln("Start");

document.writeln(p.name);  // OK: One
document.writeln(p.Age()); // OK: 1

document.writeln(p2.name); // OK: One
document.writeln(p2.age;   // OK: 1
document.writeln(p2.Age()); // ERROR: no method Age() on Object

document.writeln("End");

如何解析 JSON 数据并获取正确的 Person 对象?

【问题讨论】:

你的逻辑很危险。我不建议直接从序列化数据(可能来自网络)创建类。可能存在安全问题。最好序列化类状态数据,然后根据这个状态数据重构类对象(即新的)。如果您对反序列化数据进行任何检查(在反序列化数据后始终应该这样做以确保它没有被调和),那么您真的没有理由将对象转换为类.新建一个需要同样长的时间。 【参考方案1】:

试试这个:

// Create a person
var p: Person  = new Person("One", 1);

// JSON roundtrip
var p_fromjson = JSON.parse(JSON.stringify(p))

// Hydrate it
var p2: Person = Object.create(Person.prototype);
Object.assign(p2, p_fromjson);

document.writeln(p2.Age()); // OK

【讨论】:

【参考方案2】:

JSON 只是数据的表示,而不是任何行为。

您可以在接受 JSON 对象的对象上创建一个方法并从其中混合数据,但 JSON 对象不能仅传输纯数据的行为(方法等)。

class Person

    constructor(public name: string, public age: number) 
    

    Age()  return this.age; 

    static fromJson(json: string) 
        var data = JSON.parse(json);
        return new Person(data.name, data.age);
    


var p: Person = new Person("One", 53);
var jsonPerson = JSON.stringify(p);

var p2: Person = Person.fromJson(jsonPerson);

alert(p2.Age().toString());

【讨论】:

可能值得添加类型断言与强制转换不同 - 当您从另一种语言迁移到 TS 时,这可能会令人困惑。 谢谢两位。我已经实现了类似的东西(实际上我在一个数组中读取,比如说 a[],然后创建我的实际数组做 persons.push(new Person(a[i].name, a[i].age)) 但它看起来很笨拙。我正在寻找的是一种“复古适合”行为的方法. 我对 javascript 知之甚少,但我怀疑分配给原型之类的东西(看,我对 Javascript 知之甚少 ;-)) 将映射放入类中可防止逻辑泄漏到您的程序中,这样更简洁 - 所以persons.push(Person.fromJson(a[i])); 会比内联映射更简洁。

以上是关于从 Typescript 解析 JSON 恢复数据成员但不恢复类型:无法在结果上调用方法的主要内容,如果未能解决你的问题,请参考以下文章

在 TypeScript 中解析 JSON - 添加“数据”标签

Angular 2+:如何在 Angular 的 Typescript 组件中解析 json 数据

在 Typescript 中解析 JSON 对象

在 Angular 应用程序中将 JSON 解析为 Typescript 类

使用 TypeScript 解析复杂的 json 对象

在 Typescript 中解析复杂的 JSON