这可以在您的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

如果typescript + webpack 2 + at-loader正在使用，有一个额外的步骤(@mleko的解决方案只部分适用于我):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

TypeScript 2.0中的高级路径解析

2021年解决方案。

注意:CRA。最初，使用第三方库或为alias弹出应用程序的想法对我来说似乎很疯狂。然而，经过8个小时的搜索(并尝试了带有eject的变体)，结果发现这个选项是最不痛苦的。

步骤1。

yarn add --dev react-app-rewired react-app-rewire-alias

步骤2。 在你的项目根目录下创建config-override .js文件，并填充如下内容:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias({
    assets: './src/assets',
    '@components': './src/components',
  })(config)
}

步骤3。修复你的包裹。json文件:

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

如果@declarations不起作用，将它们添加到d.ts文件中。 例如: “@constants”:”。/src/constants'， =>在react-app-env.d中添加Ts声明模块@constants;

仅此而已。现在你可以像往常一样继续使用yarn或npm start/build/test命令。

完整版本的文档。

注意:文档中的“使用ts / js配置”部分对我不起作用。在构建项目时仍然存在“不支持别名导入”的错误。所以我用了一个更简单的方法。幸运的是，它起作用了。

使用这个检出编译器操作

我在文件中添加了baseUrl项目如下:

“baseUrl " src "

它工作得很好。因此，为项目添加基本目录。

这可以在您的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

这是相对路径 而不是下面的代码

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

我们可以避免“../../../../.. .”/“它看起来很奇怪，也不容易读。

Typescript配置文件有相同的答案。 只要指定baseUrl，配置就会照顾你的相对路径。

配置方法:tsconfig。Json文件添加以下属性。

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

最终会像下面这样

import { Something } from "@app/src/[browser/server/universal]/...";

它看起来简单，令人敬畏，更可读。