rootDir 和 baseUrl 是 TypeScript 配置文件（tsconfig.json）中的两个重要选项，它们用于指定项目中 TypeScript 文件的根目录和模块解析的基准路径。虽然它们在功能上有一些相似之处，但它们在应用场景和作用上有着明显的区别。
rootDir 的作用和应用场景rootDir 选项用于指定 TypeScript 项目中的根目录，即包含所有源代码文件的目录。当我们使用 rootDir 选项时，TypeScript 编译器将只处理位于根目录下的文件，而忽略其他目录中的文件。这对于大型项目来说非常有用，可以将源代码文件和其他资源文件（如测试文件、配置文件等）分开存放，并且只编译源代码文件，提高编译速度和效率。例如，假设我们有一个 TypeScript 项目的目录结构如下：- src - app - index.ts - utils - helper.ts- test - app.spec.ts- tsconfig.json我们可以在 tsconfig.json 文件中设置 rootDir 的值为 "src"，表示 src 目录是项目的根目录。TypeScript 编译器将只处理 src 目录下的文件，而忽略 test 目录中的文件。这样一来，我们可以将测试文件和源代码文件分开存放，只编译源代码文件，提高编译速度。具体的配置如下：
json{ "compilerOptions": { "rootDir": "src" }}baseUrl 的作用和应用场景baseUrl 选项用于指定模块解析的基准路径，即在导入模块时，TypeScript 编译器会根据 baseUrl 的值来解析模块的路径。这对于项目中使用了模块化开发（如使用 import/export 语法）的情况非常有用，可以简化模块导入的路径书写。例如，假设我们有一个 TypeScript 项目的目录结构如下：- src - app - index.ts - utils - helper.ts- tsconfig.json我们可以在 tsconfig.json 文件中设置 baseUrl 的值为 "src"，表示 src 目录是模块解析的基准路径。这样一来，在导入模块时，我们可以使用相对于 baseUrl 的路径，而不需要写完整的相对路径。具体的配置如下：
json{ "compilerOptions": { "baseUrl": "src" }}例如，在 index.ts 文件中，我们可以这样导入 helper.ts 文件：typescriptimport { helper } from "utils/helper";由于 baseUrl 的设置，编译器会自动解析为 "src/utils/helper"，无需写完整的相对路径。rootDir 和 baseUrl 的区别尽管 rootDir 和 baseUrl 都用于指定路径，但它们在功能和应用上有着明显的区别。- rootDir 用于指定项目的根目录，只编译根目录下的文件，忽略其他目录中的文件，提高编译速度和效率。- baseUrl 用于指定模块解析的基准路径，简化模块导入的路径书写，使项目结构更加清晰。rootDir 和 baseUrl 是 TypeScript 配置文件中的两个重要选项，它们分别用于指定项目的根目录和模块解析的基准路径。rootDir 用于限定编译器只处理根目录下的文件，提高编译速度；而 baseUrl 用于简化模块导入的路径书写，使项目结构更加清晰。在实际项目中，我们可以根据需求合理地配置这两个选项，以提高开发效率和维护性。案例代码假设我们有一个 TypeScript 项目的目录结构如下：- src - app - index.ts - utils - helper.ts- test - app.spec.ts- tsconfig.json我们可以在 tsconfig.json 文件中进行如下配置：
json{ "compilerOptions": { "rootDir": "src", "baseUrl": "src" }}这样一来，我们可以将源代码文件存放在 src 目录下，测试文件存放在 test 目录下。通过设置 rootDir，TypeScript 编译器只处理 src 目录下的文件；通过设置 baseUrl，我们可以在源代码文件中使用相对于 src 目录的路径进行模块导入，而不需要写完整的相对路径。例如，在 index.ts 文件中，我们可以这样导入 helper.ts 文件：typescriptimport { helper } from "utils/helper";这样，编译器会自动解析为 "src/utils/helper" 的路径，无需写完整的相对路径。这样的配置可以提高开发效率和代码可维护性。