单个模块的多个 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 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 代码的大小会略有增加。

Multiple TypeScript `import` statements for single module