打字稿-使用“ @”符号导入自定义类

Question

当我们以以下方式导入包时，我已经看到了

import { SharedModule } from '@shared/shared.module';

在这种情况下，

@shared 是指位于我们项目中的文件夹

/src/shared

我希望避免以经典方式（一开始就使用点和斜线）（相对路径法）导入类，例如

import { SharedModule } from './shared/shared.module';

有人知道如何实现这一目标吗？

Answer 1

基本上，您正在寻找名为alias的东西。

要使用别名，我们必须像这样将baseUrl和path属性添加到tsconfig.json文件中-

{
  "compilerOptions": {
    "...": "reduced for brevity",

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

因此，现在您可以使用@app或@env导入文件。

有关更多详细信息，请参阅这篇很棒的文章。

• https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81#3144

Answer 2

在您的tsconfig.json中，将其添加为以下路径：

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

您将能够将shared模块导入为：

import { SharedModule } from '@shared/shared.module';