Typescript: Stricter TypeChecking with Decorators.

[mhevery]

This is a common issue in Angular 2

Correct:

@Component({
  selector: 'issue',
})
@View({
  templateUrl: 'issue_component.html',
  directives: [MyDirective]
})
class MyComponent {}

Common mistake is to put the directives on the wrong decorator:

@Component({
  selector: 'issue',
  directives: [MyDirective]
})
@View({
  templateUrl: 'issue_component.html'
})
class MyComponent {}

The issue is that this passes type-checking in TypeScript because the all args are optional. The extra arg is ignored.

  interface ComponentFactory {
     new(obj: {
      selector?: string,
      properties?: List<string>,
      events?: List<string>,
      host?: StringMap<string, string>,
      lifecycle?: List<LifecycleEvent>,
      hostInjector?: List<any>,
      exportAs?: string,
      compileChildren?: boolean,
      viewInjector?: List<any>,
      changeDetection?: string,
    }): ComponentAnnotation;
  }

  interface ViewFactory {
     new(obj: {
      templateUrl?: string,
      template?: string,
      directives?: List<Type | any | List<any>>,
      renderer?: string,
      styles?: List<string>,
      styleUrls?: List<string>,
    }): ViewDecorator;
  }

Ideally we would like to say that we only allow the args which are declared and any extra arg is to be an error.

Could we have such a feature?

[rbuckton]

Support for this was added in #3823, and is listed in the Wiki under Breaking Changes. Please verify using typescript@next and let us know if this satisfies your use case.

[mhevery]

Looks like what we need! Awesome. Let us give it a try.

[mhegazy]

I am now getting this Error:

TS2345 Argument of type '{ selector: string; directives: any[]; }' is not assignable to parameter of type '{ selector?: string; properties?: string[]; events?: string[]; host?: { [x: string]: string; }; l...'.
Object literal may only specify known properties, and 'directives' does not exist in type '{ selector?: string; properties?: string[]; events?: string[]; host?: { [x: string]: string; }; l...'.

[mhevery]

PERFECT!