tsconfig之preserveValueImports属性

preserveValueImports

关闭引用省略

为什么需要这个

有一些场景，TypeScript 不能检测到你用了一个 import 语法。

如下代码，TypeScript 会判断这个 import 没用而去掉它，因为在 eval 中使用，typescript 没有办法判断它是否使用了

import { Animal } from "./animal.js";

eval("console.log(new Animal().isDangerous())");

最常见的场景就是在 vue 文件中，如下代码

<!-- A .vue File -->
<script setup>
import { someFunc } from "./some-module.js";
</script>

<button @click="someFunc">Click me!</button>

上述代码在 <script> 标签外边生成一些代码，但是 TypeScript 只能看到 <script> 标签里面的代码。 这代表着，TypeScript 可以自动把 someFunc 的 import 消除掉，上述代码就会运行失败。 在 TypeScript 4.5 中，你可以用 preserveValueImports: true 来避免这些场景。

注意点

当 preserveValueImports: true 并且 isolatedModules: true 时，引入的类型必须标记 type， 因为编译器每次只能处理一个单独的文件，编译器不知道引入的值没有用，或者这是一个类型，必须移除，否则会导致运行的问题。

如下代码 TypeScript 并不能判断 BaseType 是一个引入还是一个类型。

import { someFunc, BaseType } from "./some-module.js";
//                 ^^^^^^^^
// Error: 'BaseType' is a type and must be imported using a type-only import

当 preserveValueImports 和 isolatedModules 一起打开时，明确引入的是类型时需要在类型前面明确的加入 type 关键字

import { someFunc, type BaseType } from "./some-module.js";