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

对于组件库

如果你正在处理一个返回UI组件的库(如react-bootstrap或antd)，那么这应该适合你。

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

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

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]/...";

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

使用这个检出编译器操作

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

“baseUrl " src "

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

Alejandros的答案对我有用，但是当我在webpack 4中使用awesome-typescript-loader时，我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析

如果你正在寻找用@引用根文件夹的最简单的例子，这将是它:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/utils/logUtils';

或者如果你甚至没有src文件夹，或者想要显式地将它包含在导入中，这也可以工作:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';