typescript - 单个模块的多个 TypeScript `import` 语句

Question

尤其是在重构期间，我更喜欢import从视觉、概念和工作流的角度来看不同的陈述：

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

与更常见的内联形式相反：

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

或包装的内联形式：

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

TS 编译器应该足够精明来解决这个问题，但我不知道是这样。对于一个模块使用多个TypeScript语句，TypeScript 1.8+中生成的 JavaScript 是否有任何负面影响？ import

score 3 · Accepted Answer

如果您希望将每个对象导入不同的行，只是为了查看您可以查看的内容，您可以这样做：

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

编辑：

生成代码的不同之处在于，在同一模块的多个导入的情况下，会生成不同的变量。在您的情况下，您可能有这样的 js 编译代码（如果您正在编译为 commonjs）：

var angular2_core_1 = require('angular2/core');
var angular2_core_2 = require('angular2/core');
var angular2_core_3 = require('angular2/core');

如果您只有一个导入，您将只有一个变量。

在任何情况下，模块都是单例的，因此多次导入同一个模块并不重要，每个模块总是只有一个实例。

score 2 · Accepted Answer

TypeScript 将生成三个require调用：

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

然而每个模块只会被加载一次。生成的 JavaScript 代码的大小会略有增加。

2 回答 2