找到答案了，不需要env文件，只需要修改tsconfig.json和webpack.config.js文件即可。

TS配置

添加了两个密钥：baseUrl和paths。将baseUrl设置为您的src或client目录。paths键将包含一个对象，其中包含您要在绝对路径中引用的任何内容。

{
  "compilerOptions": {
    ...
    "baseUrl": "./client",
    "paths": {
      "client/*": ["./client/*"]
    },
    ...
  },
  "include": ["./**/*.ts", "./**/*.tsx"]
}

Webpack配置

为“src”添加了一个别名（在我的例子中是“client”）。

module.exports = (env, options) => ({
  ...
  resolve: {
    alias: {
      client: path.resolve(__dirname, 'client/') // added this
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
})

用法要立即导入某些内容，我可以用“client”替换相对导入。这是：

import TableHeader from '../../../components/Table/TableHeader'

变成了：

import TableHeader from 'client/components/Table/TableHeader'

如果有更好的方法，请发布您的解决方案。😀

更新日期：🥧2022天

若要使用较新版本的tsc或create-react-app执行此操作

npx tsc --init

或

npx create-react-app my-new-app --template typescript

您只需要修改tsconfig.json中的baseUrl属性。如果您希望基目录成为根目录，则可以将baseUrl设置为.，如果您希望它成为源目录，则可以将src设置为src。

示例

文件树
第一个
您仍然可以指定路径，如果你愿意，但我发现baseUrl是足够的。

VS代码

如果你使用的是VS代码，你这样做，它不工作，你可能需要修补你的typescript.preferences.importModuleSpecifier设置。

正在更新“typescript.preferences.importModuleSpecifier”设置

1.转到VS代码设置（而不是GUI中的JSON文件）
1.搜索“类型脚本.首选项.导入模块说明符”
1.验证是否已选择“最短”或“非相对
“最短”表示只有在“非相对”导入比使用相对导入短时，才会使用该导入。

示例：最短导入与非相对导入

import Bar from "src/hello/world/foo/bar";
import Bar from "./foo/bar"; // <- this is shorter so it will use this even though it's relative

如果这样做不起作用，您可能需要重新启动ts服务器。您可以通过以下方法来执行此操作
1.打开TS文件
1.进入命令选项板
1.正在搜索“类型脚本：重新启动TS服务器”
希望能帮上忙。

我的解决方案是使用babel-plugin-module-resolver。为什么？因为它允许我这样做。

import Comp1 from 'components/comp1';
import AnotherAppComp from '@app/anotherComp';

它的配置更加灵活，允许别名或直接访问。
在babel.config.js中，添加此插件：

plugins: [
[
  require.resolve('babel-plugin-module-resolver'),
  {
    cwd: 'babelrc',
    extensions: [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
      '.android.js',
      '.android.tsx',
      '.ios.js',
      '.ios.tsx',
    ],
    root: ['.'],
    alias: {
      '@app': './another-app',  // path to your app folder
    },
  },
],
...
]

然后在tsconfig.json中，将 * 编译器选项 * 更改为：

"compilerOptions": {
...
    "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@app/*": ["./another-app/*"],
      "*": ["./src/*"],
    },
...
  }

我必须重新启动我的vscode才能让它工作，这是第一次。之后，当我编辑我不需要重新启动了。

为TypeScriptReact绝对导入

下面是它的工作原理。修改您的tsconfig.json文件，使其如下所示：

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

这里我写了一篇关于How to Use Absolute Imports in React的文章。对于你的情况，这是专门针对React Typescript的。因此，你需要在项目的根目录下添加//更新你的tsconfig.json文件。然后你需要更新文件中的编译器选项baseUrl。

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

VS代码足够聪明，能够理解tsconfig.json。

用于WebStrom / IntelliJ创意

在项目窗口中选择src文件夹并右击它。选择选项标记目录为，然后选择资源根选项。然后转到设置-〉编辑器-〉代码样式-〉JavaScript并选择导入选项卡。然后选中使用相对于项目、资源或源根的路径。
Webpack允许绝对导入已经很长时间了。当你给你的别名文件夹命名时，你需要使用PascalCase/CamelCase，因为这是Webpack遵循的惯例。