Backbone和TypeScript,一段不愉快的婚姻:建立一个类型安全的"获取"？

Question

我正在尝试将TypeScript与Backbone.js一起使用.它"有效",但Backbone的get()和set()失去了很多类型的安全性.我正在尝试编写一个可以恢复类型安全的辅助方法.像这样的东西:

我把它放在我的模型中:

object() : IMyModel  {
    return attributes; // except I should use get(), not attributes, per documentation
}

这在消费者中: var myVar = this.model.object().MyProperty;

使用这种语法,我得到了TypeScript的知识,MyProperty存在并且是bool,这很棒.但是,backbone.js文档告诉我使用get和set而不是直接使用属性hash.那么有没有任何神奇的Javascript方法通过get和set正确管道该对象的使用？

Answer 1

我们正在大量使用TypeScript主干,并提出了一种新颖的解决方案.
请考虑以下代码:

interface IListItem {
    Id: number;
    Name: string;
    Description: string;
}

class ListItem extends Backbone.Model implements IListItem {
    get Id(): number {
        return this.get('Id');
    }
    set Id(value: number) {
        this.set('Id', value);
    }
    set Name(value: string) {
        this.set('Name', value);
    }
    get Name(): string {
        return this.get('Name');
    }
    set Description(value: string) {
        this.set('Description', value);
    }
    get Description(): string {
        return this.get('Description');
    }

    constructor(input: IListItem) {
        super();
        for (var key in input) {
            if (key) {
                //this.set(key, input[key]);
                this[key] = input[key];
            }
        }
    }
}

请注意,接口定义了模型的属性,构造函数确保传递的任何对象都具有Id,Name和Description属性.for语句只调用每个属性的骨干集.这样以下测试将通过:

describe("SampleApp : tests : models : ListItem_tests.ts ", () => {
    it("can construct a ListItem model", () => {
        var listItem = new ListItem(
            {
                Id: 1,
                Name: "TestName",
                Description: "TestDescription"
            });
        expect(listItem.get("Id")).toEqual(1);
        expect(listItem.get("Name")).toEqual("TestName");
        expect(listItem.get("Description")).toEqual("TestDescription");

        expect(listItem.Id).toEqual(1);

        listItem.Id = 5;
        expect(listItem.get("Id")).toEqual(5);

        listItem.set("Id", 20);
        expect(listItem.Id).toEqual(20);
    });
});

更新: 我已更新代码库以使用ES5 get和set语法,以及构造函数.基本上,您可以使用Backbone .get和.set作为内部变量.

Answer 2

我已经提出了以下使用泛型和ES5 getter/setter,建立了/ u/blorkfish答案.

class TypedModel<t> extends Backbone.Model {
    constructor(attributes?: t, options?: any) {
        super(attributes, options);

        var defaults = this.defaults();
        for (var key in defaults) {
            var value = defaults[key];

            ((k: any) => {
                Object.defineProperty(this, k, {
                    get: (): typeof value => {
                        return this.get(k);
                    },
                    set: (value: any) => {
                        this.set(k, value);
                    },
                    enumerable: true,
                    configurable: true
                });
            })(key);
        }
    }

    public defaults(): t {
        throw new Error('You must implement this');
        return <t>{};
    }
}

注意:Backbone.Model默认是可选的,但由于我们使用它来构建getter和setter,现在它是必需的.抛出的错误会强制您执行此操作.也许我们可以想出更好的方法？

并使用它:

interface IFoo {
    name: string;
    bar?: number;
}

class FooModel extends TypedModel<IFoo> implements IFoo {
    public name: string;
    public bar: number;

    public defaults(): IFoo {
        return {
            name: null,
            bar: null
        };
    }
}

var m = new FooModel();
m.name = 'Chris';
m.get('name'); // Chris
m.set({name: 'Ben', bar: 12});
m.bar; // 12
m.name; // Ben

var m2 = new FooModel({name: 'Calvin'});
m2.name; // Calvin

它比理想的更冗长,它要求你使用默认值,但效果很好.