TypeScript中import type與import的區別詳析

2022-07-15 10:00:22

背景

這周遇到了一個比較奇怪的問題：如何在 TypeScript 中根據某個 enum 的取值來執行後續邏輯？

按理來說應該很簡單，這是 enum 的定義：

export enum MyEnum {
  DEFAULT = 0,
  SOME_VALUE = 1,
  SOME_OTHER_VALUE = 2,
}

然後在另一個專案中，通過 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)

我的第一反應是，難道在 TypeScript 裡不能檢查 enum 的取值？這也太說不過去了吧…

後來折騰了半天，發現按照提示，把 import type 換成 import 就好了。

import type vs import

之前沒有深入學習過 TypeScript，就是看專案裡別人怎麼用，就照貓畫虎地寫。

這次也是一樣，別人都是 import type，我就直接在其中加了一個我想引入的 MyEnum，結果就不行了，還得把 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 是用來協助進行型別檢查和宣告的，在執行時是完全不存在的。

這下終於明白上面 enum 的那個問題了：如果通過 import type 來引入 MyEnum，固然可以在構建時起到型別檢查的作用，但在執行時 MyEnum 就不存在了，當然就無法檢查 MyEnum.SOME_VALUE 之類的取值了！

可是仔細一想，TypeScript 本來就不應該在執行時存在呀！為什麼還要用 import type 呢？

其實，在少部分情況下（剛好就包括 enum ），import 的內容在執行時的確是存在的，使用 import type 和import 就會有區別。