typescript中的esModuleInterop选项
当没有加esModuleInterop时
库的代码:
export const a = 1;
export default function b() {}
生成代码
exports.__esModule = true;
exports.a = 1;
function b() { }
exports["default"] = b;
使用库的代码:
import * as lib from './export'; console.log(lib);
生成代码
exports.__esModule = true;
var lib = require("./export");
console.log(lib);
import lib from './export'; console.log(lib);
生成代码
exports.__esModule = true;
var export_1 = require("./export");
console.log(export_1["default"]);
以上代码使用ts生成代码都是可以的。
但是如果我们使用的库是第三方的,比如fs。我们的代码如下
import fs from 'fs'; console.log(fs);
生成代码
exports.__esModule = true; var fs_1 = require("fs");
console.log(fs_1["default"]);
fs是没有default属性的,所以这种使用fs的方法是不对的。
所以,不加esModuleInterop时,正确引用fs的方法是下面这样:
import * as fs from 'fs';
console.log(fs); // 或者 import {fsync} from 'fs';
console.log(fsync);
加上esModuleInterop,代码
import * as lib from './export'; console.log(lib);
编译为:
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
exports.__esModule = true;
var lib = __importStar(require("./export"));
console.log(lib);
代码
import lib from './export'; console.log(lib);
编译为
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
exports.__esModule = true;
var export_1 = __importDefault(require("./export"));
console.log(export_1["default"]);
这时
import fs from 'fs'; console.log(fs);
就可以正常使用了。
总结:
因为很多老的js库使用了commonjs的导出方式,并且没有导出default属性,而是使用module.exports=xxx直接导出,这样会导致 import fs from 'fs';的语法引入失败。
typescript为了兼容这些js库,于是引入了esModuleInterop,使import fs from 'fs'能正常使用。
typescript中的esModuleInterop选项的更多相关文章
- typescript中的--strictFunctionTypes选项
什么是协变和逆变 原来,在泛型参数上添加了in关键字作为泛型修饰符的话,那么那个泛型参数就只能用作方法的输入参数,或者只写属性的参数,不能作为方法返回值等,总之就是只能是"入",不 ...
- 十分钟教你理解TypeScript中的泛型
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...
- 5种在TypeScript中使用的类型保护
摘要:在本文中,回顾了TypeScript中几个最有用的类型保护,并通过几个例子来了解它们的实际应用. 本文分享自华为云社区<如何在TypeScript中使用类型保护>,作者:Ocean2 ...
- OJ提交题目中的语言选项里G++与C++的区别(转)
G++? 首先更正一个概念,C++是一门计算机编程语言,G++不是语言,是一款编译器中编译C++程序的命令而已. 那么他们之间的区别是什么? 在提交题目中的语言选项里,G++和C++都代表编译的方式. ...
- 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。
[TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...
- Bash中的shopt选项
Bash中的shopt选项 http://blog.chinaunix.net/uid-20587169-id-1919110.html shopt命令用于显示和设置shell中的行为选项,通过这些选 ...
- 删除select中所有option选项jquery代码
select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...
- OJ提交题目中的语言选项里G++与C++的区别(转载)
原文链接:http://blog.polossk.com/201405/c-plus-plus-g-plus-plus G++? 首先更正一个概念,C++是一门计算机编程语言,G++不是语言,是一款编 ...
- TypeScript中的怪语法
TypeScript中的怪语法 如何处理undefined 和 null undefined的含义是:一个变量没有初始化. null的含义是:一个变量的值是空. undefined 和 null 的最 ...
随机推荐
- 翻译:使用 CoreWCF 升级 WCF 服务到 .NET 6
翻译:使用 CoreWCF 升级 WCF 服务到 .NET 6 原文地址:https://devblogs.microsoft.com/dotnet/upgrading-a-wcf-service-t ...
- 1┃音视频直播系统之浏览器中通过WebRTC访问摄像头
一.WebRTC的由来 对于前端开发小伙伴而言,如果用 JavaScript 做音视频处理 在以前是不可想象的,因为首先就要考虑浏览器的性能是否跟得上音视频的采集 但是 Google 作为国际顶尖科技 ...
- Flask01 第一个flask项目
参考地址:https://github.com/miguelgrinberg/microblog/tree/v0.1 flask环境[苹果M1] 添加虚拟环境 python3 -m venv venv ...
- python入门基础知识一(基于孙兴华python自动化)
print('aaa')等价于print("aaa") 英文单引号和双引号在字符串的输出上并无区别,但如果要打印这么一段话:I'm interested in Python. 就要 ...
- react 疑问集锦
在 setState 后未 re-render function component 初始化调用接口
- Django序列化组件与数据批量操作与简单使用Forms组件
目录 SweetAlert前端插件 Django自带的序列化组件 批量数据操作 分页器与推导流程 Forms组件之创建 Forms组件之数据校验 Forms组件之渲染标签 Forms组件之信息展示 S ...
- 场景实践:基于 IntelliJ IDEA 插件部署微服务应用
体验简介 阿里云云起实验室提供相关实验资源,点击前往 本场景指导您把微服务应用部署到 SAE 平台: 登陆 SAE 控制台,基于 jar 包创建应用 基于 IntelliJ IDEA 插件更新 SAE ...
- hash和history路由的区别
在了解路由模式前,我们先看下 什么是单页面应用,vue-router 的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...
- ElasticSearch7.3学习(三十)----ES7.X SQL新特性解析及使用Java api实现sql功能
一.ES7 sql新特性 1.1 数据准备 创建索引及映射 建立价格.颜色.品牌.售卖日期 四个字段 PUT /tvs PUT /tvs/_mapping { "properties&quo ...
- npm init cabloy背后的故事
背景 我们知道许多框架会提供一个脚手架工具,我们先下载安装脚手架工具,然后再通过脚手架命令行来创建项目.在npm@6.1.0中引入了npm init <initializer>的语法.简单 ...