Question

一个很大的问题，已花费我几个小时，在Angular 2模板内部没有类型检查。这已在Type checking in Angular 2 templates中讨论过。（但提供的唯一解决方案是AOT编译）

问题：

@Component({
    template: '<button (click)="foo='haha'"'><div>{{foo}}</div>'
})
export class Bar {
    foo: number = 3;
}

这会将foo设置为“haha”，这不是一个大问题，因为我们看到输出，但在更大的应用程序中，这变得更复杂，而且往往不那么明显。（例如，使用* ngFor循环字典并将错误的类型作为键）。

可能的解决方案： 我的想法是，包装我正在使用的类型，并在typescripts检查之上，确保类型在运行时匹配：

function checkTypes(shouldBe: any, value: any) {
    if(typeof shouldBe !== typeof value)
        throw "Typemissmatch. Expected a " + typeof shouldBe + ", but the provided variable '" + value + "' is of type " + typeof value + ".";
}

abstract class Typesafe<T> {
    private _value: T;

    constructor(start: T) {
        this._value = start;
    }

    get value(): T {
        return this._value;
    }

    set value(value: T) {
        checkTypes(this._value, value)
        this._value = value;
    }
}

export class TInt extends Typesafe<number> {};

这实际上非常有效。如果我现在单击示例中的按钮，则会抛出异常。

问题：

除了编写更多类型之外，这种方法有什么缺点
我是否错过了一些超级棒的技术，可以解决这个问题？（例如React的JSX编译）
有没有人已经实现了这个？

环绕类型以确保Angular 2模板中的运行时类型检查

0 个答案: