在Angular 2模板中键入检查

Question

我们正在使用Angular 2和TypeScript构建应用程序.我们尝试静态检查可能的类型.有没有办法检查模板中的类型？请考虑以下片段:

<foo [data]="dataObj"></foo>

假设data在Foo组件中有某种类型TData.但是,默认情况下,没有什么能阻止我传递dataObj不符合的内容TData.是否有Angular模板的typescript扩展,可以在这种情况下验证类型？

Answer 1

不幸的是,目前的Angular版本似乎没有检查组件输入和事件的类型.您可以使用AOT编译并启用fullTemplateTypeCheck angular compiler选项,该选项执行一些模板类型检查.

启用fullTemplateTypeCheck选项 src/tsconfig.app.json

{
    "compilerOptions": { ... },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true
        ...
    }
}

并建立(或服务)与项目--aot选项

ng build --aot

关于输入和事件类型检查,我发现什么角度上的bug跟踪系统的两个问题(issue1和issue2).据我所知,问题的解决方案取决于渲染器实现,更有可能的问题可能在下一版角度渲染器中被修复,称为Ivy.以下是常春藤渲染器中输入类型检查的功能请求.

Answer 2

我认为 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>

我发现的唯一问题是我不确定如何将类函数注入到模板中，而不是作为组件的实例。

@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