• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript中的esModuleInterop选项

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

当没有加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'能正常使用。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript躬行记(8)——装饰器发布时间:2022-07-18
下一篇:
深入浅出 Typescript 学习笔记发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap