关于TypeScript模块导入的那些事


Posted in Javascript onJune 12, 2018

前言

模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们。 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一。

模块是自声明的。在TypeScript里,两个模块之间的关系是通过在文件级别上使用import和export建立的。

下面话不多说了,来一起看看详细的介绍吧

ES6 模块导入的限制

我们先来看一个具体的例子:

在 Node 项目里,使用 CommonJS 规范引入一个模块:

const koa = require('koa')

改写为 TypeScript(1.5+ 版本)时,通常有两种方式:

使用 ES6 模块导入方式:

// allowSyntheticDefaultImports: false
import * as koa from 'koa'

使用 TypeScript 模块导入语法:

import koa = require('koa')

两者大部分是等价的,但 ES6 规范对 import * as 创建出的模块对象有一点限制。

根据该规范,该模块对象不可被调用,也不可被实例化,它只具有属性。

因此,如果你想调用该对象,或者使用 new 方法,在 allowSyntheticDefaultImports: false 的配置下,应该使用例子中的第二种方式。

2.7 版本对 CommonJs/AMD/UMD 模块导入的增强

在之前的版本,TypeScript 对 CommonJs/AMD/UMD 模块的处理方式与 ES6 模块相同,这会导致一些问题:

  • 如前文所提到的,当导入一个 CommonJs/AMD/UMD 模块时,TypeScript 视 import * as koa from 'koa' 与 const koa = require('koa') 等价,但使用 import * as 创建的模块对象实际上不可被调用以及被实例化。
  • 类似的,当导入一个 CommonJs/AMD/UMD 模块时,TypeScript 视 import foo from 'foo' 与 const koa = require('koa').default 等价,但在大部分 CommonJs/AMD/UMD 模块里,它们并没有默认导出。

在 2.7 的版本里,TypeScript 提供了一个新选项 --esModuleInterop,旨在解决上述问题,
当使用该选项,且模块为 CommonJs/AMD/UMD 时,它会导入一个可调用或是可实例化的模块,同时它规定该模块必须作为默认导入:

import koa from 'koa'
const app = new koa()

模块导入仅仅是一些声明类型

在以非相对路径导入一个模块时,你可能会看到 Could not find a declaration file for module 'someModule' 的错误, 此时你可以安装对应模块的声明文件或者写一个包含 declare module 'someModule' 的声明文件。
实际上,当我们导入一个模块时:

import koa from 'koa'
// import koa = require('koa')

它所做的事情只有两个:

  • 导入模块的所有类型信息;
  • 确定运行时的依赖关系。

当你加载此模块,但并没有使用,或仅当作类型来使用时,编译后,此模块将会被移除。

当不使用时;

import koa from 'koa'

编译后:

仅当做类型使用时:

import koa from 'koa'
let k: koa

编译后:

var k

做为值使用时,编译后,此模块将会被保留:

import koa from 'koa'
const app = new koa()

编译后(假设使用 commonjs):

var __importDefault = (this && this.__importDefault) || function (mod) {
 return (mod && mod.__esModule) ? mod : { "default": mod };
};
var koa_1 = __importDefault(require("koa"));
var k = new koa_1.default();

注: __importDefault 为使用 --esModuleInterop 选项时产生的方法。

参考

http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html
https://stackoverflow.com/questions/35706164/typescript-import-as-vs-import-require?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
https://basarat.gitbooks.io/typescript/content/docs/project/external-modules.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery live函数
Dec 24 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
JS实现前端页面的搜索功能
Jun 12 #Javascript
微信小程序实现弹出菜单功能
Jun 12 #Javascript
微信小程序实现折叠与展开文章功能
Jun 12 #Javascript
微信小程序收藏功能的实现代码
Jun 12 #Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 #Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
You might like
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
超清晰的document对象详解
2007/02/27 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
使用python实现多维数据降维操作
2020/02/24 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
Weblogic的布署方式
2013/08/23 面试题
求职毕业生自荐书
2014/02/08 职场文书
教师求职信
2014/06/17 职场文书
教师业务学习材料
2014/12/16 职场文书
初三英语教学计划
2015/01/23 职场文书
成本会计岗位职责
2015/02/03 职场文书
教师工作表现自我评价
2015/03/05 职场文书
电影地道战观后感
2015/06/04 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript