Multiple TypeScript `import` statements for single module

Especially during refactoring, I prefer distinct import statements from a visual, conceptual, and workflow perspective:

import {Component}      from 'angular2/core';
import {Input}          from 'angular2/core';
import {enableProdMode} from 'angular2/core';

as opposed to the more common inline form:

import {Component, Input, enableProdMode} from 'angular2/core';

or the wrapped inline form:

import {
   }                    from 'angular2/core';

The TS compiler should be savvy enough to address this, but I don’t know that it is. Are there any negative consequence to the generated JavaScript in TypeScript 1.8+ for using multiple TypeScript import statements for one module?

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

If you prefer to have every object imported in a different line just for the sake of what you’re viewing you can do this: import { Component, Input, enableProdMode } from 'angular2/core'; EDIT: The difference in the generated code is that in the case of multiple imports for the same module will generate different variables. In your case, you might have a js compiled code like this (if you’re compiling to commonjs): var angular2_core_1 = require('angular2/core'); var angular2_core_2 = require('angular2/core'); var angular2_core_3 = require('angular2/core'); If you have only one import you will have only one variable. In any case, modules… Read more »


TypeScript will generate three require calls:

var core_1 = require('angular2/core');
var core_2 = require('angular2/core');
var core_3 = require('angular2/core');

nevertheless each module will be loaded only once. The size of generated JavaScript code will slightly increase.