缩短 TypeScript 中的导入路径

最新推荐文章于 2023-02-13 16:52:19 发布

lio_zero

最新推荐文章于 2023-02-13 16:52:19 发布

阅读量942

点赞数 1

文章标签： typescript javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369705

版权

本文介绍了如何在TypeScript项目中利用tsconfig.json的路径映射功能，通过设置别名来实现绝对路径导入，从而简化导入语句，提高代码的可维护性。这种方法允许在改变目录结构时，无需手动更新导入路径，提升了开发效率。

摘要由CSDN通过智能技术生成

在 TypeScript 中，我们通常使用相对路径导入特定文件。以下是从 helper 和 services 文件夹导入多个文件的示例：

import { validator } from '../../../helpers/validator'
import { authService } from '../../../services/authService'

缺点是，当我们更改目录结构时，必须相应地更新这些导入。尽管 VSCode 等流行编辑器会自动更新路径，但这并不能确保该过程始终有效。

幸运的是，TypeScript 提供了使用绝对路径的能力。在 TypeScript 配置文件 tsconfig.json 中，我们可以在 path 属性下指示特定路径的别名。

例如，以下设置将在 src 文件夹中找到所有以 @ 开头的导入：

{
  "paths": {
    "@/*": ["src/*"]
  }
}

导入路径	完全相同的绝对路径
`@/helpers/validator`	`src/helpers/validator`
`@/services/authService`	`src/services/authService`

我们的 import 可以缩短如下：

import { validator } from '@/helpers/validator'
import { authService } from '@/services/authService'

例如，有些库遵循特定的目录结构模式，我们可以预先定义给定文件夹的路径：

{
  "paths": {
    "@helpers/*": ["src/helpers/*"],
    "@models/*": ["src/models/*"],
    "@services/*": ["src/services/*"]
  }
}

然后，可以将属于这些文件夹的文件的导入缩短如下：

import { validator } from '@helpers/validator'
import { userModel } from '@models/user'
import { authService } from '@services/authService'

关注