12

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 が存在し、bool であるという TypeScript の知識が得られます。これはすばらしいことです。ただし、backbone.js のドキュメントでは、属性ハッシュを直接使用するのではなく、get と set を使用するように指示されています。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 に答える
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 に答える