关于TypeScript模块导入的那些事
作者:三毛丶 发布时间:2024-06-07 15:57:46
前言
模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用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
来源:https://juejin.im/post/5a2cce856fb9a0450e760ca3
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 完美的渐变透明效果。支持IE,Firefox渐变,自己写的JS框架中用的东西,发出来了。修正完全隐藏时,偶尔不display = "
- 1.如何引入在vue-cli里,引入文件有几钟方法一种是用npm或者cnpm指令去下载对应的插件,然后在main.js里用import方法引
- 场景描述今天在将 Hive 表同步到 MySQL 之后,其中有一列是唯一列,但是在 MySQL 中查询的时候 count 与 distinc
- Series对象和DataFrame的列数据提供了cat、dt、str三种属性接口(accessors),分别对应分类数据、日期时间数据和字
- 百度AI功能还是很强大的,百度AI开放平台真的是测试接口的天堂,免费接口很多,当然有量的限制,但个人使用是完全够用的,什么人脸识别、MQTT
- get如果请求url没有变化,取出缓存,提高效率;请求会缓存到浏览器中,可以通过历史记录查看用户信息,安全性低;post传送变化的数据显示,
- $tar xvf go1.3.3.linux-amd64.tar.gz$mv go /usr/local/$vim /etc/profile
- 把中文字符转换回Unicode字符。见下列代码:<%function unicode(str)dim i,j,c,
- 1、注意:pool必须在 if __name__ == '__main__' 下面运行,不然会报错2、多进程内出现错误会直接
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 4 - Functions函数和MooTools
- 变量类型ECMAScript变量可能包含两种不同类型的数据值:基本类型和引用类型。基本类型基本类型指的是简单的数据段,5种基本数据类型:un
- 1. torch- torchvision- python版本对应关系2. CUDA Toolkit 和PyTorch的对应关系3. 安装说
- 在写django项目的时候,有的数据没有使用模型管理(数据表是动态添加的),所以要直接使用mysql。前端请求数据的时候可能会指定这几个参数
- 1.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(
- Python编写一个简易银行账户系统,供大家参考,具体内容如下文章中主要涉及的方法是Python中的open(filename, ‘r
- 一、Flowable数据库表命名规则ACT_RE_*:’RE’表示repository(存储)。Re
- 前言最近在工作经常会碰到对字符串进行去重操作,下面就给大家列出用Python如何处理的,话不多说了,来一起看看详细的介绍吧。比如说,要拿下面
- 在刚进公司的时候,要写一个需求,使用django的admin站点管理,实现一个二级联动的功能,因为要用到django自带的页面,因为不是自定
- Hypothesis是Python的一个高级测试库。它允许编写测试用例时参数化,然后生成使测试失败的简单易懂的测试数据。可以用更少的工作在代
- 前言:在页面操作过程中有时候点击某个链接会弹出新的窗口,但由于Selenium的所有操作都是在第一个打开的页面进行的,这时就需要主机切换到新