TypeScript : how to NOT use relative paths to import classes?

在 TypeScript 中，避免使用相对路径进行导入，可以通过设置 tsconfig.json 文件中的 baseUrl 和 paths 选项来实现。这种方法可以让我们使用基于项目根目录的绝对路径或自定义的别名来导入模块，从而提高代码的可维护性和可读性。下面是如何配置这些选项的详细步骤：

1. 设置 baseUrl

baseUrl 是一个基本目录，用于解析非相对模块的名称。设置 baseUrl 通常指向项目的根目录或 src 目录。

示例 tsconfig.json 配置:

json
{
  "compilerOptions": {
    "baseUrl": "./src",  // 这里假设源文件位于 src 目录下
  }
}

2. 使用 paths 配置别名

当我们设置了 baseUrl 之后，可以进一步使用 paths 选项定义路径映射。这些映射会根据 baseUrl 的相对路径解析。使用 paths 可以创建自定义的路径别名来避免复杂的相对路径。

示例 tsconfig.json 配置:

json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@models/*": ["models/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

3. 使用别名进行模块导入

配置好 baseUrl 和 paths 后，我们可以在项目中使用设置的别名导入模块，这会使导入路径更加清晰和简洁。

typescript
// 假设我们有一个 User 类在 src/models/user.ts
import { User } from '@models/user';

// 使用别名导入工具函数
import { calculateAge } from '@utils/calculator';

4. 注意事项

• 确保 TypeScript 编译器能正确解析这些别名，你可能还需要为运行时环境或打包工具（如 Webpack、Jest 等）配置相应的路径解析规则。
• 对于 paths 配置，确保遵循 baseUrl 的相对路径规定，避免导入错误。

总结

通过配置 tsconfig.json 中的 baseUrl 和 paths，我们可以有效地替代复杂的相对路径导入，使用更简洁、更有语义的路径别名进行模块导入。这样做不仅增强了项目的可维护性，还提高了开发效率。