0

我有 2 个角度分量。

ButtonComponent输入类型为ButtonText

@Component({
  selector: 'app-button',
  template: '<h1></h1>',
})
export class ButtonComponent {
  @Input() text: ButtonText;
}

export class ButtonText {
  constructor(private text: string) {
  }
}

MainComponent它使用按钮并将输入传递给它：

@Component({
  selector: 'app-root',
  template: '<app-button [text]="title"></app-button>',
})
export class AppComponent {
  title = 'compiler-playground';
  test: ButtonText = new ButtonText('text');
}

问题 - 如果我将错误类型的参数传递给输入。ng build不返回任何错误或警告。我已经尝试了[在角度文档中]描述的很多可能的角度编译器标志：（https://github.com/angular/angular/blob/master/aio/content/guide/aot-compiler.md#compiler-options）

"angularCompilerOptions": {
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "skipTemplateCodegen": false,
    "trace": true,
    "debug": true
}

问题：如何在编译过程中实现静态类型检查？或者也许有任何静态分析工具可以实现这一点，例如模板 linter？

4

1 回答 1

0

在 EsLint/TSLint 的帮助下，我们可以对组件属性和输入类型进行静态类型检查。

export type inputType = 'Angular' | 'React Native' | 'Vue JS';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() name: inputType;

  ngOnInit(){
    this.name = 'Angular'; //this works
    this.name = 'Angular123'; //this will throw errors
  }

}

如果我们将'Angular123'作为值从父组件传递给@input'name'，它不会抛出错误。因为我们使用属性绑定传递动态值，而这些事情将在运行时发生，AOT 编译器无法捕捉并报告我们。

只有在开发时才有可能，在 IDE 语言服务的帮助下，如果我们试图分配一些不属于类型的值，TSLint 会抛出错误。

于 2018-10-14T14:53:16.463 回答