typescript中 tsconfig.json常用配置项的含义

本文主要介绍了TypeScript编译的相关配置。包括空对象表示编译目录下所有ts文件,include指定需编译的ts文件,exclude排除不需要编译的文件,files指定被编译文件列表。还重点讲解了compilerOption的多项配置,如target指定编译版本、module指定模块化规范等。

1.空对象

表示该目录下的所有ts文件需要被编译

{
//表示该目录下的所有ts文件需要被编译

}

2.include(使用较多)

        "include" 用来指定那些ts文件需要被编译

        路径: ** 表示任意目录

                  * 表示任意文件

{
"include":[
    "./src/**/*"
]
}

3.exclude

        "exclude": 表示排除哪些文件不需要编译

  表示排除src目录下tss文件下的所有目录所有文件

{
"include":[
    "./src/**/*"
],
"exclude":[
    "./src/tss/**/*"
]
}

4.files

        指定被编译文件的列表,只有需要编译的文件少时才会用到

列表中的文件都会被ts编译器所编译        

{
"files":[
"a.ts",
"b.ts",
"c.ts",
"d.ts"
]
}

 4.compilerOption(重点配置项)

         1 ) "target" 用来指定ts被编译的版本信息

        es3, es5,  es6, es2015, es2016, es2017 , es2018, es2019, es2020, esnext

{
"compilerOption":{
    "target" : "es6"
}
}

         2 ) "module" 指定我们使用模块化的规范

       推荐使用 "es2015""es2020"

{
"compilerOption":{
    "target" : "es6",
    "module" : "es2020"
}
}

         3 ) "lib" 用来指定项目中要是用的库,一般不动它

         4 ) "ouDir"  用来指定编译后文件所在的目录

{
"compilerOption":{
   "ouDir" : "./dist"
}
}

        5 ) "ouFile"  将代码合并为一个文件(用的不多)

设置ouFile后所有全局作用域的代码会合并到同一个文件

        6 ) "allowJs" 是否对js文件进行编译,默认是false

        7 ) "checkJs" 是否检查js代码是否符合语法规范,默认是false

        8 ) "removeComments" 是否移除注释 ,默认是false

        9 ) "alwaysStrict" : 用来设置编译后的文件是否适用严格模式 默认是false

        10 ) "noImplicitAny" 不允许隐式的any类型

        11 ) "noImplicitThis" 不允许不明确类型的this

        12 ) "strictNullChecks" 严格的检查空值

        13 ) "strict" 所有严格检查的总开关 (建议不写上面的直接打开这个,开启所有严格模式)

<think>我们正在处理一个关于VueTypeScript项目中tsconfig.json配置的问题。用户遇到了一个错误:找不到`@vue/tsconfig/tsconfig.web.json`文件。根据引用内容,我们知道在Vue3项目中通常有多个tsconfig文件,分别用于不同的目的。首先,我们需要理解错误的原因。这个错误通常发生在tsconfig.json中尝试通过`extends`属性继承一个不存在的配置文件。用户可能在配置中写了:```json{"extends":"@vue/tsconfig/tsconfig.web.json"}```但是,这个文件在项目中并不存在。根据引用[3],我们知道在Vue3项目中,通常会有`tsconfig.node.json`(用于配置Vite配置文件)和`tsconfig.app.json`(用于项目中的其他文件)。而根目录的`tsconfig.json`是一个空项目,主要用来引用其他配置文件。因此,解决方案可能是:1.检查项目结构,确认是否应该使用`tsconfig.app.json`而不是`tsconfig.web.json`。2.如果确实需要`@vue/tsconfig`包,那么可能需要安装它。但根据常见的Vue项目设置,通常不会直接使用`@vue/tsconfig`包。实际上,在标准的Vue3+TypeScript+Vite项目中,通常不会使用`@vue/tsconfig`。所以,用户可能是参考了某个过时的文档或模板。正确的做法应该是:-使用项目内已有的配置文件,比如`tsconfig.app.json`。因此,我们可以将tsconfig.json中的`extends`改为:```json{"extends":"./tsconfig.app.json"}```或者,如果项目中没有`tsconfig.app.json`,那么我们可以根据引用[2]和[3]的内容,创建一个标准的配置。步骤:1.确认项目根目录下是否有`tsconfig.app.json`。如果没有,可以创建一个。2.调整根目录的`tsconfig.json`,使其引用正确的配置文件。另外,根据引用[4],tsconfig.json是编译TypeScript的配置文件,我们可以根据项目需要调整配置。如果用户的项目是通过Vite创建的,那么典型的`tsconfig.json`和`tsconfig.app.json`应该如下:**tsconfig.json**(根目录)```json{"files":[],"references":[{"path":"./tsconfig.node.json"},{"path":"./tsconfig.app.json"}]}```**tsconfig.app.json**(根目录)```json{"extends":"@vue/tsconfig/tsconfig.dom.json",//如果这个存在,但通常Vue官方提供的包中可能包含,如果没有安装,则不要用//或者直接配置,不使用extends"compilerOptions":{//你的配置},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]}```但是,如果用户没有安装`@vue/tsconfig`,那么就不应该使用`@vue/tsconfig/tsconfig.dom.json`。我们可以使用Vite官方推荐的配置或者Vue官方推荐的配置。实际上,在最新的Vue项目中,通常不需要继承这个包。我们可以直接配置`tsconfig.app.json`,例如:```json{"compilerOptions":{"target":"ESNext","useDefineForClassFields":true,"module":"ESNext","moduleResolution":"Node","strict":true,"jsx":"preserve","sourceMap":true,"resolveJsonModule":true,"esModuleInterop":true,"lib":["ESNext","DOM"],"skipLibCheck":true,"baseUrl":".","paths":{"@/*":["./src/*"]}},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"exclude":["node_modules"]}```因此,针对用户的问题,解决方案是:1.检查`package.json`中是否安装了`@vue/tsconfig`。如果没有,并且项目不需要它,那么修改`tsconfig.json`或`tsconfig.app.json`的`extends`为一个本地文件或者删除该`extends`,直接配置。2.如果确实需要`@vue/tsconfig`,则安装它:`npminstall@vue/tsconfig`。但根据常见的Vue项目设置,通常不需要安装这个包。所以,更可能是配置错误。因此,我们建议用户修改`tsconfig.app.json`,去掉`extends`或者改为一个存在的配置。同时,确保根目录的`tsconfig.json`只引用存在的配置文件。如果用户是在根目录的`tsconfig.json`中直接配置(而不是通过引用),那么应该将`extends`改为正确的路径或移除。总结步骤:1.打开项目根目录下的`tsconfig.json`。2.检查`extends`字段,如果它指向`@vue/tsconfig/tsconfig.web.json`,将其改为`./tsconfig.app.json`(或项目中存在的其他配置文件)。3.如果`tsconfig.app.json`中也有`extends`指向`@vue/tsconfig/tsconfig.web.json`,同样将其改为一个存在的配置,或者删除并直接配置。4.如果项目中没有`tsconfig.app.json`,可以创建一个(内容可以参考上面的示例)。这样,错误应该就能解决。相关问题:1.如何配置Vue3项目中的TypeScript?2.tsconfig.json中的`extends`和`references`有什么区别?3.Vite项目中,如何为不同的环境配置TypeScript?</think>### 解决找不到 `@vue/tsconfig/tsconfig.web.json` 文件的问题 在 Vue 3 + TypeScript + Vite 项目中,当 `tsconfig.json` 尝试继承 `@vue/tsconfig/tsconfig.web.json` 但找不到该文件时,通常是由于以下原因: #### 根本原因分析 1. **过时配置引用**: `@vue/tsconfig` 是 Vue CLI 时代的遗留包,**Vite 官方项目模板不再使用它**(参考引用[2][3])。 2. **配置文件结构变化**: Vite 项目默认使用分层配置: - `tsconfig.json`:根配置(通常为空,仅引用其他配置) - `tsconfig.app.json`:应用代码配置 - `tsconfig.node.json`:Node/Vite 配置文件配置(如 `vite.config.ts`) #### 解决方案 **步骤 1:修改 `tsconfig.json`** 移除对 `@vue/tsconfig` 的依赖,改为引用本地配置: ```json // tsconfig.json { "files": [], "references": [ { "path": "./tsconfig.node.json" }, // 配置 Node 环境 { "path": "./tsconfig.app.json" } // 配置浏览器环境 ] } ``` **步骤 2:修复 `tsconfig.app.json`** 删除无效的 `extends` 字段,直接配置规则: ```json // tsconfig.app.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "strict": true, "jsx": "preserve", "moduleResolution": "Node", "esModuleInterop": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "types": ["vite/client"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"], "exclude": ["node_modules"] } ``` **步骤 3:验证 `tsconfig.node.json`** 确保 Vite 配置文件的编译规则: ```json // tsconfig.node.json { "compilerOptions": { "composite": true, "module": "ESNext", "moduleResolution": "Node", "allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"] } ``` #### 验证修复 1. 重启 IDE 和开发服务器(`npm run dev`) 2. 删除 `node_modules/.cache/vite` 清除缓存 3. 检查错误是否消失 > **关键点**:Vite 官方模板不再依赖 `@vue/tsconfig`,直接使用本地配置文件即可(参考引用[2][3])。 --- ### 相关问题 1. **Vue 3 + Vite 项目中如何正确配置 TypeScript 路径别名?** [需配置 `baseUrl` 和 `paths`,见 `tsconfig.app.json` 示例] 2. **`tsconfig.node.json` 和 `tsconfig.app.json` 的核心区别是什么?** [前者针对 Node 环境(如 Vite 配置),后者针对浏览器代码(参考引用[3])] 3. **如何为 Vite 项目添加全局类型声明?** [在 `src` 目录创建 `env.d.ts` 并声明模块类型] 4. **Vue 3 项目升级后出现 TypeScript 配置冲突如何解决?** [检查配置文件继承链,移除过时的 `extends` 字段] [^1]: tsconfig.jsontsconfig.app.json文件解析(vue3+ts+vite) [^2]: 了解ts配置项,根据vite项目了解typescript配置文件 [^3]: tsconfig.jsontsconfig.node.jsontsconfig.app.json有什么区别 [^4]: Typescript tsconfig.json全解析
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值