javascript - typescript ，序列化类对象

Question

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

正如您从下面的示例中看到的那样，JSON.stringify() 不会序列化 Cache_Backend_LocalStorage_TagThree 对象中的 Cache_Backend_LocalStorage_Tag 列表。

我错过了什么？

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);

Answer 1

原因

这是因为您正在将属性分配给数组，而数组属性不会包含在 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 接口(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 方法添加到 Cache_Backend_LocalStorage_TagThree 中的 _tags 数组。 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);
};