12

我正在尝试将 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 而不是直接使用属性哈希。那么是否有任何神奇的 Javascript 方法可以通过正确地获取和设置来管理该对象的使用？

4

4 回答 4

17

我们大量使用带有 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 作为内部变量。

于 2013-03-09T02:32:57.823 回答
10

我使用泛型和 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

它比理想的稍微冗长，它要求您使用默认值，但效果很好。

于 2013-12-12T20:02:06.893 回答
0

这是一种使用装饰器的方法，创建一个像这样的基类：

export class Model<TProps extends {}> extends Backbone.Model {

    static Property(fieldName: string) {
        return (target, member, descriptor) => {
            descriptor.get = function() {
                return this.get(fieldName);
            };
            descriptor.set = function(value) {
                this.set(fieldName, value);
            };
        };
    }

    attributes: TProps;
}

然后像这样创建自己的类：

class User extends Model<{id: string, email: string}> {
    @Model.Property('id')        set Id(): string { return null; }
    @Model.Property('email')     set Email(): string { return null; }
}

并使用它：

var user = new User;
user.Email = 'email@me.ok';
console.log(user.Email);
于 2016-10-30T22:26:45.640 回答
0

我正在为同样的问题苦苦挣扎，但我想我在 TypeScript 聊天组中找到了有趣的解决方案。该解决方案似乎很有希望，我想在这里分享。所以我的代码现在看起来像这样

//Define model structure
interface IMarkerStyle{
    Shape:string;
    Fill:string;
    Icon:string;
    Stroke:string;
};

export class MarkerStyle extends StrongModel<IMarkerStyle>{  

//Usage
let style=new MarkerStyle();

//Most interesting part. Oddly enough thease lines check for type
style.s("Fill","#F00"); //setter OK:  Fill is defined as string
style.s("Fill",12.3);   //setter ERROR: because of type mismatch

我得到的另一个好处是它检查默认值和构造函数参数是否符合接口。因此静态类型检查将不允许您为不存在的属性指定默认值

let style=new MarkerStyle(
  {
    Shape:"circle", //OK 
    Phill:"#F00",   //ERROR typo in field name
    Icon:"car"      //OK
                    //ERROR Stroke is not optional in interface and not specified here
  }
);
于 2019-03-13T00:45:34.847 回答