Question

我有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不返回任何错误或警告。我尝试了很多可能的[Angular docs]：（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
}

问题：如何在编译过程中实现静态类型检查？还是可能有任何静态分析工具可以做到这一点，例如模板短绒？

Answer 1

借助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编译器无法捕获并向我们报告。

只有在开发期间，如果我们尝试分配一些不属于Types的值，则在IDE语言服务的帮助下，TSLint将引发错误。

角组件输入静态输入

1 个答案: