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

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


1、代码检查相关配置

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "noImplicitAny": true
  5. }
  6. }
  7. // index.ts
  8. function greet(name) {
  9. console.log(`Hello, ${name}!`);
  10. }
  11. greet("World");

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

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

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "strictNullChecks": true
  5. }
  6. }
  7. // index.ts
  8. let x: string;
  9. x = null;

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

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

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "noUnusedLocals": true,
  5. "noUnusedParameters": true
  6. }
  7. }
  8. // index.ts
  9. function greet(name: string, age: number) {
  10. console.log(`Hello, ${name}!`);
  11. }
  12. greet("World", 18);

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

  1. error TS6133: 'age'

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "noImplicitReturns": true
  5. }
  6. }
  7. // index.ts
  8. function greet(name: string) {
  9. if (name) {
  10. return `Hello, ${name}!`;
  11. }
  12. }
  13. greet("World");

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

  1. error TS7030: Not all code paths return a value.

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "noFallthroughCasesInSwitch": true
  5. }
  6. }
  7. // index.ts
  8. let x = 1;
  9. switch (x) {
  10. case 1:
  11. console.log("x is 1");
  12. case 2:
  13. console.log("x is 2");
  14. break;
  15. }

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

  1. error TS7029: Fallthrough case in switch.

2、工程相关配置

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "baseUrl": "./src",
  5. "paths": {
  6. "@/*": ["*"]
  7. }
  8. }
  9. }
  10. // index.ts
  11. import { greet } from "@/greeting";
  12. greet("World");

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

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "outDir": "./dist"
  5. }
  6. }

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

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "outDir": "./dist",
  5. "rootDir": "./src"
  6. }
  7. }

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

2.3 “include” 和 “exclude”
如果你希望指定 TypeScript 编译器编译哪些文件,可以使用 “include” 和 “exclude” 配置。例如:

  1. // tsconfig.json
  2. {
  3. "compilerOptions": {
  4. "outDir": "./dist",
  5. "rootDir": "./src"
  6. },
  7. "include": [
  8. "./src/**/*.ts"
  9. ],
  10. "exclude": [
  11. "./src/**/*.test.ts"
  12. ]
  13. }

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

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


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