TSConfig 全解（下）：检查相关、工程相关配置-TypeScript入门指南

当前位置:　首页>> 技术小册>> TypeScript入门指南

在上一篇文章中，我们详细介绍了 tsconfig.json 中与编译器相关的配置。本篇文章将继续讨论 tsconfig.json 中与代码检查相关以及工程相关的配置，同时提供相应的代码示例。

-----------------------

**1、代码检查相关配置**

**1.1 "noImplicitAny"**
如果你希望 TypeScript 能够更加严格地检查隐式的 any 类型，可以将 "noImplicitAny" 设为 true。这样，如果有函数或者变量的类型没有明确指定或者无法推断出其类型，TypeScript 编译器将会报错。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

// index.ts
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

```

在上面的例子中，我们没有明确指定 name 参数的类型，也没有通过赋值表达式让 TypeScript 推断出其类型。因此，TypeScript 编译器将会报错：

```javascript
error TS7006: Parameter 'name' implicitly has an 'any' type.

```

**1.2 "strictNullChecks"**
如果你希望 TypeScript 能够更加严格地检查 null 和 undefined 的使用，可以将 "strictNullChecks" 设为 true。这样，如果一个变量的类型不包含 null 或 undefined，但是你在使用该变量时却将其赋值为 null 或 undefined，TypeScript 编译器将会报错。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

// index.ts
let x: string;
x = null;

```

在上面的例子中，我们将 x 的类型指定为 string，但是在赋值时将其赋值为 null。因此，TypeScript 编译器将会报错：

```javascript
error TS2322: Type 'null' is not assignable to type 'string'.

```

**1.3 "noUnusedLocals" 和 "noUnusedParameters"**
如果你希望 TypeScript 能够检测出未使用的变量和参数，可以将 "noUnusedLocals" 和 "noUnusedParameters" 设为 true。这样，如果你定义了一个变量或者函数参数，但是在后续的代码中没有使用到它，TypeScript 编译器将会报错。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

// index.ts
function greet(name: string, age: number) {
  console.log(`Hello, ${name}!`);
}

greet("World", 18);

```

在上面的例子中，我们定义了一个名为 age 的函数参数，但是在后续的代码中没有使用到它。因此，TypeScript 编译器将会报错：

```javascript
error TS6133: 'age'

```

**1.4 "noImplicitReturns"**
如果你希望 TypeScript 能够检测出函数中可能存在的隐式返回类型，可以将 "noImplicitReturns" 设为 true。这样，如果一个函数没有明确指定返回类型，并且也没有任何 return 语句，TypeScript 编译器将会报错。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "noImplicitReturns": true
  }
}

// index.ts
function greet(name: string) {
  if (name) {
    return `Hello, ${name}!`;
  }
}

greet("World");

```

在上面的例子中，我们定义了一个名为 greet 的函数，但是它并没有返回任何值。因此，TypeScript 编译器将会报错：

```javascript
error TS7030: Not all code paths return a value.

```

**1.5 "noFallthroughCasesInSwitch"**
如果你希望 TypeScript 能够检测出 switch 语句中可能存在的 case 穿透问题，可以将 "noFallthroughCasesInSwitch" 设为 true。这样，如果一个 case 语句中没有包含 break 或 return 语句，并且下一个 case 语句也不是空的，TypeScript 编译器将会报错。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true
  }
}

// index.ts
let x = 1;

switch (x) {
  case 1:
    console.log("x is 1");
  case 2:
    console.log("x is 2");
    break;
}

```

在上面的例子中，我们使用了一个 switch 语句来判断 x 的值，并在其中使用了两个 case 语句。但是第一个 case 语句中没有包含 break 或 return 语句，因此第二个 case 语句也会被执行。如果将 "noFallthroughCasesInSwitch" 设为 true，TypeScript 编译器将会报错：

```javascript
error TS7029: Fallthrough case in switch.

```

**2、工程相关配置**

**2.1 "baseUrl" 和 "paths"**
如果你在工程中使用了大量的相对路径，可以使用 "baseUrl" 和 "paths" 配置来简化路径的书写。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

// index.ts
import { greet } from "@/greeting";

greet("World");

```

在上面的例子中，我们将 "baseUrl" 设为 "./src"，并将 "paths" 配置设为 { "@/*": ["*"] }。这样，我们就可以使用 @/greeting 来代替 ./src/greeting。注意，"@/*": ["*"] 中的 * 是一个通配符，表示任意路径。你也可以使用具体的路径来代替 *，例如 ["components/*"]。

**2.2 "outDir" 和 "rootDir"**
如果你希望将 TypeScript 文件编译成 JavaScript 文件，并将输出文件保存到指定的目录中，可以使用 "outDir" 配置。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

```

在上面的例子中，我们将 "outDir" 设为 "./dist"，这样 TypeScript 编译器就会将编译后的 JavaScript 文件保存到 ./dist 目录中。如果你还希望指定 TypeScript 文件所在的根目录，可以使用 "rootDir" 配置。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

```

在上面的例子中，我们将 "rootDir" 设为 "./src"，这样 TypeScript 编译器就会将 ./src 目录中的 TypeScript 文件编译成 JavaScript 文件，并将输出文件保存到 ./dist 目录中。

**2.3 "include" 和 "exclude"**
如果你希望指定 TypeScript 编译器编译哪些文件，可以使用 "include" 和 "exclude" 配置。例如：

```javascript
// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./src/**/*.test.ts"
  ]
}

```

在上面的例子中，我们将 "include" 设为 ["./src/**/*.ts"]，这样 TypeScript 编译器就会编译 ./src 目录下所有的 TypeScript 文件。同时，我们将 "exclude" 设为 ["./src/**/*.test.ts"]，这样 TypeScript 编译器就会忽略 ./src 目录下所有的以 .test.ts 结尾的文件。

**小结**
本文介绍了 TypeScript 中常用的一些 tsconfig.json 配置项，并给出了相应的代码示例。通过合理配置 tsconfig.json，我们可以使 TypeScript 编译器能够更好地帮助我们检测代码中的问题，从而提高代码的质量和可维护性。同时，我们还可以使用 tsconfig.json 来简化路径的书写，指定输出目录和根目录，以及指定编译文件的范围，从而更好地管理我们的项目。

该分类下的相关小册推荐：

TypeScript 全面进阶指南

剑指TypeScript

TypeScript开发实战