首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Backbone和TypeScript,不幸的婚姻:构建类型安全的"get"?

Backbone和TypeScript,不幸的婚姻:构建类型安全的"get"?
EN

Stack Overflow用户
提问于 2013-03-09 00:05:05
回答 4查看 7.8K关注 0票数 12

我正在尝试在Backbone.js中使用TypeScript。它是“有效的”,但是Backbone的get()和set()丢失了很多类型安全性。我正在尝试编写一个helper方法来恢复类型安全。如下所示:

我把这个放入我的模型中:

代码语言:javascript
运行
复制
object() : IMyModel  {
    return attributes; // except I should use get(), not attributes, per documentation
}

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

通过这种语法,我得到了TypeScript关于MyProperty存在并且是bool的知识,这真是太棒了。但是,backbone.js docs告诉我使用get和set,而不是直接使用属性散列。那么,有没有什么神奇的Javascript方法可以通过get和set正确地传递对象的使用呢?

EN

回答 4

Stack Overflow用户

发布于 2013-03-09 10:32:58

我们正在大量使用backbone和TypeScript,并提出了一个新的解决方案。

考虑以下代码:

代码语言:javascript
运行
复制
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语句只是在每个属性上调用backbone set。这样下面的测试就会通过:

代码语言:javascript
运行
复制
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语法,以及构造函数。基本上,您可以使用主干.get和.set作为内部变量。

票数 17
EN

Stack Overflow用户

发布于 2013-12-13 04:02:07

我在/u/blorkfish答案的基础上,使用泛型和ES5 getter/setter提出了以下方法。

代码语言:javascript
运行
复制
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,所以它现在是必需的。抛出的错误会迫使您这样做。也许我们可以想出一个更好的方法?

并使用它:

代码语言:javascript
运行
复制
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

它比理想的要稍微冗长一些,并且它需要你使用默认值,但是它工作得很好。

票数 10
EN

Stack Overflow用户

发布于 2016-10-31 06:26:46

这是一种使用装饰器的方法,创建一个基类,如下所示:

代码语言:javascript
运行
复制
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;
}

然后创建自己的类,如下所示:

代码语言:javascript
运行
复制
class User extends Model<{id: string, email: string}> {
    @Model.Property('id')        set Id(): string { return null; }
    @Model.Property('email')     set Email(): string { return null; }
}

并使用它:

代码语言:javascript
运行
复制
var user = new User;
user.Email = 'email@me.ok';
console.log(user.Email);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15298215

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档