warning on emitDecoratorMetadata for interface in esnext

TypeScript Version: 2.4.2

Code (using Angular 4)

// other-file.ts
export interface MyInterface { a: string }

// my-class.ts
import { Input } from '@angular/core'
import { MyInterface } from './otherFile'

class MyClass {
  @Input() myi: MyInterface;
}

tsconfig.json

{
  "compilerOptions": {
    ...
    "target": "es2017",
    "module": "esnext",
    "emitDecoratorMetadata": true,
    ...
  }
}

Expected behavior: Working, no errors. I’d expect no type information emitted for interfaces, as they’re only a Typescript compile construct.

Actual behavior: Although this isn’t a bug per se, TypeScript generates a decorator for type information, referencing MyInterface from otherFile. Only…this interface doesn’t exist runtime. So bundlers (webpack in my case) produce a warning for this (something like otherFile doesn't export MyInterface). You can workaround this by creating a local type in my-class.ts. Or just accept warnings.

[staeke]

@aluanhaddad Guesses about directions (with which I partly disagree btw) for Angular doesn’t affect that this is an issue with Typescript today, not ngc, not in the future.

[RoystonS]

Btw, Angular 2 uses this pattern quite a lot, e.g. to detect constructor parameter types. For interface types, it expects the developer to add an extra @Inject decorator to indicate the required concrete class or injection token, but for class types, there’s enough information in the constructor parameter metadata to configure the dependency injector.

I’ve just tripped across this same issue when trying to use the transpileOnly: true option in the ts-loader webpack loader. The warnings about the bogus interface imports are problematic, but the generated runtime test code doesn’t seem to be equivalent for non-interface types.