18、import和import require

本文介绍了ES6风格的导入语法,并对比了旧的导入方式。重点讲解了如何正确使用ES6导入语法,尤其是在处理不同类型的模块导出时的注意事项。

一、import * as a from 'a'; 是新的"ES6风格"导入语法(自Typescript 1.5起可用).

只要有可能,现在应该使用此语法.

但有一点需要注意.ES6导入语法只能导入作为模块一部分导出的模块(由ES6定义)或对象(类,接口,变量,...).

一些Javascript库将直接导出函数或类,相应的定义文件通常如下所示:

declare module "my-class" {

    class MyClass { ... }

    export = MyClass
} 

在这种情况下,"旧"导入语法是唯一可以使用的语法

import MyClass = require("my-class");

不使用此语法将导致TS2497错误

请查看此问题以获取详细信息以及可能的解决方法,在以前的情况下,将空模块声明添加到定义文件中

declare module "my-class" {

    class MyClass { ... }

    module MyClass {} // <=

    export = MyClass
} 
### 详细介绍 #### require `require` 是 CommonJS 模块规范中用于引入模块的方法,主要用于服务器端的 Node.js 环境。它是运行时加载模块,这意味着在代码执行到 `require` 语句时,才会去查找并加载相应的模块。`require` 可以在代码的任何位置使用,并且可以使用表达式动态地加载模块。理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,例如: ```javascript // a模块是一个函数,立即执行a模块函数 require('./a')(); // a模块导出的是一个对象 var data = require('./a').data; // a模块导出的是一个数组 var a = require('./a')[0]; ``` #### import `import` 是 ES6(ES2015)引入的模块导入语法,是静态导入。它在编译时就确定了模块的依赖关系,必须放在文件开头,且使用格式固定,不能使用表达式。`import` 不会将整个模块运行后赋值给某个变量,而是只选择 `import` 的接口进行编译,在性能上比 `require` 好很多。使用方法示例如下: ```javascript // 方法1:导入指定的接口 import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 方法2:导入整个模块作为一个对象 import * as lib from 'lib'; const square = lib.square; ``` ### 对比 #### 语法 - **require**:语法较为灵活,可以在代码的任意位置使用,并且可以使用变量动态加载模块。例如: ```javascript const moduleName = './module'; const module = require(moduleName); ``` - **import**:语法相对固定,必须在文件开头使用,且不能使用变量动态加载模块。例如: ```javascript // 错误示例,不能使用变量动态加载 const moduleName = './module'; import module from moduleName; // 正确示例 import module from './module'; ``` #### 加载时机 - **require**:是运行时加载,在代码执行到 `require` 语句时才会去加载模块。 - **import**:是编译时加载,在代码编译阶段就确定了模块的依赖关系。 #### 性能 - **require**:每次调用 `require` 都会执行模块代码,若多次调用同一模块,会重复执行代码,性能上相对较差。 - **import**:只选择需要的接口进行编译,且只会加载一次模块,性能较好[^2]。 #### 适用环境 - **require**:主要用于 Node.js 环境,因为 Node.js 最初采用的是 CommonJS 模块规范。 - **import**:是 ES6 标准的模块导入语法,在现代浏览器支持 ES6 模块的环境中都可以使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值