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
}
}
以上。
参考