0

I have 2 angular components.

ButtonComponent that has an input of type ButtonText

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

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

And MainComponent that uses button and passes input to it:

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

Problem - if I pass a parameter with wrong type to input. ng build returns no any errors or warnings. I have tried a lot of possible angular compiler flags described [in 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
}

Question: how can I achieve static type checking during compilation? Or maybe there are any static analysis tools that can achieve this such as template linters?

FrostF0X
  • 1
  • 2

1 Answers1

0

With help of EsLint/TSLint, we can apply static type checking to the component properties and input types.

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
  }

}

If we pass 'Angular123' as value to @input 'name' from parent component, it won't throw error. Because we are passing dynamic values using attribute binding and these things will happen in run time and AOT compiler can't able to catch and report us back.

It's only possible in development time, With help of IDE Language services, TSLint will throw error, if we are trying to assign some values that doesn't belong to Types.

Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • I understand that `tsc` will catch type mismatch in typescript sources. The main question is about templates. As I understand angular compiler compiles component templates into typescript and after that `tsc` compiles it into javascript. So, in theory, after if we get templates in typescript `tsc` can catch possible type mismatch. Also you have mentioned `tslint`, but does it applies to templates? If yes which rules should be enabled to catch component input type error? – FrostF0X Oct 14 '18 at 19:56
  • Yes, it will catch if there are type errors in Template. But it won't catch values that passed as input. Also those execution will happen in runtime. In that case you will have only .js files running in the browser. not the typescript code – Suresh Kumar Ariya Oct 15 '18 at 03:38
  • Yes, we always have only js files running in browser. But with typescript we can determine common errors with static typing on compile stage. That's what I want to apply also in templates, it is completely achievable to get static type checking - we have input type info and passed variable type info. Do you know if there is a way to achieve that? – FrostF0X Oct 15 '18 at 06:12
  • As for my knowledge. its not possible for dynamic data passing through @input() – Suresh Kumar Ariya Oct 15 '18 at 07:41