主干和TypeScript,一个不幸福的婚姻:构建一个类型安全的“get”
Backbone and TypeScript, an unhappy marriage: Building a type-safe "get"?
我正在尝试使用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方法可以通过get和set正确地使用该对象?
我们在TypeScript中大量使用backbone,并提出了一个新颖的解决方案。
考虑下面的代码:
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作为内部变量。
根据/u/blockfish的答案,我使用泛型和ES5的getter/setter来编写以下代码:
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>{};
}
}
注意:骨干。模型默认值是可选的,但由于我们使用它来构建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
它比理想的稍微冗长一些,并且要求您使用默认值,但是效果很好。
这是一种使用装饰器创建基类的方法:
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);
我正在努力解决同样的问题,但我想我发现了一个有趣的解决方案,来自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
}
);
- 我应该如何从xml文件构建一个javascript页面
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 动态构建一个数据表与scriplets
- jquery从2个json字符串构建一个复选框表单
- 使用jenkins从不同文件夹中的文件构建一个javascript文件
- I'I’我正在尝试使用微软的聊天机器人框架构建一个聊天机器人
- 当源文件夹中有多个jade文件时,gulp-ejade只构建一个HTML文件
- 构建一个HTML小部件来嵌入付费内容-如何确保与后端的通信安全
- 使用video-js构建一个包含字符串的HTML视频
- 我正在使用php includes来构建一个多页面网站.使用jquery,我将如何添加一个类"活动的”;添加到
- 使用 javascript 中的表单元素构建一个 xml 字符串
- 在javascript/jquery中构建一个多部分/表单数据请求
- 使用 jQuery 构建一个元素会给我一个错误
- 选择一个支持ie8的javascript构建工具
- JSON解析错误在一个系统中我没有't构建
- 正在寻找一个简单的JavaScriptHTMLGUI构建器,我可以将其嵌入到我的网站中
- 播放连续的声音,用HTML5和javascript构建一个音频句子
- "npm运行构建“;模块解析错误”;您可能需要一个适当的加载程序来处理此文件类型&”;
- 在HTML5画布中为学校项目构建一个表情符号
- 循环遍历JQueryUI选项卡控件中的每个选项卡,并构建一个对象数组