Angular component input static typing

Question

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?

Suresh Kumar Ariya · Accepted Answer · 2018-10-14 14:53:16Z

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.

answered Oct 14, 2018 at 14:53

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

FrostF0X Over a year ago

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?

Suresh Kumar Ariya Over a year ago

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

FrostF0X Over a year ago

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?

Suresh Kumar Ariya Over a year ago

As for my knowledge. its not possible for dynamic data passing through @input()

Collectives™ on Stack Overflow

Angular component input static typing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related