React中使用TypeScript出现绝对导入问题

Question

我一直在浏览有关此问题的帖子，但没能解决它。它们都几乎说了相同的话：注意tsconfig.json的嵌套，正确设置baseUrl，并明确提到文件名（如果使用索引文件）。但是我的路径别名无法正常工作。

随着我重构这个项目，这变得必要，因为之前开发人员的点-点-划线地狱让我抓狂。

下面是我项目结构的摘录：

.
+-- tsconfig.js
+-- package.json
+-- src
|   +-- ui
|   |   +-- hooks
|   |   |   +-- useProfessionalOnboarding
|   |   |   |   +-- index.tsx
|   |   +-- components
|   |   |   +-- professional
|   |   |   |   +-- onboarding
|   |   |   |   |   +-- availability
|   |   |   |   |   |   +-- ProOboardingServicesAvailability.tsx
|   |   +-- pages
|   |   |   +-- ProfessionalOnBoarding
|   |   |   |   +-- ...
|   |   +-- types
|   |   |   +-- ...
|   +-- index.tsx
|   +-- App.tsx

现在在ProOboardingServicesAvailability.tsx文件中，我正在尝试将useProfessionalOnboarding钩子作为以下方式进行导入：

import useProfessionalOnboarding from '@hooks/useProfessionalOnboarding/index';

我的tsconfig.json文件如下：

{
  "compilerOptions": {

    "baseUrl": "src",
    "paths": {
      "@hooks/*": [
        "ui/hooks*"
      ],
    },

    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [ "src" ]
}

然而，我一直收到“找不到模块或其相应的类型声明”的错误信息。

我尝试了一些其他的路径映射，如"@hooks/*": [ "./ui/hooks*" ]、"@hooks/*": [ "src/ui/hooks*" ] 和 "@hooks/*": [ "./src/ui/hooks*" ]，但都没有起作用。我试过加上和不加上at符号，没有任何区别。

还有很多工作要做，可能还需要通过每个文件重新计算 '../' 的方式来完成。我需要帮助。至少需要一些调整或调试的方法。

顺便说一下，我正在使用Atom作为文本编辑器。

谢谢！

- Vladimir

---

当您编译/运行项目时，路径至少能正常工作吗？ - zenly

"@hooks/*": ["ui/hooks/*"] 应该这样翻译。 - Aluan Haddad

@AluanHaddad 谢谢。问题是笔误，但代码中没有错，实际上应该是 ui/hooks/*，但不起作用。 - Vladimir

@catgirlkelly 不是的，模块未找到：无法解析 '[projectPath]/src/apps/application/frontend/src/ui/components/professional/onboarding/availability' 中的 '@hooks/useProfessionalOnboarding/index'。当我改为相对路径时编译通过。 - Vladimir

Answer 1

我注意到在启动和编译步骤之间闪过一条消息。它说： compilerOptions.paths必须未设置（不支持别名导入）！它闪过得很快，我不得不截屏才能读到它。

查找后，我发现这篇评论，其中提到：

create-react-app不支持路径别名，短期内可能也不会支持。

我将使用baseUrl。

- Vladimir