在上一篇文章中,我们详细介绍了 tsconfig.json 中与编译器相关的配置。本篇文章将继续讨论 tsconfig.json 中与代码检查相关以及工程相关的配置,同时提供相应的代码示例。
1、代码检查相关配置
1.1 “noImplicitAny”
如果你希望 TypeScript 能够更加严格地检查隐式的 any 类型,可以将 “noImplicitAny” 设为 true。这样,如果有函数或者变量的类型没有明确指定或者无法推断出其类型,TypeScript 编译器将会报错。例如:
// tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true
}
}
// index.ts
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");
在上面的例子中,我们没有明确指定 name 参数的类型,也没有通过赋值表达式让 TypeScript 推断出其类型。因此,TypeScript 编译器将会报错:
error TS7006: Parameter 'name' implicitly has an 'any' type.
1.2 “strictNullChecks”
如果你希望 TypeScript 能够更加严格地检查 null 和 undefined 的使用,可以将 “strictNullChecks” 设为 true。这样,如果一个变量的类型不包含 null 或 undefined,但是你在使用该变量时却将其赋值为 null 或 undefined,TypeScript 编译器将会报错。例如:
// tsconfig.json
{
"compilerOptions": {
"strictNullChecks": true
}
}
// index.ts
let x: string;
x = null;
在上面的例子中,我们将 x 的类型指定为 string,但是在赋值时将其赋值为 null。因此,TypeScript 编译器将会报错:
error TS2322: Type 'null' is not assignable to type 'string'.
1.3 “noUnusedLocals” 和 “noUnusedParameters”
如果你希望 TypeScript 能够检测出未使用的变量和参数,可以将 “noUnusedLocals” 和 “noUnusedParameters” 设为 true。这样,如果你定义了一个变量或者函数参数,但是在后续的代码中没有使用到它,TypeScript 编译器将会报错。例如:
// tsconfig.json
{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
// index.ts
function greet(name: string, age: number) {
console.log(`Hello, ${name}!`);
}
greet("World", 18);
在上面的例子中,我们定义了一个名为 age 的函数参数,但是在后续的代码中没有使用到它。因此,TypeScript 编译器将会报错:
error TS6133: 'age'
1.4 “noImplicitReturns”
如果你希望 TypeScript 能够检测出函数中可能存在的隐式返回类型,可以将 “noImplicitReturns” 设为 true。这样,如果一个函数没有明确指定返回类型,并且也没有任何 return 语句,TypeScript 编译器将会报错。例如:
// tsconfig.json
{
"compilerOptions": {
"noImplicitReturns": true
}
}
// index.ts
function greet(name: string) {
if (name) {
return `Hello, ${name}!`;
}
}
greet("World");
在上面的例子中,我们定义了一个名为 greet 的函数,但是它并没有返回任何值。因此,TypeScript 编译器将会报错:
error TS7030: Not all code paths return a value.
1.5 “noFallthroughCasesInSwitch”
如果你希望 TypeScript 能够检测出 switch 语句中可能存在的 case 穿透问题,可以将 “noFallthroughCasesInSwitch” 设为 true。这样,如果一个 case 语句中没有包含 break 或 return 语句,并且下一个 case 语句也不是空的,TypeScript 编译器将会报错。例如:
// 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 编译器将会报错:
error TS7029: Fallthrough case in switch.
2、工程相关配置
2.1 “baseUrl” 和 “paths”
如果你在工程中使用了大量的相对路径,可以使用 “baseUrl” 和 “paths” 配置来简化路径的书写。例如:
// 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” 配置。例如:
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist"
}
}
在上面的例子中,我们将 “outDir” 设为 “./dist”,这样 TypeScript 编译器就会将编译后的 JavaScript 文件保存到 ./dist 目录中。如果你还希望指定 TypeScript 文件所在的根目录,可以使用 “rootDir” 配置。例如:
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src"
}
}
在上面的例子中,我们将 “rootDir” 设为 “./src”,这样 TypeScript 编译器就会将 ./src 目录中的 TypeScript 文件编译成 JavaScript 文件,并将输出文件保存到 ./dist 目录中。
2.3 “include” 和 “exclude”
如果你希望指定 TypeScript 编译器编译哪些文件,可以使用 “include” 和 “exclude” 配置。例如:
// 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 来简化路径的书写,指定输出目录和根目录,以及指定编译文件的范围,从而更好地管理我们的项目。