Отображение пути с помощью Typescript

Когда приложение Angular масштабируется до размера, состоящего из нескольких модулей, может стать трудным поддерживать удобочитаемость вашего импорта Typescript.

Вещи могут начать выглядеть некрасиво:

import {something} from '../../../../../shared/shared.service'

Конечно, вы должны поддерживать этот импорт автоматически с помощью своей IDE (с Webstorm: Оптимизировать импорт с помощью Ctrl + Alt + O. У меня это действие запускается автоматически каждый раз, когда я сохраняю файл, благодаря плагину сохранения действий. Код Visual Studio: Вот как это сделать)

Тем не менее, импорт не должен быть таким длинным. В Typescript есть решение под названием сопоставление путей.

Перейдите в файл tsconfig.json в своем проекте и в свойстве compilerOptions добавьте или отредактируйте конфигурацию путей, чтобы указать псевдонимы для всех ваших длинных путей:

"paths": {
  "stubs/*": [
    "./src/app/stubs/*"
  ],
  "state/*": [
    "./src/app/state/*"
  ],
  "shared/*": [
    "./src/app/shared/*"
  ]
}

Вышеупомянутое приводит к более короткому синтаксису импорта повсюду в вашем коде:

import {something} from 'shared/shared.service'

вместо того

import {something} from '../../../../../shared/shared.service'

Дополнительную информацию о сопоставлении путей можно найти в документации по Typescript: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Меня зовут Ален Шотар. Я эксперт Google Developer по Angular, а также консультант-основатель и тренер в Angular Training, где я помогаю командам разработчиков учиться и приобретать навыки работы с Angular.

Нужна помощь с Angular? Давай найдем время поговорить.

Если вам понравился этот пост, пожалуйста, похлопайте по нему или поделитесь им. Мы всегда ценим вашу помощь.