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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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" 所有严格检查的总开关 (建议不写上面的直接打开这个,开启所有严格模式)

### 解决 `tsconfig.web.json` 文件未找到的问题 当遇到错误提示 “Cannot find base config file @vue/tsconfig/tsconfig.web.” 时,这通常意味着 TypeScript 编译器无法定位到指定的基础配置文件。为了修复此问题,可以采取以下几个措施: #### 修改 `tsconfig.json` 确保项目根目录下的 `tsconfig.json` 正确引用基础配置路径。如果使用的是 Vue CLI 或 Vite 创建的项目,则应确认如下设置是否存在并正确无误[^1]。 ```json { "extends": "@vue/tsconfig/tsconfig.web.json", "compilerOptions": { ... }, "include": [ "src/**/*.ts", "src/**/*.d.ts" ] } ``` #### 安装缺失依赖项 有时该问题可能是由于缺少必要的包引起的。尝试安装最新版本的相关开发依赖来解决问题: ```bash npm install --save-dev @vue/tsconfig ``` #### 检查工作区结构 对于多库或多应用的工作空间布局,需特别注意相对路径是否匹配实际位置。可能需要调整 `extends` 字段中的路径以适应具体环境需求。 #### 使用绝对导入 考虑采用基于项目的绝对路径方式来进行模块解析,这样能减少因相对路径引起的各种麻烦。可以在 `jsconfig.json` 或者 `tsconfig.json` 中加入以下配置选项: ```json { "baseUrl": ".", "paths": { "~/*": ["./src/*"] } } ``` 通过上述方法应该能够有效处理找不到 `@vue/tsconfig/tsconfig.web.json` 的情况。若仍然存在困难,建议查看官方文档获取更多帮助或向社区寻求支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值