TypeScript中import?type與import的區(qū)別詳析
背景
這周遇到了一個比較奇怪的問題:如何在 TypeScript 中根據(jù)某個 enum 的取值來執(zhí)行后續(xù)邏輯?
按理來說應(yīng)該很簡單,這是 enum 的定義:
export enum MyEnum {
DEFAULT = 0,
SOME_VALUE = 1,
SOME_OTHER_VALUE = 2,
}
然后在另一個項(xiàng)目中,通過 import type 來引入:
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
}
但是這個時候 VS Code 居然提示了一個錯誤:
'MyEnum' cannot be used as a value because it was imported using 'import type'.ts(1361)
我的第一反應(yīng)是,難道在 TypeScript 里不能檢查 enum 的取值?這也太說不過去了吧…
后來折騰了半天,發(fā)現(xiàn)按照提示,把 import type 換成 import 就好了。
import type vs import
之前沒有深入學(xué)習(xí)過 TypeScript,就是看項(xiàng)目里別人怎么用,就照貓畫虎地寫。
這次也是一樣,別人都是 import type,我就直接在其中加了一個我想引入的 MyEnum,結(jié)果就不行了,還得把 MyEnum 分開來用 import。
但這是為什么呢?后來搜了一下,終于弄明白了。TypeScript 3.8 文檔上說:
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 是用來協(xié)助進(jìn)行類型檢查和聲明的,在運(yùn)行時是完全不存在的。
這下終于明白上面 enum 的那個問題了:如果通過 import type 來引入 MyEnum,固然可以在構(gòu)建時起到類型檢查的作用,但在運(yùn)行時 MyEnum 就不存在了,當(dāng)然就無法檢查 MyEnum.SOME_VALUE 之類的取值了!
可是仔細(xì)一想,TypeScript 本來就不應(yīng)該在運(yùn)行時存在呀!為什么還要用 import type 呢?
其實(shí),在少部分情況下(剛好就包括 enum ),import 的內(nèi)容在運(yùn)行時的確是存在的,使用 import type 和import 就會有區(qū)別。
使用 import type 的好處
import type 是 TypeScript 3.8 才加入的,為什么要加入這個功能呢?使用 import type 而不是 import 有什么好處?
簡單來說,大部分情況下用 import 完全就可以了,但在比較罕見的情況下,會遇到一些問題,這時候使用 import type 就可以解決問題了。
當(dāng)然,我也沒碰到過這樣的問題,只不過項(xiàng)目里在所有引入 TypeScript 類型的地方用的基本都是 import type,也就跟著用了。這樣當(dāng)然是更保險一些,沒啥壞處。
參考鏈接
Runtime typesafety in typescript
總結(jié)
到此這篇關(guān)于TypeScript中import type與import區(qū)別的文章就介紹到這了,更多相關(guān)TS import type與import區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中全局對象的parseInt()方法使用介紹
全局對象的parseInt()方法該如何使用,下面為大家詳細(xì)介紹下,感興趣的朋友不要錯過2013-12-12
JavaScript中各種二進(jìn)制對象關(guān)系的深入講解
JavaScript中用于表示二進(jìn)制對象有,Blob對象、和 ArrayBuffer 對象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進(jìn)制對象關(guān)系的相關(guān)資料,需要的朋友可以參考下2021-09-09
微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)功能的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實(shí)例代碼,通過截圖加實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
js 采用delete實(shí)現(xiàn)繼承示例代碼
這篇文章主要介紹了js如何采用delete實(shí)現(xiàn)所謂的繼承,下面有個不錯的示例,大家可以參考下2014-05-05
使用bootstrapValidator插件進(jìn)行動態(tài)添加表單元素并校驗(yàn)
動態(tài)添加表單元素,并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則,調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過本文看下具體實(shí)現(xiàn)方法吧2016-09-09
layui form表單提交之后重新加載數(shù)據(jù)表格的方法
今天小編就為大家分享一篇layui form表單提交之后重新加載數(shù)據(jù)表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

