Backbone和TypeScript，一次不幸的婚姻：构建一个类型安全的“get”？

Question

我想用Backbone.js使用TypeScript。它“起作用”，但是Backbone的get（）和set（）会丢失大部分的类型安全。我正在尝试编写一个可以恢复类型安全的帮助程序方法。事情是这样的：

我把这个在我的模型：

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

这在消费： var myVar = this.model.object().MyProperty;

有了这个语法，我得到打字稿的知识myProperty的存在，并且是布尔，这真棒。但是，backbone.js docs告诉我直接使用get和set而不是属性散列。那么有没有什么神奇的Javascript方式来通过获取和设置正确的方式来管理该对象的使用？

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]; 
      } 
     } 
    } 
} 

注意接口定义模型的属性，构造确保传递的任何物体都会有标识，名称和描述特性。 for语句只需在每个属性上调用backbone集。这样，下面的测试将通过：

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 getters/setters，构建了/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 

这是理想的稍微详细，它要求你使用默认值，但它工作得很好。

Answer 3

下面是使用装饰的方式，创建一个基类是这样的：

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