关于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 相关文章推荐
JS实现OCX控件的事件响应示例
Sep 17 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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在apache环境下实现gzip配置方法
2015/04/02 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python爬取网页内容转换为PDF文件
2020/07/28 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python中round函数如何使用
2020/06/19 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
学生会主席事迹材料
2014/01/28 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
双拥工作宣传标语
2014/06/26 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
布达拉宫导游词
2015/02/02 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
员工安全责任协议书
2016/03/22 职场文书
详解Python描述符的工作原理
2021/06/11 Python