tsconfig配置之顶层配置说明

一诺滚雪球
934 阅读6分钟

前言

一直以来typescript配置项太多，让我头疼，并没有深入去了解，本次带着疑问将配置项逐个实践。

1. tsconfig配置文件作用

是用来配置TypeScript编译器的配置文件，作用如下：

  1. 设置编译选项：通过 tsconfig.json 文件中的 compilerOptions 属性，可以设置 TypeScript 编译器的选项，如目标版本、模块类型、源代码路径等。
  2. 提供给编辑器：许多编辑器（如 Visual Studio Code、WebStorm 等）都支持读取 tsconfig.json 文件，通过读取该文件中的设置，编辑器可以对 TypeScript 代码进行语法高亮、自动补全、错误检查等。
  3. 继承工程设置：如果在一个工程中存在多个 TypeScript 应用程序或库，它们可能有一些共同的编译选项。为了避免在每个项目中都配置相同的选项，可以创建一个顶级的 tsconfig.json 文件，并在每个具体项目中引用它。这样就可以避免重复进行编译选项的设置。
  4. 组织文件结构：通过 tsconfig.json 文件中的 include 和 exclude 属性，可以组织 TypeScript 项目的文件结构。通过指定哪些文件需要编译和哪些文件需要排除，可以轻松实现文件的组织和管理。

tsconfig中文官网

英文官网

tsconfig演练场

2. 如何生成、读取tsconfig.json配置文件，调试ts文件

2.1 生成tsconfig.json

首先安装全局的typescript，npm i -g typescript ,初始化配置文件使用tsc --init，会默认生成tsconfig.json文件。

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

2.2 tsconfig.json文件的读取机制

TypeScript编译器在读取tsconfig.json文件时，遵循以下顺序：

  1. 如果您使用命令行执行tsc命令，并指定了tsconfig.json文件的路径，则编译器将直接读取该文件。
  2. 如果您没有指定tsconfig.json文件的路径，则编译器将在当前目录中查找它。如果找到了该文件，则编译器将使用该文件进行编译。
  3. 如果在当前目录中没有找到tsconfig.json文件，则编译器将向上遍历目录树，直到找到一个包含tsconfig.json文件的目录为止。编译器将使用找到的最近的tsconfig.json文件进行编译。
  4. 如果在任何位置都没有找到tsconfig.json文件，则编译器将使用默认选项来进行编译（这通常是ES5、CommonJS模块、启用源映射和启用严格模式）。

例如：

文件结构如下：

├─tsconfig.json
├─src
|  ├─index.ts
|  ├─main
|  |  ├─index.ts
|  |  └tsconfig.json

tsconfig使用默认配置，将main/tsconfig.json的target设置为‘ES3’

index.ts分别写入

const inner = 'main' // 里面的index.ts
const outer = 'src'  // 外面的index.ts

现在进行以下操作：

  1. 在根路径下使用 tsc 进行编译，会将所有文件进行编译，读取的配置为当前目录下的tsconfig

image.png 2. 在./src/main 路径下 使用 tsc 进行编译，只编译main下的ts文件，读取的配置是当前目录下的tsconfig

image.png 3. 如果在./src/main 路径下 使用 tsc 进行编译，删除本路径下的tsconfig文件，会读取上层的tsconfig,此时src下的ts文件也会编译

image.png

  1. 如果都没有使用tsc需要指定参数

image.png

注意点：

如果只编译一个ts文件，例如 tsc ./src/index.ts，不会读取tsconfig的配置，使用默认的参数配置

image.png

2.3 如何在vscode中调试ts文件

  1. 全局安装npm i -g ts-node,ts-node可以直接运行ts文件
  2. 在vscode的调试点击生成launch.json文件
  3. 创建src/index.ts,launch.json文件写入如下内容即可调试
 {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "ts文件调试",
            "runtimeExecutable": "ts-node",
            "runtimeArgs": ["./src/index.ts"],
        }
    ]
}
  • version: 配置文件的版本号，目前为 "0.2.0"。
  • configurations: 调试器的具体配置，是一个数组。
  • type: 当前调试配置所使用的调试器类型，这里是 Node.js。
  • request: 告诉调试器在何时启动，并执行何种操作。这里是在启动时立即进行一次调试。
  • name: 调试配置项的名称，作为菜单项的显示名称。
  • runtimeExecutable: 运行此调试会话的可执行文件路径，这里是 ts-node。ts-node 是一个运行 TypeScript 的命令行工具，它会在与 node 交互之前编译你的 TypeScript 代码。

3.配置文件说明

3.1 主要配置说明：

image.png

    "compilerOptions": {}, //这个属性用来设置编译器的选项，如目标版本、模块类型、源代码路径等。
    "files": [], // files可以配置一个数组列表，里面包含指定文件的相对或绝对路径，编译器在编译的时候只会编译包含在files中列出的文件，如果不指定，则取决于有没有设置include选项，如果没有include选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用\* ? \*\*/ 等通配符,当指定了 `files` 属性时，`include` 和 `exclude` 属性会被忽略。
    "include": [],  // include也可以指定要编译的路径列表，但是和files的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符，比如"./src"即表示要编译src文件夹下的所有文件以及子文件夹的文件,它支持通配符（如 `*` 或 `**/*`）来匹配多个文件或目录。如果不指定该属性，则 TypeScript 编译器会编译当前目录下的所有 TypeScript 文件。
    "exclude": [],  // exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符
    "extends": "",   // extends可以通过指定一个其他的tsconfig.json文件路径，来继承这个配置文件里的配置，继承来的文件的配置会覆盖当前文件定义的配置。TS在3.2版本开始，支持继承一个来自Node.js包的tsconfig.json配置文件
    "compileOnSave": true,  // compileOnSave的值是true或false，如果设为true，在我们编辑了项目中的文件保存的时候，编辑器会根据tsconfig.json中的配置重新生成文件，不过这个要编辑器支持
    "references": [],  // 一个对象数组，这个属性用来指定当前项目依赖的其他 TypeScript 项目，以及它们之间的依赖关系。
    "buildOptions": {},//这个属性用来配置项目的构建选项，如输出构建信息、配置 sourcemap 等。
    "typeAcquisition": {},//这个属性用于为项目引入 TypeScript 类型文件。TypeScript 提供了一种称为“类型获取”的功能，它会自动从 npm 包管理器中下载必要的 d.ts 文件，并为项目提供类型信息。
    "watchOptions": {} //这个属性用来配置编译器监视文件变化的行为。可以通过设置这个选项来调整自动重新编译的行为、轮询间隔等。
avatar
文章
阅读
粉丝