TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
目录
- 1，前言
- 2，二者关系
- 2.1，使用
- 3，遇到的问题
- 3.1，TS 中使用 JS
1，前言
通过 Vite 创建的 Vue3 + TS 项目，根目录下会有 tsconfig.json 和 tsconfig.node.json 文件，并且存在引用关系：
{"compilerOptions": {// 其他配置项...},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json 文件（配置项比 tsconfig.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，得到答案，修改配置项即可：
{"compilerOptions": {"noImplicitAny": false}
}
但后来发现，问题的产生是因为其他同事觉得 ts 麻烦，想直接使用 js，所以做了如下修改：
<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: 将严格模式应用于所有输入文件，就像它们是以严格模式开始的。
所以更准确的修改，应该是增加下面配置项即可：
{"compilerOptions": {"allowJs": true}
}
以上。
参考