Угловая компонента ввода статической типизации - PullRequest
Новая
       39

Угловая компонента ввода статической типизации

0 голосов
/ 14 октября 2018

У меня есть 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
}

Вопрос: как мне выполнить статическую проверку типов во время компиляции? Или, может быть, есть какие-либо инструменты статического анализачто может добиться такого, как шаблонные линтеры?

1 Ответ

0 голосов
/ 14 октября 2018

С помощью 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 не может отловить и сообщить о нас.

Это возможно только во время разработки, с помощью служб языка IDETSLint выдаст ошибку, если мы попытаемся присвоить некоторые значения, которые не относятся к типам.

...