Статическая типизация ввода компонента Angular

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

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


angular angular-compiler angular-components angular-compiler-cli angular-template
person FrostF0X    schedule 14.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

С помощью 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 выдаст ошибку, если мы попытаемся присвоить некоторые значения, которые не принадлежат типам.

person Suresh Kumar Ariya    schedule 14.10.2018
comment
Я понимаю, что tsc уловит несоответствие типов в исходниках машинописи. Основной вопрос по шаблонам. Насколько я понимаю, угловой компилятор компилирует шаблоны компонентов в машинописный текст, а после этого tsc компилирует его в javascript. Итак, теоретически, после того, как мы получим шаблоны в машинописном тексте, tsc может отловить возможное несоответствие типов. Также вы упомянули tslint, но относится ли это к шаблонам? Если да, то какие правила должны быть включены, чтобы перехватывать ошибку типа ввода компонента? - person FrostF0X; 14.10.2018
comment
Да, он поймает, если в шаблоне есть ошибки типа. Но он не будет перехватывать значения, переданные в качестве входных данных. Также это выполнение будет происходить во время выполнения. В этом случае в браузере будут работать только файлы .js. не машинописный код - person Suresh Kumar Ariya; 15.10.2018
comment
Да, у нас всегда в браузере работают только файлы js. Но с помощью машинописного текста мы можем определить распространенные ошибки статической типизации на этапе компиляции. Это то, что я хочу применить и в шаблонах, вполне достижимо получить статическую проверку типов — у нас есть информация о типе ввода и информация о типе переданной переменной. Знаете ли вы, есть ли способ достичь этого? - person FrostF0X; 15.10.2018
comment
Что касается моих знаний. это невозможно для передачи динамических данных через @input() - person Suresh Kumar Ariya; 15.10.2018