如果你使用的是路径，在使用tsc将typescript编译成纯javascript后，你需要将绝对路径改回相对路径才能工作。

目前最流行的解决方案是tsconfig-paths。

我试过了，但对于我复杂的设置，它不适合我。 此外，它在运行时解析路径，这意味着包大小和解析性能方面的开销。

所以，我自己写了一个解，tscpaths。

我认为它总体上更好，因为它在编译时替换路径。这意味着没有运行时依赖关系或任何性能开销。使用起来非常简单。您只需要在package.json中的构建脚本中添加一行。

这个项目非常年轻，所以如果你的设置非常复杂，可能会有一些问题。 它完美地适用于我的设置，尽管我的设置相当复杂。

看起来React已经更新了，不允许你在tsconfig中设置“路径”。json anylonger。

nice React只输出一个警告:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

然后更新您的tsconfig。Json，并为您删除整个“路径”部分。有个办法可以绕过这条路

npm run eject

这将通过添加配置和脚本目录以及build/config文件到您的项目中，弹出所有的create-react-scripts设置。这也允许通过更新{project}/config/*文件来对所有内容的构建、命名等进行更多的控制。

然后更新tsconfig.json

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

这可以在您的tsconfig上设置。json文件，因为它是一个TS特性。

你可以这样做:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

请记住，你想要引用的路径，它以你的baseUrl作为你所指向的路由的基础，这是强制性的，如文档所述。

字符“@”不是强制性的。

设置好之后，你可以像这样轻松地使用它:

import { Yo } from '@config/index';

你可能会注意到的唯一一件事是，智能感知在当前的最新版本中不起作用，所以我建议在导入/导出文件时遵循索引约定。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

如果你使用的是路径，在使用tsc将typescript编译成纯javascript后，你需要将绝对路径改回相对路径才能工作。

目前最流行的解决方案是tsconfig-paths。

我试过了，但对于我复杂的设置，它不适合我。 此外，它在运行时解析路径，这意味着包大小和解析性能方面的开销。

所以，我自己写了一个解，tscpaths。

我认为它总体上更好，因为它在编译时替换路径。这意味着没有运行时依赖关系或任何性能开销。使用起来非常简单。您只需要在package.json中的构建脚本中添加一行。

这个项目非常年轻，所以如果你的设置非常复杂，可能会有一些问题。 它完美地适用于我的设置，尽管我的设置相当复杂。

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

我不确定我们是否必须定义路径。但是在将baseUrl写入src之后 我可以像这样导入SRC文件夹下的所有文件夹

import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";

不要忘记在修改tsconfig.json后重新启动您的终端

用星号检查类似的解决方案

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