Магистраль и TypeScript, несчастливый брак: Построение безопасного типа "получить"?

Я пытаюсь использовать 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 docs говорят мне использовать get и set, а не хэш атрибутов напрямую. Итак, есть ли какой-либо волшебный способ Javascript для использования этого объекта через get и set правильно?

Ответы

Ответ 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];
            }
        }
    }
}

Обратите внимание, что интерфейс определяет свойства модели, и конструктор гарантирует, что любой переданный объект будет иметь свойства 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);
    });
});

Update: Я обновил базу кода, чтобы использовать ES5 get и set синтаксис, а также конструктор. В принципе, вы можете использовать Backbone.get и .set как внутренние переменные.

Ответ 2

Я придумал следующее с использованием дженериков и получателей/установщиков ES5, построив ответ /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>{};
    }
}

Примечание. Базовые настройки по умолчанию не обязательны, но поскольку мы используем его для создания геттеров и сеттеров, он теперь является обязательным. Выброшенная ошибка заставляет вас это делать. Возможно, мы сможем подумать о лучшем пути?

И использовать его:

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

Он немного более подробный, чем идеал, и он требует использования значений по умолчанию, но он работает хорошо.

Ответ 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 protected]';
console.log(user.Email);