我们正在使用Angular 2和TypeScript构建应用程序。我们尽可能地在静态检查类型。有没有办法在模板中检查类型？考虑以下片段：
<foo [data]="dataObj"></foo>
strictTemplates 标志，参见 Strict mode 部分和 Template type checking 指南。在 tsconfig.json 文件中启用该标志：{
...
"compilerOptions": { ... },
"angularCompilerOptions": {
"strictTemplates": true
...
}
}
原始回答：
很遗憾，目前的 Angular 版本似乎没有检查组件输入和事件类型的功能。您可以使用 AOT 编译并启用 fullTemplateTypeCheck Angular 编译器选项，该选项执行一些模板类型检查。
在 src/tsconfig.app.json 中启用 fullTemplateTypeCheck 选项。
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"fullTemplateTypeCheck": true
...
}
}
使用--aot选项构建（或提供）您的项目
ng build --aot
关于输入和事件类型检查，我在angular错误跟踪器上发现了两个问题(issue1和issue2)。据我所知，问题的解决取决于渲染器实现，很可能问题会在下一个版本的angular渲染器Ivy中得到解决。这里是关于在ivy渲染器中进行输入类型检查的功能请求。
ng build --aot 没有出现错误。 - UrbKr引用官方声明：
在模板类型检查阶段，Angular模板编译器使用TypeScript编译器来验证模板中的绑定表达式。
当在模板绑定表达式中检测到类型错误时，模板验证会生成错误消息，类似于TypeScript编译器针对.ts文件中的代码报告类型错误的方式。
更多信息请参考：
Angular模板检查 https://angular.io/guide/aot-compiler#binding-expression-validation
要激活它，您需要构建应用程序，方法如下：
ng build --aot
或者
ng build --prod
但你也可以在不构建的情况下激活它：
ng serve --aot
您的组件Input()应该有类型。假设您有一个列表组件
import {Component, Input, OnInit } from '@angular/core';
import { Items } from '../../../services/Items';
@Component({
selector: 'my-list',
templateUrl: './my-list.component.html',
styleUrls: ['./my-list.component.scss'],
})
export class CategoryListComponent implements OnInit {
@Input() items: Items;
constructor() { }
ngOnInit() { }
}
"Items" 应该被定义为一个接口并进行导入
"export interface List {
name: string,
children: Items[]
}
export interface Item {
name: string;
slug: string;
imageUrl: string;
children: Item[];
}
现在你可以像这样使用它
<my-list [items]="items"></my-list>
export class ObjectTypePipe implements PipeTransform {
transform(value: any, args?: any): string {
if (value != undefined && value != null) {
return value.constructor.name.toString();
}
return "";
}
}
我认为一个IDE或linter可能会为您捕捉到这个问题，但如果有人真的需要这个，一个选项是创建一个管道，在运行时进行类型检查。
@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>
@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
<foo [data]="typeCheck(expectedtype,dataObj)> </foo>"，其中expectedtype应该与[data]的类型匹配。当然，这需要程序员付出更多的努力，但这是我现在能想到的唯一方法。我很快就会尝试这个方法，如果有效，我会发布一个答案。 - Scrambo