TS2686 "... refers to a UMD global..." emitted when it never gets executed or transpiled to JS

[truongsinh]

TypeScript Version: 2.1.1

Code

// ./hello.tsx
import * as React from 'react';

export interface IPHello {
	target: string;
}

export class Hello extends React.Component<IPHello, never> {
  render() {
    return <h1>Hello {this.props.target}!</h1>;
  }
}

// ./proxy.d.ts
export * from './hello';
import * as h from './hello';
export as namespace myElement;

// ./index.tsx
/// <reference types="systemjs" />
/// <reference path="./proxy.d.ts" />
import * as React from 'react'
/// import async * as HelloModulePromise from './hello'
import {render} from 'react-dom'

class Root extends React.PureComponent<void, {Hello: typeof myElement.Hello}> {
	constructor() {
	 super();
	 this.loadMore()
	  }
	  
	async loadMore() {
			let HelloModule = await System.import('./hello');
			let Hello = HelloModule.Hello as (typeof myElement.Hello)
			this.setState({Hello: Hello})

	}
	render() {
		if (this.state && this.state.Hello){
			return this.renderFull()
		}
		return this.renderLoading()
	}
	renderLoading() {
		return <h1>Loading...</h1>
	}
	renderFull() {
		return <this.state.Hello target="World"/>
	}
}

render(
  <Root />,
  document.getElementById('root')
);

Expected behavior:
No error emitted when compiled

Actual behavior:

src/index.tsx(7,61): error TS2686: 'myElement' refers to a UMD global, but the current file is a module. Consider adding an import instead.
src/index.tsx(15,35): error TS2686: 'myElement' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Note
What I'm doing here is lazily/async module loading. Ideally, I would ask for

import async * as HelloModulePromise from './hello'

but it's out of scope. In this bug report, typeof myElement.Hello is used for type-checking, and never get executed.

[aluanhaddad]

Since my typeof myElement.Hello is used only for type checking and as you only use it in type position you can simply import it as

import {Hello} from './hello';
...
class Root extends React.PureComponent<void, {Hello: typeof myElement.Hello}> {
...

And TypeScript will elide the import from the emitted JavaScript and the file will not be eagerly loaded.

[truongsinh]

thank you.