如何简化 TypeScript 中的导入路径

我认为，作为使用 ES 模块的开发人员，我们都已经到了导入路径开始变得丑陋和难以维护的地步 - 特别是在大型代码库中。

只要添加几行代码，tsconfig.json我们就能修复这个问题。

假设我们正在将一个按钮导入到远离组件目录的嵌套文件中。

import Button from '../../../components/button'

这看起来并不是太糟糕，但如果您必须经常这样做，就会变得非常烦人。

跳到你的身边tsconfig.json并伸手到你的工具带里。

我们可以paths为 添加一个属性tsconfig.json。同时，我们还需要添加一个baseUrl，作为路径的基础。

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
          "@components/*": ["components/*"]
        }
    }

}

现在我们可以在我们的应用程序中使用这些路径。@components现在将映射到src/components/*。

因此我们之前导入的按钮现在可以像这样使用。

import Button from '@components/button'

它看起来没什么，但在 monorepo 中，它可以改善您作为开发人员的工作流程和效率。

这是一篇简短但希望对一些进口商有帮助的文章。