TypeScript 中 import type 与 import 的区别-程序员宅基地

技术标签： JavaScript 前端 typescript javascript

背景

这周遇到了一个比较奇怪的问题：如何在 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 就会有区别。

使用 `import type` 的好处

import type 是 TypeScript 3.8 才加入的，为什么要加入这个功能呢？使用 import type 而不是 import 有什么好处？

简单来说，大部分情况下用 import 完全就可以了，但在比较罕见的情况下，会遇到一些问题，这时候使用 import type 就可以解决问题了。

当然，我也没碰到过这样的问题，只不过项目里在所有引入 TypeScript 类型的地方用的基本都是 import type，也就跟着用了。这样当然是更保险一些，没啥坏处。

参考链接

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

本文链接：https://blog.csdn.net/VoisSurTonChemin/article/details/122508528

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

获取大于等于一个整数的最小2次幂算法（HashMap#tableSizeFor）_整数最小的2的几次方-程序员宅基地

文章浏览阅读2w次，点赞51次，收藏33次。一、需求给定一个整数，返回大于等于该整数的最小2次幂（2的乘方）。例：输入输出 -1 1 1 1 3 4 9 16 15 16二、分析当遇到这个需求的时候，我们可能会很容易想到一个"笨"办法：..._整数最小的2的几次方

Linux 中 ss 命令的使用实例_ss@,,x,, 0-程序员宅基地

文章浏览阅读865次。选项，以防止命令将 IP 地址解析为主机名。如果只想在命令的输出中显示 unix套接字连接，可以使用。不带任何选项，用来显示已建立连接的所有套接字的列表。如果只想在命令的输出中显示 tcp 连接，可以使用。如果只想在命令的输出中显示 udp 连接，可以使用。如果不想将ip地址解析为主机名称，可以使用。如果要取消命令输出中的标题行，可以使用。如果只想显示被侦听的套接字，可以使用。如果只想显示ipv4侦听的，可以使用。如果只想显示ipv6侦听的，可以使用。_ss@,,x,, 0

conda activate qiuqiu出现不存在activate_commandnotfounderror: 'activate-程序员宅基地

文章浏览阅读568次。CommandNotFoundError: 'activate'_commandnotfounderror: 'activate

Kafka 实战 - Windows10安装Kafka_win10安装部署kafka-程序员宅基地

文章浏览阅读426次，点赞10次，收藏19次。完成以上步骤后，您已在 Windows 10 上成功安装并验证了 Apache Kafka。在生产环境中，通常会将 Kafka 与外部 ZooKeeper 集群配合使用，并考虑配置安全、监控、持久化存储等高级特性。在生产者窗口中输入一些文本消息，然后按 Enter 发送。ZooKeeper 会在新窗口中运行。在另一个命令提示符窗口中，同样切换到 Kafka 的。Kafka 服务器将在新窗口中运行。在新的命令提示符窗口中，切换到 Kafka 的。，应显示已安装的 Java 版本信息。_win10安装部署kafka

【愚公系列】2023年12月 WEBGL专题-缓冲区对象_js 缓冲数据 new float32array-程序员宅基地

文章浏览阅读1.4w次。缓冲区对象（Buffer Object）是在OpenGL中用于存储和管理数据的一种机制。缓冲区对象可以存储各种类型的数据，例如顶点、纹理坐标、颜色等。在渲染过程中，缓冲区对象中存储的数据可以被复制到渲染管线的不同阶段中，例如顶点着色器、几何着色器和片段着色器等，以完成渲染操作。相比传统的CPU访问内存，缓冲区对象的数据存储和管理更加高效，能够提高OpenGL应用的性能表现。_js 缓冲数据 new float32array

四、数学建模之图与网络模型_图论与网络优化数学建模-程序员宅基地

文章浏览阅读912次。（1）图（Graph）：图是数学和计算机科学中的一个抽象概念，它由一组节点（顶点）和连接这些节点的边组成。图可以是有向的（有方向的，边有箭头表示方向）或无向的（没有方向的，边没有箭头表示方向）。图用于表示各种关系，如社交网络、电路、地图、组织结构等。（2）网络（Network）：网络是一个更广泛的概念，可以包括各种不同类型的连接元素，不仅仅是图中的节点和边。网络可以包括节点、边、连接线、路由器、服务器、通信协议等多种组成部分。网络的概念在各个领域都有应用，包括计算机网络、社交网络、电力网络、交通网络等。_图论与网络优化数学建模

随便推点

android 加载布局状态封装_adnroid加载数据转圈封装全屏转圈封装-程序员宅基地

文章浏览阅读1.5k次。我们经常会碰见正在加载中，加载出错， “暂无商品”等一系列的相似的布局，因为我们有很多请求网络数据的页面，我们不可能每一个页面都写几个“正在加载中”等布局吧，这时候将这些状态的布局封装在一起就很有必要了。我们可以将这些封装为一个自定布局，然后每次操作该自定义类的方法就行了。首先一般来说，从服务器拉去数据之前都是“正在加载”页面，加载成功之后“正在加载”页面消失，展示数据；如果加载失败，就展示_adnroid加载数据转圈封装全屏转圈封装

阿里云服务器（Alibaba Cloud Linux 3）安装部署Mysql8-程序员宅基地

文章浏览阅读1.6k次，点赞23次，收藏29次。PS: 如果执行sudo grep 'temporary password' /var/log/mysqld.log 后没有报错，也没有任何结果显示，说明默认密码为空，可以直接进行下一步（后面设置密码时直接填写新密码就行）。3.（可选）当操作系统为Alibaba Cloud Linux 3时，执行如下命令，安装MySQL所需的库文件。下面示例中，将创建新的MySQL账号，用于远程访问MySQL。2.依次运行以下命令，创建远程登录MySQL的账号，并允许远程主机使用该账号访问MySQL。_alibaba cloud linux 3