tsconfig配置之extends、references、typeAcquisition、watchOptions

一诺滚雪球
5,768 阅读4分钟

1. extends

可以继承另一个tsconfig.json的配置项，避免重复配置。

首先加载基本文件中的配置，然后由继承配置文件中的配置覆盖。在配置文件中找到的所有相对路径都将相对于它们源自的配置文件进行解析。 image.png

使用vite脚手架搭建的项目

tsconfig.json是项目的ts配置，而tsconfig.node.json是Vite的配置

image.png

2. references

references 选项允许你将一个 TypeScript 项目作为另一个项目的依赖项进行编译。

注意，references 选项必须与 composite 选项一起使用才能生效。具体来说，如果你想在 TypeScript 项目中使用 references 选项，你需要确保在该项目的 tsconfig.json 文件中设置了 composite 选项为 true。

案例：

假设有两个 TypeScript 项目 my-lib 和 my-app，它们的目录结构如下：

./
├─my-lib
|   ├─tsconfig.json
|   ├─tsconfig.tsbuildinfo
|   ├─src
|   |  └index.ts
├─my-app
|   ├─tsconfig.json
|   ├─src
|   |  └index.ts

my-lib定义了工具函数

// my-lib/src/index.ts
export const calc = {
add:(x: number, y: number): number=> x+y
}

my-lib的tsconfig

注意：composite 选项设置为 true，my-app的 references 选项才生效。

在这个 tsconfig.json 文件中，我们只需要设置 composite 和 outDir 两个选项。不需要设置 declaration 或者其他任何类型声明相关的选项，因为在我们要使用 references 选项将模块引入到其他项目时，编译器会自动为我们生成 d.ts 类型声明文件。

{
  "compilerOptions": {
    "composite": true,
    "module": "commonjs",
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*"
  ]
}

my-app依赖工具函数

// my-app/src/index.ts

import { calc } from '../../my-lib/src/index'

calc.add(1, 2)

my-app的tsconfig

{
	"compilerOptions": {
		"composite": true,                   
		"target": "ES6", 
		"outDir": "./dist",            
	},
        "references": [
            {
                "path": "../my-lib"
            }
        ],
        "include": [
            "./src/**/*"
        ],
}

在根目录下执行命令：

tsc --build my-app/tsconfig.json

编译器就会按照正确的顺序和依赖关系编译这两个项目。在编译 my-app 项目时，编译器会自动检测到 my-lib的依赖，并将其编译。

如果my-app不使用references定义：编译报错

image.png

使用references定义：

  1. 编辑器会自动识别
  2. 根目录编译，会自动编译my-lib

image.png

2. watchOptions(一般不使用)

  • excludeDirectories: 需要排除的目录列表。如果 TypeScript 监视器中的一个目录在该列表中，则不会监视该目录下的任何文件。该选项默认为空数组。
  • excludeFiles: 需要排除的文件列表。如果 TypeScript 监视器中的一个文件在该列表中，则不会监视该文件。该选项默认为空数组。
  • fallbackPolling: 使用文件系统事件时，此选项指定当系统用完本机文件观察程序和/或不支持本机文件观察程序时使用的轮询策略。
  • force: 布尔值，表示是否强制重新生成所有文件。默认值为 false。如果设置为 true，则 TypeScript 编译器将重新编译整个项目。
  • synchronousWatchDirectory: 布尔值，表示是否使用同步方式监视目录。默认值为 false。如果设置为 true，则 TypeScript 监视器将使用同步方式监视目录，并且不支持异步。
  • watchDirectory: 自定义监视目录的名称。默认值为 undefined。如果指定了该选项，则 TypeScript 监视器将使用该目录名代替默认的 node_modules 目录来监视依赖模块的变化。
  • watchFile: 自定义监视文件的名称。默认值为 undefined。如果指定了该选项，则 TypeScript 监视器将使用该文件名代替默认的 tsconfig.json 文件来监视 TypeScript 配置文件的变化。

3. typeAcquisition （不需要关注）

配置 "typeAcquisition" 对象用于控制 TypeScript 的自动类型获取（ATA）。它并不会为您自动安装 @types 包。相反，它会在 Visual Studio 和 Visual Studio Code 等支持的编辑器和 IDE 中自动下载并导入类型定义。

当您将 "typeAcquisition" 配置为以下选项时：

"typeAcquisition": {
  "enable": true,
  "include": ["lodash"]
}

TypeScript 将为编辑器提供一种机制来自动下载和导入 lodash 库的类型定义。这意味着在编辑器和 IDE 中，类型提示和自动补全应该正常工作。

然而，当您实际运行 TypeScript 编译器时（例如，通过运行 tsc 命令），编译器可能无法找到这些类型定义。要解决此问题，您需要手动安装相应的 @types 包。对于 lodash 库，您可以使用以下命令安装：

npm install --save-dev @types/lodash

这将安装 lodash 的类型定义，并将其添加到您的 package.json 文件中。此后，TypeScript 编译器应该能够正确识别和处理这些类型。

总之，typeAcquisition 对象主要用于简化在支持的编辑器和 IDE 中处理 JavaScript 库的类型的过程，但在运行编译器时，请确保手动安装所需的 @types 包。

配置exclude 是为了提高编译速度和减少不必要的下载。

avatar
文章
阅读
粉丝