typescript菜鸟教程 for of（TypeScript选项‘importsNotUsedAsValues‘和‘preserveValueImports‘弃用）

TypeScript 从5.0开始  
  
  
  
  
  
 ，选项“importsNotUsedAsValues             ”和“preserveValueImports 
 
  
 
  
 
  
 
  
 
  
 
  
”已经被标记为Deprecated 
  
  
  
  
  
  ，并将在TypeScript5.5之后停止支持


 


 


 


 


 


 

，可以使用“verbatimModuleSyntax











”选项替代             。

默认情况下 
 
 
 
 
 
，假如你在TypeScript中写下如下代码：

import { Car } from "./car"; export function drive(car: Car) { // ... }

TypeScript检测到您只对类型定义导入  
   
   
   
   
   
   ，就会完全删除导入 
 
  
 
  
 
  
 
  
 
  
 
  
。输出的JavaScript可能如下：

export function drive(car) { // ... }

如果 ./car 文件中仅仅定义了type 或者interface

 

 

 

 

 

 
，转换为javascript时这些定义被抛弃
 

 

 

 

 

 

，是正确











。但是             ，如果 ./car中的Car是一个class
 

 
 

 
 

 
 

 
 

 
 

 
 ，里边还包括了一些其他定义
  
  
  
  
  
  
 。这个文件被抛弃 
  
  
  
  
  
 。最终的javascript可能会产生Runtime error 


 


 


 


 


 


 
。

importsNotUsedAsValues选项就解决了这个问题
 
 
 
 
 
 
。

此标志控制导入的工作方式












，有三种不同的选项：

remove：丢弃没有使用的import  
   
   
   
   
   
  。【默认值】 preserve：保留所有的import                   ，即使从来没有使用过的定义 

 

 

 

 

 

 
。 error：基本上和preserve选项一致
 
 
 
 
 
 
 
 
 
 
 
 
 ，但是


















，当值（value）被import仅用作 type 时会报错

 

 

 

 

 

 
。如果您希望确保没有意外导入任何值             ，此时可以使用此选项             。

preserveValueImports作用：

例如：

import { Animal } from "./animal.js"; eval("console.log(new Animal().isDangerous())");

这样的代码编译器不知道是否该保留还是该抛弃 
 

 
 

 
 

 
 

 
 

 
 

 
。如果想保留
 
  
 
  
 
  
 
  
 
  
 
  
 ，请使用preserveValueImports选项

importsNotUsedAsValues  
  
  
  
  
  
 、preserveValueImports还有一个isolatedModules共三个选项












，比较难以理解  
  
  
  
  
  
 ，有时候使用时仍旧有一些边缘情况导致非期盼的结果












。

从TypeScript5.0开始 
  
  
  
  
  
  ，引入了verbatimModuleSyntax选项（值为 true


 


 


 


 


 


 

，false）                   。使用type修饰符 
 
 
 
 
 
，就明确保留还是抛弃  
   
   
   
   
   
   ，以简化以上情况 
 
 
 
 
 
 
 
 
 
 
 
 
。

任何不带类型修饰符的导入或者导出都会被保留


















。 任何使用类型修饰符的内容都将被完全删除             。 // This statement can be dropped entirely in JS output import type * as car from "./car"; // The named import/export Car can be dropped in JS output import { type Car } from "./car"; export { type Car } from "./car"; // Erased away entirely. import type { A } from "a"; // Rewritten to import { b } from "bcd"; import { b, type c, type d } from "bcd"; // Rewritten to import {} from "xyz"; import { type xyz } from "xyz";

使用此选项后

 

 

 

 

 

 
，实现了所见即所得 
 
  
 
  
 
  
 
  
 
  
 
  
。有type修饰符的
 

 

 

 

 

 

，明确只使用了定义             ，编译时直接抛弃；没有使用type修饰符的
 

 
 

 
 

 
 

 
 

 
 

 
 ，编译时就会保留其内容











。

一般情况下












，vscode会首先使用自带的TypeScript版本
  
  
  
  
  
  
 。最近升级后TypeScipt默认都会是5.X版本 
  
  
  
  
  
 。

如果想继续使用5.x版本                   ，增加一个选项：

在tsconfig.json 中增加 "ignoreDeprecations": "5.0"
 
 
 
 
 
 
 
 
 
 
 
 
 ，就不再报警了 


 


 


 


 


 


 
。

项目如果想切换到4.X版本：

切换TypeScript版本：首先确保在本项目已经有TypeScript4.x

如果没有可以 npm install typescript @4.9

然后

第一种方法：快捷键：Ctrl + Shift + P 然后输入 Typescript: Select Typescript Version


















，选择本项目的版本
 
 
 
 
 
 
。

第二种方法：打开一个ts或者tsx文件  
   
   
   
   
   
  。右下角有TypeScript JSX字样             ，在左边的{ }上
 
  
 
  
 
  
 
  
 
  
 
  
 ，鼠标悬停












，在弹窗中点击目前的TypeScript版本 

 

 

 

 

 

 
。然后会让选择新的TypeScript版本

 

 

 

 

 

 
。

OK  
  
  
  
  
  
 ，切换成功             。