背景

這周遇到了一個比較奇怪的問題：如何在 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)然是更保險一些，沒啥壞處。

參考鏈接

Do I need to use the “import type” feature of TypeScript 3.8 if all of my imports are from my own file?

Runtime typesafety in typescript

總結(jié)

到此這篇關(guān)于TypeScript中import type與import區(qū)別的文章就介紹到這了,更多相關(guān)TS import type與import區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！