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 import语句， TypeScript 1.8 + 中生成的JavaScript是否会产生任何负面影响？

Answer 1

如果您希望将所有对象导入到不同的行中，只是为了您正在查看的内容，您可以这样做：

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');

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

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

Answer 2

TypeScript将生成三个require次呼叫：

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

然而，

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

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

2 个答案: