TypeScript中import?type與import的區(qū)別詳析
背景
這周遇到了一個(gè)比較奇怪的問(wèn)題:如何在 TypeScript 中根據(jù)某個(gè) enum 的取值來(lái)執(zhí)行后續(xù)邏輯?
按理來(lái)說(shuō)應(yīng)該很簡(jiǎn)單,這是 enum 的定義:
export enum MyEnum { DEFAULT = 0, SOME_VALUE = 1, SOME_OTHER_VALUE = 2, }
然后在另一個(gè)項(xiàng)目中,通過(guò) import type 來(lái)引入:
import type { MyEnum } from 'somepackage'; const someFunction = (myEnum: MyEnum) => { if (myEnum === MyEnum.SOME_VALUE) { // some logic here return } if (myEnum === MyEnum.SOME_OTHER_VALUE) { // some logic here return } // some logic here return }
但是這個(gè)時(shí)候 VS Code 居然提示了一個(gè)錯(cuò)誤:
'MyEnum' cannot be used as a value because it was imported using 'import type'.ts(1361)
我的第一反應(yīng)是,難道在 TypeScript 里不能檢查 enum 的取值?這也太說(shuō)不過(guò)去了吧…
后來(lái)折騰了半天,發(fā)現(xiàn)按照提示,把 import type 換成 import 就好了。
import type vs import
之前沒(méi)有深入學(xué)習(xí)過(guò) TypeScript,就是看項(xiàng)目里別人怎么用,就照貓畫(huà)虎地寫(xiě)。
這次也是一樣,別人都是 import type,我就直接在其中加了一個(gè)我想引入的 MyEnum,結(jié)果就不行了,還得把 MyEnum 分開(kāi)來(lái)用 import。
但這是為什么呢?后來(lái)搜了一下,終于弄明白了。TypeScript 3.8 文檔上說(shuō):
import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there’s no remnant of it at runtime.
大概意思就是:import type 是用來(lái)協(xié)助進(jìn)行類型檢查和聲明的,在運(yùn)行時(shí)是完全不存在的。
這下終于明白上面 enum 的那個(gè)問(wèn)題了:如果通過(guò) import type 來(lái)引入 MyEnum,固然可以在構(gòu)建時(shí)起到類型檢查的作用,但在運(yùn)行時(shí) MyEnum 就不存在了,當(dāng)然就無(wú)法檢查 MyEnum.SOME_VALUE 之類的取值了!
可是仔細(xì)一想,TypeScript 本來(lái)就不應(yīng)該在運(yùn)行時(shí)存在呀!為什么還要用 import type 呢?
其實(shí),在少部分情況下(剛好就包括 enum ),import 的內(nèi)容在運(yùn)行時(shí)的確是存在的,使用 import type 和import 就會(huì)有區(qū)別。
使用 import type 的好處
import type 是 TypeScript 3.8 才加入的,為什么要加入這個(gè)功能呢?使用 import type 而不是 import 有什么好處?
簡(jiǎn)單來(lái)說(shuō),大部分情況下用 import 完全就可以了,但在比較罕見(jiàn)的情況下,會(huì)遇到一些問(wèn)題,這時(shí)候使用 import type 就可以解決問(wèn)題了。
當(dāng)然,我也沒(méi)碰到過(guò)這樣的問(wèn)題,只不過(guò)項(xiàng)目里在所有引入 TypeScript 類型的地方用的基本都是 import type,也就跟著用了。這樣當(dāng)然是更保險(xiǎn)一些,沒(méi)啥壞處。
參考鏈接
Runtime typesafety in typescript
總結(jié)
到此這篇關(guān)于TypeScript中import type與import區(qū)別的文章就介紹到這了,更多相關(guān)TS import type與import區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五星評(píng)價(jià),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼
這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎(呵呵我用其作默認(rèn)主頁(yè)),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖2010-01-01手把手教你寫(xiě)一個(gè)uniapp通用頁(yè)面組件
uniapp中每個(gè)頁(yè)面可以理解為一個(gè)單頁(yè)面組件,下面這篇文章主要給大家介紹了關(guān)于如何寫(xiě)一個(gè)uniapp通用頁(yè)面組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12ES6中async函數(shù)與await表達(dá)式的基本用法舉例
async和await是我們進(jìn)行Promise時(shí)的一個(gè)語(yǔ)法糖,async/await為了讓我們書(shū)寫(xiě)代碼時(shí)更加流暢,增強(qiáng)了代碼的可讀性,下面這篇文章主要給大家介紹了關(guān)于ES6中async函數(shù)與await表達(dá)式的基本用法,需要的朋友可以參考下2022-07-07JS實(shí)現(xiàn)的JSON序列化操作簡(jiǎn)單示例
這篇文章主要介紹了JS實(shí)現(xiàn)的JSON序列化操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了json序列化操作相關(guān)實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),代碼備有較為詳盡的注釋便于理解,需要的朋友可以參考下2018-07-07IE innerHTML,outerHTML所引起的問(wèn)題
我們?cè)谟胘avascript創(chuàng)建一個(gè)遮蓋層(div)后,如果點(diǎn)擊關(guān)閉用到了2009-06-06