web-dev-qa-db-ja.com

タイプスクリプトオブジェクトのシリアル化？

TypeScriptオブジェクトのJSONシリアル化/逆シリアル化の手段はありますか？単純なJSON.parse(JSON.stringify)には注意事項が多すぎます。

または、アドホックソリューションを使用する必要がありますか？

javascriptjsonserializationtypescript
31
Nik

インターフェイスを使用して強力な型を取得します。

// Creating 
var foo:any = {};
foo.x = 3;
foo.y='123';

var jsonString = JSON.stringify(foo);
alert(jsonString);


// Reading
interface Bar{
    x:number;
    y?:string; 
}

var baz:Bar = JSON.parse(jsonString);
alert(baz.y);

必要に応じて、タイプアサーション「<>」を使用します。

30
basarat

これを処理するより良い方法は、Object.assignを使用することです（ただし、ECMAScript 2015が必要です）。

与えられたクラス

class Pet {
    name: string;
    age: number;
    constructor(name?: string, age?: number) {
        this.name = name;
        this.age = age;
    }
    getDescription(): string {
        return "My pet " + this.name + " is " + this.age + " years old.";
    }
    static fromJSON(d: Object): Pet {
        return Object.assign(new Pet(), d);
    }
}

このようにシリアライズおよびデシリアライズ...

var p0 = new Pet("Fido", 5);
var s = JSON.stringify(p0);
var p1 = Pet.fromJSON(JSON.parse(s));
console.log(p1.getDescription());

この例を次のレベルに進めるために、ネストされたオブジェクトを検討してください...

class Type {
    kind: string;
    breed: string;
    constructor(kind?: string, breed?: string) {
        this.kind = kind;
        this.breed = breed;
    }
    static fromJSON(d: Object) {
        return Object.assign(new Type(), d);
    }
}
class Pet {
    name: string;
    age: number;
    type: Type;
    constructor(name?: string, age?: number) {
        this.name = name;
        this.age = age;
    }
    getDescription(): string {
        return "My pet " + this.name + " is " + this.age + " years old.";
    }
    getFullDescription(): string {
        return "My " + this.type.kind + ", a " + this.type.breed + ", is " + this.age + " years old.";
    }
    static fromJSON(d: Object): Pet {
        var o = Object.assign(new Pet(), d);
        o.type = Type.fromJSON(o['type']);
        return o;
    }
}

このようにシリアライズおよびデシリアライズ...

var q0 = new Pet("Fido", 5);
q0.type = new Type("dog", "Pomeranian");
var t = JSON.stringify(q0);
var q1 = Pet.fromJSON(JSON.parse(t));
console.log(q1.getFullDescription());

したがって、インターフェイスを使用するのとは異なり、このアプローチではメソッドが保持されます。

3
AQuirky

AQuirky answer は私には有効です。 Object.assignメソッドに問題がある場合があります。 tsconfig.jsonを次のように変更する必要がありました。

"compilerOptions": {
    ...
    "lib": ["es2015"],
    ...
}
1
nexiss