与打字稿反应时的绝对导入问题

发布于 2025-01-26 15:50:56 字数 2093 浏览 4 评论 0原文

我一直在浏览有关此的帖子和帖子，但无法修复它。他们都表明几乎相同：注意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我试图导入useprofestionalOonboarding hook> hook as

import upprofsionalOnOonboard从'@hooks/@hooks/use useProfsionalOnonboarding/indeexionalonboard/index''''@hooks'' ;

我的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/hookshable']，“@hooks/*”：[“ src/ui/hooks*） “] “@hooks/*”：[。在有或没有符号的情况下尝试，没有区别。

前方有很多工作，还有一个丑陋的机会，必须进行蚂蚁的工作，以通过每个文件重新计算“ ../ ../”。我渴望帮助。至少有一些调整或调试的方式。

顺便说一句，我正在使用原子作为文本编辑器。

谢谢！

原文

I've been wandering through posts and posts about this and haven't been able to fix it. They all state pretty much the same: take notice of tsconfig.json's nesting, correctly set the baseUrl and explicitely mention filenames if were using index files. But I can't get my path aliases to work.

As I'm refactoring this project, this is getting necessary as the previous developer's dot-dot-dash hell is driving me crazy.

An excerpt from my project's structure:

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

Now in ProOboardingServicesAvailability.tsx I'm trying to import the useProfessionalOnboarding hook as

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

My tsconfig.json being

{
  "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" ]
}

However I keep getting "Cannot find module or its correspondent type declarations".

I tried some other paths mappings as "@hooks/*": [ "./ui/hooks*" ], "@hooks/*": [ "src/ui/hooks*" ] "@hooks/*": [ "./src/ui/hooks*" ], none worked. Tried with and without the at-symbol, no difference.

There's a ton of work ahead and a small hideous chance of having to do the ant work of going through each file re-counting the '../'s. I crave for help. At least some way of tweaking or debugging.

btw I'm using Atom for text editor.