背景

這周遇到了一個(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)啥壞處。

參考鏈接

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論