我们正在Angular 2和TypeScript中构建一个应用程序。我们尝试静态检查可能的类型。有没有办法检查模板中的类型？考虑以下片段：
<foo [data]="dataObj"></foo>
假设Foo组件中的数据有一些类型的TData。然而，默认情况下，没有任何东西阻止我传递不符合TData的dataObj。有没有一个角色模板的脚本扩展，将验证这种情况下的类型？
我认为一个IDE或者linter可能会为你抓住这个，但是如果有人真的需要这个，一个选择就是在运行时创建一个Pipe来进行类型检查。
@Pipe({ name: 'typeCheck' })
export class TypeCheckPipe implements PipeTransform {
transform(value: any,classType: object): any[] {
if (value &&
!(value instanceof classType)
) {
throw new TypeError("Input is not instanceof " + classType +
" but was " + typeof(value));
}
return value;
}
}
您可以在这样的组件模板中使用它：
<custom-component [coolInput]="coolInput | typeCheck:coolInputClass"></custom-component>
我发现唯一的catch是我不知道如何将类函数注入到模板中，而不是作为组件的一个实例。
@Component({
selector: 'my-app',template: `
<div>
<custom-component [coolInput]="coolInput | typeCheck:coolInputClass"></custom-component>
</div>
`,})
export class App {
coolInput: CoolInput;
coolInputClass: object = CoolInput;
constructor() {
this.coolInput = "This is the wrong type";
}
}
这是一个Plunker，说明工作错误消息(通过Zone抛出)。
https://plnkr.co/edit/WhoKSdoKUFvNbU3zWJy6?p=preview
