摘要：中有多種的方式，而中針對(duì)這種情況做了多種語(yǔ)法，最常見(jiàn)的就是這種。這篇文章主要來(lái)講解中不同的具有什么意義。因?yàn)橹械哪K大部分都是通過(guò)語(yǔ)法進(jìn)行導(dǎo)出的。從而達(dá)到針對(duì)的兼容。個(gè)人建議將重命名。

JavaScript 中有多種 export 的方式，而 TypeScript 中針對(duì)這種情況做了多種 import 語(yǔ)法，最常見(jiàn)的就是 import * as path from "path" 這種。這篇文章主要來(lái)講解 TypeScript 中不同的 import 具有什么意義。

原文首發(fā)于我的個(gè)人網(wǎng)站：聽(tīng)說(shuō) - https://tasaid.com，推薦在我的網(wǎng)站閱讀更多技術(shù)文章。

前端開(kāi)發(fā) QQ 群：377786580

有很多朋友都問(wèn)過(guò)我關(guān)于 TypeScript 中不同 import 的含義，最典型的就是下面的 import 語(yǔ)法：

import * as path from "path"

不少人疑問(wèn)這句代碼究竟是什么意思，這里我們要先從 js 的 export 開(kāi)始說(shuō)。

首先，JavaScript 的模塊化方案，在歷史的演進(jìn)中，有多種導(dǎo)出模塊的方式：exports、module.exports、export、export default。

在 nodejs 中內(nèi)置的模塊遵循的都是 CommonJS 規(guī)范，語(yǔ)法為 module.exports 和 exports。

// 模塊中的 exports 變量指向 module.exports
// 這篇文章不會(huì)深入講解 module.exports 和 exports 的關(guān)系

module.exports = function () { }

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

module.exports.name = "linkFly"

例如 nodejs 內(nèi)置的 events 模塊的源碼：

在 ECMAScript 6 中又新增了語(yǔ)法 export 和 export default:

export default function () { }

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

export const name = "linkFly"

到這里畫風(fēng)還比較正常，而大名鼎鼎的 JavaScript 轉(zhuǎn)碼編譯器 babel 針對(duì) ECMAScript 6 新增的 export default 語(yǔ)法，搞了個(gè) babel-plugin-transform-es2015-modules-commonjs 的轉(zhuǎn)換插件，用于將 ECMAScript 6 轉(zhuǎn)碼為 CommonJs 規(guī)范的語(yǔ)法：

源碼：

export default 42;

編譯后：

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

exports.default = 42;

到這里，我們看到有三種 export 默認(rèn)值的語(yǔ)法：

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

// babel 轉(zhuǎn)碼
exports.default = function () {}

// es6
export default function () {}

在 TypeScript 中，也有多種 import 的方式。

// commonjs 模塊
import * as xx from "xx"

// es6 模塊
import xx from "xx"

// commonjs 模塊，類型聲明為 export = xx
import xx = require("xx")

// 沒(méi)有類型聲明，默認(rèn)導(dǎo)入 any 類型
const xx = require("xx")

在 tsconfig.json 中，allowSyntheticDefaultImports 會(huì)影響到 import 語(yǔ)法的類型檢查規(guī)則，這個(gè)下面再說(shuō)。

import * as xx from "xx" 的語(yǔ)法來(lái)一般都是用來(lái)導(dǎo)入使用 module.exports 導(dǎo)出的模塊。

import * as path from "path"

因?yàn)?nodejs 中的模塊大部分都是通過(guò) module.exports、exports.xx 語(yǔ)法進(jìn)行導(dǎo)出的。

默認(rèn)情況下，import xx from "xx" 的語(yǔ)法只適用于 ECMAScript 6 的 export default 導(dǎo)出：

模塊 foo：

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

ES6 模塊的導(dǎo)入：

import foo from "./foo"
foo()

而前面我們說(shuō)了，babel 會(huì)將 es6 的模塊的 export default 語(yǔ)法編譯為 exports.default 語(yǔ)法。

而 TypeScript 默認(rèn)是不識(shí)別這種語(yǔ)法的，如果一個(gè)模塊的導(dǎo)出是 exports.default 導(dǎo)出，如果使用 import xx from "xx" 的語(yǔ)法導(dǎo)入是會(huì)報(bào)錯(cuò)的。

所以在 tsconfig.json 中，有個(gè) allowSyntheticDefaultImports 選項(xiàng)，就是針對(duì)這種語(yǔ)法做兼容。

如果設(shè)定 allowSyntheticDefaultImports 為 true，則檢測(cè)導(dǎo)入的模塊是否是 ES6 模塊，如果不是，則查找模塊中是否有 exports.default 導(dǎo)出。

從而達(dá)到針對(duì) exports.default 的兼容。

效果參見(jiàn)這個(gè)動(dòng)畫：

allowSyntheticDefaultImports 選項(xiàng)的，一般情況下我采取的方式是將 deafult 重新命名：

import { default as foo } from "foo"

import xx = require("xx") 是用來(lái)導(dǎo)入 commonjs 模塊的庫(kù)，特殊的地方在于這個(gè)庫(kù)的類型聲明是 export = xx 這種方式導(dǎo)出的：

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()

我在 《[JavaScript 和 TypeScript 交叉口 —— 類型定義文件(*.d.ts)
](https://tasaid.com/blog/20171...》中講述過(guò) TypeScript 類型聲明文件對(duì)導(dǎo)入導(dǎo)出的影響。

當(dāng)一個(gè)模塊沒(méi)有類型聲明文件的時(shí)候，可以使用 commonjs 原始的 require() 方式來(lái)導(dǎo)入模塊，這樣會(huì)默認(rèn)該模塊為 any。

最后我們整體總結(jié)下，在 TypeScript 中，有多種 import 的方式，分別對(duì)應(yīng)了 JavaScript 中不同的 export。

// commonjs 模塊
import * as xx from "xx"

// 標(biāo)準(zhǔn) es6 模塊
import xx from "xx"

// commonjs 模塊，類型聲明為 export = xx
import xx = require("xx")

// 沒(méi)有類型聲明，默認(rèn)導(dǎo)入 any 類型
const xx = require("xx")

針對(duì) babel 編譯出來(lái)的 exports.default 語(yǔ)法，ts 提供了 allowSyntheticDefaultImports 選項(xiàng)可以支持，只不過(guò)個(gè)人不太推薦。

個(gè)人建議將 default 重命名。

import { default as foo } from "foo"

關(guān)于 TypeScript 中類型聲明文件(*.d.ts) 對(duì) import 和 export 的影響，可以參考我之前寫的 《[JavaScript 和 TypeScript 交叉口 —— 類型定義文件
](https://tasaid.com/blog/20171...》。

原文首發(fā)于我的個(gè)人網(wǎng)站：聽(tīng)說(shuō) - https://tasaid.com，推薦在我的網(wǎng)站閱讀更多技術(shù)文章。

前端開(kāi)發(fā) QQ 群：377786580

Github - allowSyntheticDefaultImports should be the default?

exports、module.exports和export、export default到底是咋回事