TypeScript的exclude配置详解|极客笔记

TypeScript的exclude配置详解

1. 引言

TypeScript是一种强类型的编程语言，它是JavaScript的超集，可以在编写JavaScript代码的同时提供静态类型检查和其他特性。在使用TypeScript时，我们可以通过配置文件tsconfig.json来定义编译器的行为。在tsconfig.json中，有一个exclude字段，可以用来排除某些文件或文件夹不参与编译。

本文将详细介绍tsconfig.json中的exclude配置，并提供一些示例代码来说明其用法和效果。

2. exclude配置的作用

在tsconfig.json中，exclude字段用来定义哪些文件或文件夹不参与编译。当我们运行tsc命令编译TypeScript代码时，编译器会忽略exclude中定义的文件或文件夹。

这在实际开发中非常有用，有时我们可能有一些用于调试或测试的文件，或者一些第三方库的类型声明文件，它们不需要参与编译生成最终的JavaScript文件。通过使用exclude字段，我们可以告诉TypeScript编译器忽略这些文件，从而提高编译速度。

3. exclude字段的语法

在tsconfig.json中，exclude字段是一个字符串数组，每个字符串代表一个匹配规则。这些规则可以是以下几种形式：

单个文件或文件夹的相对或绝对路径
通配符模式

3.1 单个文件或文件夹的路径

如果要排除一个或多个特定的文件或文件夹，可以使用它们的相对或绝对路径。相对路径是相对于tsconfig.json所在的目录来解析的，路径可以使用正斜杠（/）或反斜杠（\\）分隔。

以下是一些示例：

{
  "exclude": [
    "src/test.ts",
    "src/testFolder"
  ]
}

在上面的示例中，src/test.ts和src/testFolder都将被排除在外，不会参与编译。

3.2 通配符模式

通配符模式是一种简便的方式，可以根据特定的模式来匹配多个文件或文件夹。在TypeScript的exclude配置中，可以使用三种通配符：

* 匹配任意字符（不包括路径分隔符）
**/ 递归匹配任意路径
? 匹配任意单个字符

以下是一些示例：

{
  "exclude": [
    "src/**/test.ts",
    "src/test?.js"
  ]
}

在上面的示例中，src目录下任意路径中的test.ts文件都会被排除在外，以及src目录下的test1.js和test2.js文件也会被排除。

4. exclude的注意事项

在使用exclude配置时，有一些需要注意的事项：

exclude字段的匹配规则是对文件的相对或绝对路径进行匹配的。如果在tsconfig.json中定义的路径与要排除的文件或文件夹路径不匹配，它们将不会被排除。
exclude字段不会排除在files字段中显式指定的文件。如果想排除files中的文件，可以使用exclude字段的通配符模式。
exclude字段不会影响编译时的错误检查。即使排除了文件，编译器仍然会检查引用或导入这些被排除文件中的类型和声明。
exclude字段中可以使用正则表达式。例如："exclude": ["^src/test.ts$"]。

5. 示例代码及效果说明

为了更好地说明exclude配置的效果，这里给出一个示例项目的目录结构：

project
├─ src
│  ├─ main.ts
│  ├─ test.ts
│  └─ util
│     └─ helper.ts
├─ typings
│  └─ index.d.ts
└─ tsconfig.json

示例项目的tsconfig.json内容如下：

{
  "compilerOptions": {
    "target": "es6",
    "outDir": "dist"
  },
  "exclude": [
    "src/test.ts",
    "typings"
  ]
}

通过以上配置，编译器会排除src/test.ts文件和typings文件夹，不进行编译。

在这个示例项目中，src/main.ts文件内容如下：

import { greeting } from "./util/helper";
console.log(greeting("TypeScript"));

src/util/helper.ts文件内容如下：

export function greeting(name: string): string {
  return `Hello, ${name}!`;
}

运行tsc命令进行编译后，dist目录下生成的main.js文件内容如下：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var helper_1 = require("./util/helper");
console.log(helper_1.greeting("TypeScript"));

如我们所预期的，test.ts文件和typings文件夹没有参与编译，不会生成对应的JavaScript文件。