TypeScript import 关键字有多种用法,其中一些取决于环境,解释了为什么它会令人困惑。让我们看看最小细节级别(因为在实际项目中它可能更复杂):
模块 CommonJs / 节点
@mfc:这与您的问题相对应。
TypeScript 项目使用 CommonJs 模块,通常是节点项目:
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
...
}
}
在这种情况下,import _ = require('http');(版本#1)被转换为var _ = require('http');(版本#2)。所以版本 #1 是 TypeScript 语法,而版本 #2 是 JavaScript 语法。
require() 在版本 1 中受支持,但在版本 #2 中不支持(错误[ts] Cannot find name 'require'.),除非通过npm i @types/node --save-dev 将节点类型添加到项目中(请参阅此stackoverflow Q/A)。
模块 ES6
@mfc:这不是你要求的情况。但它在Trott's answer 中,所以我已将其考虑在内。
import 是 ES6 关键字并且有它的 own syntax:
- 命名导出的“完全”导入:
import * as lib from 'lib';
- 命名导出的“选择”导入:
import { square, diag } from 'lib';
- 默认导出的导入:
import myFunc from 'myFunc';
根据上面提到的模块编译器选项,这些导入的转译方式不同:
-
ES6 → 没有变化
-
CommonJS → var ... = require('...');
-
AMD → define(...);
命名空间
别名
@mfc:这不是你要求的情况。但它在Jose A's answer,所以我在这里添加了完整的图片。
在以前称为“(内部)模块”的namespace 中,import 用于创建alias,这是另一个命名空间的导出元素的快捷方式。
namespace Root.Branch.Leaf {
export const configPath = '...';
}
namespace LeafClient {
import configPath = Root.Branch.Leaf.configPath;
console.log(`configPath=${configPath}`);
}
import configPath = Root.Branch.Leaf.configPath; 行被转换成var configPath = Root.Branch.Leaf.configPath;,参见。 TypeScript PlayGround.
注意命名空间之外的用法,因为它创建了全局变量!
全局模块
有些库会修改全局对象(浏览器中的window全局变量),例如:
ES6 语法还允许使用 side effects only import 加载此类库:import "reflect-metadata";
TypeScript 支持这个kind of imports。编译器将尝试获取相应的typing definition 以了解库效果,例如新方法Reflect.getMetadata()。