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

Если вы не знаете, как создать проект TypeScript, ознакомьтесь с этой статьей.

Вы когда-нибудь видели подобное выражение импорта?

import { formatName }  from '../../helpers/format-name'

Эти непоследовательные относительные пути выглядят уродливо и превращают обслуживание кода в кошмар!

Представьте, что однажды вам нужно обновить структуру каталогов, что означает, что нужно изменить часть или все относительные пути. Хотя большинство IDE могут изо всех сил пытаться обновить ссылки, это не всегда делает это правильно ...

Не волнуйтесь, это руководство вам на помощь.

Обзор

Мы хотели бы сократить этот код:

import { formatName }  from '../../helpers/format-name'

к этому:

import { formatName }  from '~/helpers/format-name'

Где ~ обозначает каталог src.

Шаг 1

Давайте создадим фиктивный User класс модели и formatName функцию. В корне проекта:

touch src/app/models/User.ts src/helpers/format-name.ts

Добавьте следующий код в src/app/models/User.ts:

И следующее в src/helpers/format-name.ts:

В src/handlers.ts импортируйте модель User:

import { User } from "./app/models/user";

И измените функцию rootHandler следующим образом:

export const rootHandler = (_req: Request, res: Response) => {
  const user = new User();
  return res.send(`Hi ${user.fullName}, API is working 🤓`);
};

Теперь запустите yarn dev, вы должны увидеть эту ошибку:

Компилятор TS не понимает, что означает ~, поэтому мы должны сообщить ему об этом на следующем шаге.

Шаг 2

Мы собираемся внести незначительные изменения в tsconfig.json. В свойстве paths добавьте еще одно определение пути, указав папку src:

...
    "paths": {
       ...
       "~/*": ["src/*"]
    },
...

Выполните yarn dev, и все работает! Продолжайте, запустите yarn build && yarn start для производства. Но, к сожалению, снова выдается ошибка:

Объяснение состоит в том, что вы сообщаете компилятору TS только символ ~, но node бегун все еще не понимает, что это такое. Еще раз дадим знать этому парню.

Шаг 3

Чтобы он заработал в продакшене, нам понадобится пакет link-module-alias:

yarn add link-module-alias

Добавьте это свойство в package.json:

...
  "_moduleAliases": {
    "~": "dist"
  }
...

По сути, идея здесь в том, что мы используем link-module-alias для инициализации символической ссылки на dist каталог.

В сценарии start выполните команду link-module-alias:

"start": "link-module-alias && node dist/index.js",

Теперь снова запустите yarn dev, и он должен работать. Запустите yarn build && yarn start, и консоль тоже не должна выдавать ошибок. Посмотрим, работает ли это в браузере:

Если вы используете VS Code (что я также настоятельно рекомендую при работе с TS), псевдонимы появятся в раскрывающемся списке автозаполнения:

Заключение

Псевдоним модуля сэкономит ваше время и избавит вас от необходимости иметь дело с ../ splattered повсюду. Еще одно большое преимущество использования этого пакета заключается в том, что ему не нужны перехватчики времени выполнения для точки входа вашего приложения, как в большинстве решений. Перехватчики времени выполнения могут изменить поведение импорта по умолчанию, добавить уровень ненужных вычислений и сложности в приложение, и их следует использовать с осторожностью.