【TypeScript】tsconfig.json文件到底是干啥的?作用是什么?

本文介绍了tsconfig.json的基本概念,包括其作为TypeScript项目配置文件的作用,如何初始化和指定编译目录,以及文件结构。通过合理的配置,简化了大型项目中的编译流程。

参考学习博文:
掌握tsconfig.json

一、tsconfig.json简介

1、tsconfig.json是什么?

TypeScript 使用 tsconfig.json 文件作为其配置文件,当一个目录中存在 tsconfig.json 文件,则认为该目录为 TypeScript 项目的根目录

通常 tsconfig.json 文件主要包含两部分内容:

  • 指定待编译文件
  • 定义编译选项
2、tsconfig.json的作用是什么?

它是一个配置文件,由于通过tsc命令手动输入命令太繁琐,而我们开发的时候项目是一个庞大的,并且有许多文件,我们将所有需要编译的文件配置写在tsconfig.json里面,这样可以全部编译成我们目标的JavaScript

3、tsconfig.json的结构

按照顶层属性分类:
在这里插入图片描述
按功能结构分类:
在这里插入图片描述

二、如何使用tsconfig.json

1、初始化tsconfig.json文件

有两种方式创建tsconfig.json文件:

  • tsc --init 初始化tsconfig.json文件
  • 手动在根目录下创建tsconfig.json文件并填写配置项
2、指定需要编译的目录

在不指定文件夹或者文件名的情况下,tsc进行编译是默认从当前目录开始,寻找所有的.ts文件,并查找tsconfig.json文件,查找不到,会从当前目录下向上查找

可以通过--project指定需要开始编译的目录,并同级下需要tsconfig.json文件

TypeScript 项目中,`tsconfig.json` 文件用于配置编译器行为,包括模块解析、目标版本、严格模式等选项。当用户遇到 `importsNotUsedAsValues` 报错时,通常是由于 `import` 语句被 TypeScript 检查认为未被正确使用而导致的错误。该错误通常与 `importsNotUsedAsValues` 的类型检查规则有关。 ### 配置字段说明 `importsNotUsedAsValues` 是 TypeScript 编译器选项 `compilerOptions` 中的一个字段,用于控制如何处理仅用于类型注解的 `import` 语句。它有以下取值: - `"remove"`:默认值,仅用于类型注解的 `import` 语句会被移除。 - `"error"`:如果检测到仅用于类型注解的 `import` 语句未被使用,则抛出错误。 - `"preserve"`:保留所有 `import` 语句,即使它们未被用作值。 如果配置为 `"error"`,并且代码中存在仅用于类型注解的 `import` 语句而未被实际使用,TypeScript 会报错 [^3]。 ### 解决方法 1. **修改 `importsNotUsedAsValues` 配置** 在 `tsconfig.json` 文件中,将 `importsNotUsedAsValues` 设置为 `"remove"` 或 `"preserve"`,以避免报错。例如: ```json { "compilerOptions": { "importsNotUsedAsValues": "remove" } } ``` 2. **确保 `import` 被使用** 如果希望保留 `"error"` 设置,应检查代码中的 `import` 语句是否被正确使用。如果某个 `import` 仅用于类型注解,可以通过添加 `import type` 来明确表示它仅用于类型: ```ts import type { MyType } from './my-module'; ``` 3. **检查 `tsconfig.json` 是否生效** 如果修改配置后问题仍未解决,请确保 `tsconfig.json` 文件位于项目的根目录,并且没有被其他配置文件覆盖。可以通过运行以下命令验证 TypeScript 是否识别了配置文件: ```bash tsc --build --clean ``` 4. **IDE 缓存问题** 有时 IDE(如 VS Code)可能会缓存旧的编译配置,导致配置更改未生效。尝试重启 IDE 或清除缓存后再重新加载项目 [^3]。 5. **TSLint/ESLint 集成问题** 如果项目中集成了 `TSLint` 或 `ESLint` 插件,可能会导致额外的检查规则影响编译行为。检查 `tsconfig.json` 中的 `plugins` 字段,确保没有不必要的插件扰 [^3]。 ### 示例代码 以下是一个典型的 `tsconfig.json` 配置片段,用于解决 `importsNotUsedAsValues` 报错: ```json { "compilerOptions": { "module": "esnext", "target": "es5", "moduleResolution": "node", "strict": true, "noImplicitAny": false, "esModuleInterop": true, "skipLibCheck": true, "outDir": "./dist", "importsNotUsedAsValues": "remove" }, "include": ["src/**/*"] } ``` ### 验证配置是否生效 可以使用以下命令验证 TypeScript 编译器是否正确读取了 `tsconfig.json`: ```bash tsc --noEmit --watch ``` 该命令会启用监听模式,并输出编译器的诊断信息,有助于排查配置是否生效。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Triumph-light

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值