TypeScript 中的多种 import 解义

栏目: 前端 · 发布时间: 5年前

内容简介:JavaScript 中有多种原文首发于我的个人网站:听说 -前端开发 QQ 群:377786580

JavaScript 中有多种 export 的方式,而 TypeScript 中针对这种情况做了多种 import 语法,最常见的就是 import * as path from 'path' 这种。这篇文章主要来讲解 TypeScript 中不同的 import 具有什么意义。

原文首发于我的个人网站:听说 - https://tasaid.com ,推荐在我的网站阅读更多技术文章。

前端开发 QQ 群:377786580

从 export 说起

有很多朋友都问过我关于 TypeScript 中不同 import 的含义,最典型的就是下面的 import 语法:

import * as path from 'path'

不少人疑问这句代码究竟是什么意思,这里我们要先从 js 的 export 开始说。

首先,JavaScript 的模块化方案,在历史的演进中,有多种导出模块的方式: exportsmodule.exportsexportexport default

在 nodejs 中内置的模块遵循的都是 CommonJS 规范,语法为 module.exportsexports

// 模块中的 exports 变量指向 module.exports
// 这篇文章不会深入讲解 module.exports 和 exports 的关系

module.exports = function () { }

exports.site = 'https://tasaid.com'

module.exports.name = 'linkFly'

例如 nodejs 内置的 events 模块的源码:

TypeScript 中的多种 import 解义

ECMAScript 6 中又新增了语法 exportexport default :

export default function () { }

export const site = 'https://tasaid.com'

export const name = 'linkFly'

到这里画风还比较正常,而大名鼎鼎的 JavaScript 转码编译器 babel 针对 ECMAScript 6 新增的 export default 语法,搞了个 babel-plugin-transform-es2015-modules-commonjs 的转换插件,用于将 ECMAScript 6 转码为 CommonJs 规范的语法:

源码:

export default 42;

编译后:

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = 42;

到这里,我们看到有三种 export 默认值的语法:

// commonjs
module.exports = function () {}

// babel 转码
exports.default = function () {}

// es6
export default function () {}

TypeScript 中的 import

在 TypeScript 中,也有多种 import 的方式。

// commonjs 模块
import * as xx from 'xx'

// es6 模块
import xx from 'xx'

// commonjs 模块,类型声明为 export = xx
import xx = require('xx')

// 没有类型声明,默认导入 any 类型
const xx = require('xx')

tsconfig.json 中, allowSyntheticDefaultImports 会影响到 import 语法的类型检查规则,这个下面再说。

import * as xx from 'xx'

import * as xx from 'xx' 的语法来一般都是用来导入使用 module.exports 导出的模块。

import * as path from 'path'

因为 nodejs 中的模块大部分都是通过 module.exportsexports.xx 语法进行导出的。

import xx from 'xx'

默认情况下, import xx from 'xx' 的语法只适用于 ECMAScript 6 的 export default 导出:

模块 foo:

export default function () { 
  console.log('https://tasaid.com') 
}

ES6 模块的导入:

import foo from './foo'
foo()

而前面我们说了, babel 会将 es6 的模块的 export default 语法编译为 exports.default 语法。

而 TypeScript 默认是不识别这种语法的,如果一个模块的导出是 exports.default 导出,如果使用 import xx from 'xx' 的语法导入是会报错的。

TypeScript 中的多种 import 解义

所以在 tsconfig.json 中,有个 allowSyntheticDefaultImports 选项,就是针对这种语法做兼容。

如果设定 allowSyntheticDefaultImportstrue ,则检测导入的模块是否是 ES6 模块,如果不是,则查找模块中是否有 exports.default 导出。

从而达到针对 exports.default 的兼容。

TypeScript 中的多种 import 解义

效果参见这个动画:

TypeScript 中的多种 import 解义

allowSyntheticDefaultImports 选项的,一般情况下我采取的方式是将 deafult 重新命名:

import { default as foo } from 'foo'

import xx = require('xx')

import xx = require('xx') 是用来导入 commonjs 模块的库,特殊的地方在于这个库的类型声明是 export = xx 这种方式导出的:

foo.js 源码:

module.exports = () => { 
  console.log('https://tasaid.com') 
}

foo.d.ts 类型声明文件源码:

declare function foo(): void;
export = foo

bar.ts 引用:

import foo = require('./foo')

foo()

TypeScript 中的多种 import 解义

我在 《[JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)

]( https://tasaid.com/blog/20171... 》中讲述过 TypeScript 类型声明文件对导入导出的影响。

const xx = require('xx')

当一个模块没有类型声明文件的时候,可以使用 commonjs 原始的 require() 方式来导入模块,这样会默认该模块为 any。

总结

最后我们整体总结下,在 TypeScript 中,有多种 import 的方式,分别对应了 JavaScript 中不同的 export。

// commonjs 模块
import * as xx from 'xx'

// 标准 es6 模块
import xx from 'xx'

// commonjs 模块,类型声明为 export = xx
import xx = require('xx')

// 没有类型声明,默认导入 any 类型
const xx = require('xx')

针对 babel 编译出来的 exports.default 语法,ts 提供了 allowSyntheticDefaultImports 选项可以支持,只不过个人不太推荐。

个人建议将 default 重命名。

import { default as foo } from 'foo'

关于 TypeScript 中类型声明文件(*.d.ts) 对 import 和 export 的影响,可以参考我之前写的 《[JavaScript 和 TypeScript 交叉口 —— 类型定义文件

]( https://tasaid.com/blog/20171... 》。

原文首发于我的个人网站:听说 - https://tasaid.com ,推荐在我的网站阅读更多技术文章。

前端开发 QQ 群:377786580

引用和参考


以上所述就是小编给大家介绍的《TypeScript 中的多种 import 解义》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Producter 让产品从0到1

Producter 让产品从0到1

周楷雯 / 人民邮电出版社 / 2016-12-25 / CNY 69.00

这是一本以App Store首页推荐的成功App为例阐述如何完成一款App产品的设计、开发和营销的书。在这本书之后,作者的《一炷香》和《字里行间》两款产品也接连被App Store首页推荐。 《Producter 让产品从0到1》从产品的设计、产品的实现、产品的迭代、产品的营销、产品的进阶等几个角度,全面讲解了产品设计的基本原则、设计的重要性、设计的感觉、实用的设计工具、简单的iOS开发、产......一起来看看 《Producter 让产品从0到1》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器