在TypeScript中使用绝对路径进行导入

Question

我的目录结构如下：

|
|__src
|    |_components
|                |
|                |_A
|                  |_index.tsx
|
|
tsconfig.json
package.json

我想像这样导入A：

从 'src/components/A' 导入 { A }

我的 tsconfig.json 文件如下：

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es5", "es2015", "es2016", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "outDir": "dist",
    "removeComments": false,
    "skipLibCheck": true,
    "strict": true,
    "strictFunctionTypes": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": ["./node_modules/@types"],
    "types": ["node", "jest"],
    "paths": {
      "*": ["./node_modules/@types/*", "./types/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["./node_modules", "./dist", "src/**/*.test.ts", "src/**/*.test.tsx"]
}

但是导入不起作用，我得到了以下错误：

找不到模块“src/components/A”

- dagda1

Answer 1

在 tsconfig.json 中像这样定义 paths：

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

（并且您还必须通过文件名导入它）

import { A } from 'src/components/A/index'

根据评论，只要文件名为index（使用相对路径时我们可以跳过“/ index”），就无需按名称导入。

- Juraj Kocan

---

请注意，"src/": [中的尾随` 非常重要！ - handler

@eivindml 我不知道如何做。在一个文件夹中，你可以有多个文件... - Juraj Kocan

我希望在路径中不需要输入“src”。有没有办法更改上面的导入方式，仍然从./src导入，但是：import { A } from 'components/A/index'？ - Neil Gaetano Lindberg

我创建了一个超级简单的项目，用于调整设置直到它们正确。欢迎 fork 并制作一个可工作的示例！https://github.com/neillindberg/non-relative-path-tsconfig - Neil Gaetano Lindberg

这对我有用，你还需要将这个添加到jest.config.js文件中"moduleNameMapper": { "^src/(.*)$": [ "/src/$1" ], } - undefined

Answer 2

使用这个 tsconfig.json 配置，绝对路径导入在我的项目中可以正常工作:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

这是适用于CRA应用的完整tsconfig.json文件：

{
  "compilerOptions": {
    "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",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

- Pinka

---

对我来说，这会破坏 node_modules 的导入，因为它试图从 src 文件夹中访问。 - Conrad Kay

可能是其他某些设置影响了node_modules的导入。我添加了一个完整的tsconfig.json文件，适用于我的情况。 - Pinka

对我来说，我必须设置 "baseUrl": "./src"。 - Drew Daniels

@ConradKay，你需要在导入时省略掉src文件夹。例如，使用import { foo } from 'bar'而不是import { foo } from 'src/bar'。这实际上让我感到很烦恼，因为它使得很难辨别我的导入是来自库还是我自己编写的文件夹/代码。我目前正在尝试解决这个问题，你可以在这里查看：https://stackoverflow.com/questions/76980414/absolute-path-typescript-react-works-in-ide-linting-but-not-in-cra-runtime - Fiddle Freak