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 typeimport 就会有区别。

使用 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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/VoisSurTonChemin/article/details/122508528

智能推荐

多线程实现多客户端通信_用多线程模拟多个客户端吗-程序员宅基地

文章浏览阅读731次。在Java Socket(下)中写了服务器端和客户端进行通信的例子,但是在实际应用当中,不是这样的一对一通信,通常都是一台服务器,对应着很多很多客户端进行通信,可以通过多线程来实现多客户端与服务器端进行通信。 (注:只是根据所学知识点写一个小例子,线程安全暂未考虑进去)首先是Server端的代码段:import java.io.IOException;import java.net.InetAd_用多线程模拟多个客户端吗

C语言统计指定目录下的普通文件个数_c语言使用多进程技术统计指定目录下各种文件类型的个数-程序员宅基地

文章浏览阅读3.7k次,点赞3次,收藏22次。#include <sys/stat.h>#include <dirent.h>#include <sys/types.h>#include <stdio.h>#include <stdlib.h>#include <string.h>int get_file_num(const char *path);int main(int argc, char *argv[]){ if (argc < 2) {_c语言使用多进程技术统计指定目录下各种文件类型的个数

ArrayList、LinkedList 、Vector 的区别_arraylist和linkedlist 和vector的区别-程序员宅基地

文章浏览阅读953次。List接口下3个实现类的比较_arraylist和linkedlist 和vector的区别

分布式事务seata的使用_seata事务管理-程序员宅基地

文章浏览阅读266次。Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。_seata事务管理

目前支持CUDA的nVIDIA的显卡型号 驱动及其 修改过后的 inf文件_g73驱动-程序员宅基地

文章浏览阅读1.9w次。下载169.21_forceware_winxp_32bit_english_whql.exe NVIDIA Driver for Microsoft Windows XP with CUDA Support (169.21) 我们在运行它的时候,有的就会提示显卡不支持,例如:lenovo T61上的显卡NVS 140m应该是可以支持CUDA的,但是安装驱动的时候,就会提示不匹配。这里我们_g73驱动

栈的链式存储(详解)-程序员宅基地

文章浏览阅读935次,点赞10次,收藏11次。链式存储的栈操作灵活,但由于每个节点需要额外的指针空间,可能会占用更多的内存。另外,由于链式存储的特性,访问栈中特定位置的元素可能需要遍历整个链表,导致性能略低于顺序存储。栈的链式存储是通过链表来实现的,每个节点包含一个元素和一个指向下一个节点的指针。链式存储的栈不需要提前分配内存空间,可以动态地增加或减少元素。在链式存储中,栈顶元素通常是链表的头节点,栈底元素是链表的末尾节点。_栈的链式存储

随便推点

服务器文档检索,知识库文档快速检索方法、应用服务器计算机可读存储介专利_专利查询 - 天眼查...-程序员宅基地

文章浏览阅读243次。1. 一种知识库文档快速检索方法,应用于应用服务器,其特征在于,所述方法包括步 骤: 接收用户输入的检索信息; 对所述检索信息进行分析、处理以获取查询词; 根据所述查询词对知识库中的文档进行搜索,并根据搜索匹配度对搜索结果进行排 序; 通过摘要生成模型及关键词生成模型获得各文档的摘要及关键词;及 输出排序后的搜索结果,并对应输出目标文档的所述摘要及关键词。2. 如权利要求1所述的知识库文档快速检索..._产品知识库快速查询

FlinkSql的窗口使用以及运用案例_flink sql 窗口-程序员宅基地

文章浏览阅读3.4k次。窗口概述 窗口函数 窗口分类_flink sql 窗口

【Multisim14】运行10版本文件时数码管一直显示为0的问题_multisim计数器数码管怎么不变化-程序员宅基地

文章浏览阅读3.8k次,点赞2次,收藏5次。解决Multisim14运行10版本文件时数码管一直显示为0的问题_multisim计数器数码管怎么不变化

使用conlleval.pl对CRF测试结果进行评价的方法-程序员宅基地

文章浏览阅读6.5k次,点赞2次,收藏3次。1.需安装perl的环境,测试。2下载conlleval.pl拷贝到某个文件夹的下面。2.conlleval.pl提供的有标准模板output.txt,必须严格按照此格式转换CRF的测试结果文件。3.列和列之间必须为空格(ASCII为20H),只能有一个空格;行之间为换行符\n(ASCII为0AH),不是回车换行符\r\n(ASCII为0D0AH);可以借助于ultraEdit来进_conlleval.pl

解决vue中v-if绑定data里的数据提示未定义的问题!!_make sure that this property is reactive, either i-程序员宅基地

文章浏览阅读1.1w次。是不是有遇到自己v-if绑定的参数明明在data里,但是就是提示错误:错误的大概意思是:Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property。通过初始化该属性,确保该属性是生效的,无论是在..._make sure that this property is reactive, either in the data option, or for

git 错误:对象文件为空object-file-is-empty_error: 对象文件 .git/objects/98/c0383c5a536414db5c76fb-程序员宅基地

文章浏览阅读562次,点赞8次,收藏8次。我们可以看到内容,是好着的。是当前所使用的分支的名字。_error: 对象文件 .git/objects/98/c0383c5a536414db5c76fbabd87d83bc9bdb7b 为空

推荐文章

热门文章

相关标签