TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错

1，前言

通过 Vite 创建的 Vue3 + TS 项目，根目录下会有 tsconfig.json 和 tsconfig.node.json 文件，并且存在引用关系：

json 复制代码

{
  "compilerOptions": {
  	  // 其他配置项...
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json 文件（配置项比 tsconfig.json 少很多）：

json 复制代码

{
	"compilerOptions": {
		"composite": true, // 配合 references 配置项使用。
		// 其他配置项...
	},
	"include": ["vite.config.ts"]
}

2，二者关系

1，TS 只能识别 tsconfig.json 为配置文件，不能识别其他的配置文件。

2，随着项目的变的越来越复杂，为了更精细化的控制，需要允许为不同的文件设置不同的配置。

基于上面的2个原因，TS增加一个功能：项目引用（Project References）。

2.1，使用

以 tsconfig.json 和 tsconfig.node.json 为例，其他的配置文件必须有一个配置项 "composite": true，并且在 tsconfig.json 文件中通过配置项 references 引入，这样 TS 就能识别。

同时，不同的配置文件之间的配置项相互独立 ，只会影响当前配置文件中的 include 字段。

所以，Vite 创建的 Vue3 + TS 项目中，tsconfig.node.json 只会影响到 vite.config.ts 文件。

3，遇到的问题

3.1，TS 中使用 JS

接手的一个Vue3项目中，在 main.ts 中遇到下面的报错（竟然一直没有解决）：

报错信息：
Could not find a declaration file for module './App.vue'. 'd:/xxx/src/App.vue' implicitly has an 'any' type.ts(7016)

直接搜索错误 implicitly has an 'any' type，得到答案，修改配置项即可：

json 复制代码

{
	"compilerOptions": {
		"noImplicitAny": false
	}
}

但后来发现，问题的产生是因为其他同事觉得 ts 麻烦，想直接使用 js，所以做了如下修改：

html 复制代码

<script setup lang="ts">
<!-- 改为 -->
<script setup>

此时配置项 "strict": true 就会发挥作用（第5点），

该配置项启用时，包含的一些关键编译选项：

strictBindCallApply: 确保 bind, call, apply 方法的参数类型被正确地类型检查。
strictFunctionTypes: 对函数类型进行严格检查，包括参数和返回值的类型。这意味着函数的参数列表和返回值类型必须完全匹配。
strictNullChecks: 启用严格的空值检查。在这种模式下，TypeScript 编译器会更加严格地检查位置类型和联合类型中可能为 null 或 undefined 的位置。
strictPropertyInitialization: 确保类的非 undefined 属性在构造函数中被初始化。
noImplicitAny: 禁止使用隐式的 any 类型。这有助于避免类型系统的退化，确保类型被明确地声明。
strictTypePredicates: 严格检查类型谓词（如 typeof, instanceof）在类型守卫中的使用。
noImplicitThis: 确保 this 参数被明确地类型化，而不是隐式地推断为 any 类型。
alwaysStrict: 将严格模式应用于所有输入文件，就像它们是以严格模式开始的。

所以更准确的修改，应该是增加下面配置项即可：

json 复制代码

{
	"compilerOptions": {
		"allowJs": true
	}
}

以上。

参考