如何在tsconfig中添加自定义类型且不覆盖默认@types导入？

嘿，我刚好碰到过类似的问题，给你捋捋怎么解决！

我在项目里用Vite做打包和开发服务，Vite支持直接通过路径导入图片，写法是这样的：

import logo from './assets/logo.png';

但TypeScript根本认不出这种导入方式，好在Vite提供了对应的类型定义文件client.d.ts来解决这个问题。官方推荐的方案之一是通过tsconfig的编译选项来引入这个类型，不过我当时纠结的点是——怎么加这个自定义类型，同时又不把默认的@types包给覆盖掉？

其实很简单！默认情况下，如果你的tsconfig.json里设置了compilerOptions.types数组，TypeScript只会加载数组里指定的类型，而不会自动加载@types目录下的所有默认类型。所以要避免覆盖的话，你只需要把自定义类型和你需要的默认类型都一起放到types数组里就行。

举个例子，如果你的项目本来依赖node和jest的默认类型，那配置就写成这样：

"compilerOptions": {
  "types": ["node", "jest", "vite/client"]
}

这样TS就会同时加载这些指定的类型，以及所有@types下的相关类型啦。要是你只写"types": ["vite/client"]，那默认的@types就会被忽略，这就是问题所在。

另外还有个更省事的办法：只要你的client.d.ts文件在TypeScript的扫描范围内（比如放在项目根目录或者src文件夹下，并且tsconfig的include配置包含了这个文件），其实完全不用特意在types里配置，TS会自动识别并加载这个类型文件。不过如果你更倾向于用types选项来明确管理依赖的类型，那上面的方法就最稳妥。

备注：内容来源于stack exchange，提问作者Basti