Typescript,序列化类对象

时间:2015-03-23 15:34:26

标签: javascript typescript

如何将这些类序列化为JSON?

从下面的示例中可以看出,JSON.stringify()没有序列化Cache_Backend_LocalStorage_Tag对象中的Cache_Backend_LocalStorage_TagThree列表。

我错过了什么?

interface Cache_Backend_LocalStorage_Tag_Interface {
    _tag : string;
    _keys : string[];
}

class Cache_Backend_LocalStorage_Tag implements Cache_Backend_LocalStorage_Tag_Interface {

    public _tag : string;
    public _keys : string[];

    constructor(tag : string) {
        this._tag = tag;

        this._keys = [];
    }

    public add(key : string) : void {
        this._keys.push(key);   
    }

    public remove(key : string): boolean {
        // Get the index of the key
        var index = this._keys.indexOf(key, 0);

        // Check if we found the keys index
        if (index != undefined) {
           this._keys.splice(index, 1);

           return true;
        }

        return false;
    }

    public get tag(): string {
        return this._tag;
    }

    public get keys(): string[] {
        return this._keys;
    }
}

interface Cache_Backend_LocalStorage_TagThree_Interface {
    _tags : Cache_Backend_LocalStorage_Tag[];
}

class Cache_Backend_LocalStorage_TagThree implements Cache_Backend_LocalStorage_TagThree_Interface {

    public _tags : Cache_Backend_LocalStorage_Tag[];

    constructor(tags : Cache_Backend_LocalStorage_Tag[] = []) {
        this._tags = tags;
    }

    public add(tag : Cache_Backend_LocalStorage_Tag) : void {
        this.tags[tag.tag] = tag;
    }

    public get tags(): Cache_Backend_LocalStorage_Tag[] {
        return this._tags;
    }

    public get(tagKey : string): Cache_Backend_LocalStorage_Tag {
        return this.tags[tagKey];
    }

    public addKeyToTag(tagKey, key) {
        this.tags[tagKey].add(key);
    }

    public removeKeyFromTag(tagKey, key) {
        // Get the tag
        var tag = this._tags[tagKey];

        // Check if we found the tag index
        if (tag != undefined) {
            return tag.remove(key);
        }

        return false;
    }

    public clear(tagKey : string): void {
        delete this._tags[tagKey];
    }

    public static fromObject(object): Cache_Backend_LocalStorage_TagThree {
        return new Cache_Backend_LocalStorage_TagThree(object._tags);
    }
}

问题:

var tagThree = new Cache_Backend_LocalStorage_TagThree();
tagThree.add(new Cache_Backend_LocalStorage_Tag("stores"));
tagThree.addKeyToTag("stores", "store5");
tagThree.removeKeyFromTag("stores", "store5");

//  {"_tags":[]}
console.log(JSON.stringify(tagThree));

// { _tags: [ stores: { _tag: 'stores', _keys: [Object] } ] }
console.log(tagThree);

1 个答案:

答案 0 :(得分:4)

<强>原因

这是因为您要为数组分配属性,并且数组属性不会包含在JSON序列化中。例如:

var a = [];
a["test"] = "some value";
JSON.stringify(a); // returns: []

您需要使用普通对象:

var o = {};
o["test"] = "some value";
JSON.stringify(o); // returns: {"test":"some value"} 

<强>解决方案

更改您的Cache_Backend_LocalStorage_TagThree_Interface界面以使用dictionary like对象:

interface Cache_Backend_LocalStorage_TagThree_Interface {
    _tags : { [tag: string] : Cache_Backend_LocalStorage_Tag; };
}

然后更新现在具有编译错误的代码的所有区域以使用相同的类型。例如,更改:

constructor(tags : Cache_Backend_LocalStorage_Tag[] = []) {

要:

constructor(tags : { [tag: string] : Cache_Backend_LocalStorage_Tag; } = {}) {

只是为了好玩 - 更改默认序列化行为(不推荐)

如果您真的希望使用当前设置的数组(我不确定原因),可以覆盖序列化的完成方式。为此,请在toJSON中的_tags数组中添加Cache_Backend_LocalStorage_TagThree方法。 This allows you to control how the object is serialized when JSON.stringify is called on it.例如:

this._tags.toJSON = function() {
    var values = [];

    for (var v in this) {
        if (this[v] instanceof Cache_Backend_LocalStorage_Tag) {
            values.push(this[v]);
        }
    }

    return JSON.stringify(values);
};