国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

TypeScript 中的多種 import 解義

chanthuang / 1477人閱讀

摘要:中有多種的方式,而中針對這種情況做了多種語法,最常見的就是這種。這篇文章主要來講解中不同的具有什么意義。因為中的模塊大部分都是通過語法進行導出的。從而達到針對的兼容。個人建議將重命名。

JavaScript 中有多種 export 的方式,而 TypeScript 中針對這種情況做了多種 import 語法,最常見的就是 import * as path from "path" 這種。這篇文章主要來講解 TypeScript 中不同的 import 具有什么意義。

原文首發(fā)于我的個人網(wǎng)站:聽說 - https://tasaid.com,推薦在我的網(wǎng)站閱讀更多技術文章。

前端開發(fā) QQ 群:377786580
從 export 說起

有很多朋友都問過我關于 TypeScript 中不同 import 的含義,最典型的就是下面的 import 語法:

import * as path from "path"

不少人疑問這句代碼究竟是什么意思,這里我們要先從 js 的 export 開始說。

首先,JavaScript 的模塊化方案,在歷史的演進中,有多種導出模塊的方式:exportsmodule.exportsexportexport default

在 nodejs 中內(nèi)置的模塊遵循的都是 CommonJS 規(guī)范,語法為 module.exportsexports

// 模塊中的 exports 變量指向 module.exports
// 這篇文章不會深入講解 module.exports 和 exports 的關系

module.exports = function () { }

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

module.exports.name = "linkFly"

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

在 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 規(guī)范的語法:

源碼:

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 語法的類型檢查規(guī)則,這個下面再說。

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" 的語法導入是會報錯的。

所以在 tsconfig.json 中,有個 allowSyntheticDefaultImports 選項,就是針對這種語法做兼容。

如果設定 allowSyntheticDefaultImportstrue,則檢測導入的模塊是否是 ES6 模塊,如果不是,則查找模塊中是否有 exports.default 導出。

從而達到針對 exports.default 的兼容。

效果參見這個動畫:

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

我在 《[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...》。

原文首發(fā)于我的個人網(wǎng)站:聽說 - https://tasaid.com,推薦在我的網(wǎng)站閱讀更多技術文章。

前端開發(fā) QQ 群:377786580
引用和參考

Github - allowSyntheticDefaultImports should be the default?

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

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101995.html

相關文章

  • 如何理解語義(semantic)化?

    摘要:邏輯學的語義學著眼點在于邏輯系統(tǒng)的語義解釋,是一個理想化的模型系統(tǒng),不直接涉及自然語言。例如,通過幫助臨床研究中的決策,語義技術將跨機構橋接多種形式的生物和醫(yī)學信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程師的招聘中,經(jīng)常有這樣的要求:對Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化...

    CarlBenjamin 評論0 收藏0
  • React的移動端和PC端生態(tài)圈的使用匯總

    摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據(jù)參數(shù)相應模塊執(zhí)行。京東的,多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態(tài),特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優(yōu)化...

    kun_jian 評論0 收藏0
  • React的移動端和PC端生態(tài)圈的使用匯總

    摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據(jù)參數(shù)相應模塊執(zhí)行。京東的,多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態(tài),特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優(yōu)化...

    J4ck_Chan 評論0 收藏0
  • React的移動端和PC端生態(tài)圈的使用匯總

    摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據(jù)參數(shù)相應模塊執(zhí)行。京東的,多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態(tài),特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優(yōu)化...

    Travis 評論0 收藏0

發(fā)表評論

0條評論

chanthuang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<