Привет, ребята,

В этом посте я хотел бы дать вам некоторую информацию об одной из функций Typescript, которая может быть вам полезна в какой-то момент. Как видно из названия, речь пойдет о сопоставлении путей. Прежде всего, чтобы лучше понять концепцию, нам нужно понять, зачем она нам нужна. Если мы знаем проблему, становится легче понять решение и реализовать его.

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

1- Относительные пути, т.е. относительные расположения файлов/каталоги начинают становиться довольно сложными. Чтобы перейти к файлу, который вы ищете в каталоге вашего приложения, вам нужно подняться примерно на 3–5 слоев вверх, а также спуститься примерно на 3–5 слоев. Таким образом, становится все труднее найти нужный файл, что приводит к путанице и пустой трате времени.

2-Допустим, вы внесли некоторые изменения в расположение каталогов ваших файлов. Ты только что наступил на мину, мой друг. Строки импорта в этом файле, конечно же, начнут выдавать ошибки. Это ожидаемо, но хуже то, что другие файлы, импортирующие этот файл, также начнут выдавать ошибки отсутствия каталога. Особенно, если вы работаете в такой среде, как Angular, вы начнете получать ошибки типа «компонент x не является известным элементом». Причина этой ошибки в том, что один из импортов завис где-то, например, в модуле, а также все компоненты под этой строкой становятся нечитаемыми для Angular. Поэтому вы увидите, что ранее распознанные компоненты, директивы и модули начинают неожиданно давать сбой. Цепное дорожно-транспортное происшествие… Эта проблема специфична для Angular. В React это не так, поскольку в первую очередь нет модульной структуры. Конечно, вы можете создать аналогичную структуру и в React.

3- Еще одна проблема возникает, когда вы пытаетесь преобразовать некоторые из ваших файлов в модуль npm. Когда вы делаете это, все становится очень грязным. Вам нужно пересмотреть всю кодовую базу.

Все эти проблемы можно легко решить с помощью механизма сопоставления путей Typescript. В этом механизме вы назначаете определенные псевдонимы/пути к каталогам файлов в приложении, а затем вы можете вызывать эти псевдонимы везде. Я слышу, как вы говорите «это все?», давайте также объясним достижения одно за другим.

1- Вам больше не нужно находить относительный путь, когда вы хотите вызвать файл, который вы сопоставляете с путем, в других местах. Назовите псевдоним каталога правильно, и все. Нет необходимости делать исчерпывающий поиск внутри вашего репозитория. Кстати, когда вы передаете в код имена компонентов, которые используете в ts-файлах, Angular уже находит их сразу, или когда вы играете с путем, Angular просит вас исправить связанные пути в других файлах, но эти в одиночку не решить нашу проблему. Очень приятно использовать эти функции вместе с отображением путей. Вы не пожалеете, если воспользуетесь ими.

2- Когда вы вносите изменения в местоположение вашего файла, конечно, вам нужно исправить каталог этого изменения в карте путей. Теперь вам просто нужно сделать это. Поскольку другие файлы будут вызывать этот файл с псевдонимом имени каталога, в них не будет никаких изменений. Это самое большое преимущество отображения пути. Не будет вообще никаких раздражающих ошибок отсутствия каталога импорта.

3- Объяснение в третьем пункте более или менее такое же, как и во втором пункте. Нет необходимости повторять это.

Теперь поговорим о том, как этого можно добиться. Сначала перейдите к файлу tsconfig.json вашего приложения. Здесь мы собираемся поиграть с несколькими свойствами. Первое — это свойство baseUrl, а второе — свойство path.

Приведенный выше код взят из сложной структуры проекта. Я не хочу приводить очень простой пример. Теперь давайте объясним это по пунктам:

1- Ваш baseUrl относится к общему каталогу, стоящему перед вашими путями. Вы не можете использовать это свойство. Это не всегда необходимо, но в некоторых случаях это действительно полезно.

2- В свойстве paths значения ключа слева указывают псевдонимы вашего пути. Теперь вы будете вызывать свой файл с этим псевдонимом в приложении. И так будет везде. Разве это не похоже на рахат-лукум?

3- Значение в правой части свойства пути указывает на расположение рассматриваемого файла в приложении. Не связывайтесь с index.ts в конце, это связано с соглашением о файлах Angular. Система берет нужный модуль оттуда.

Это все на данный момент. Теперь вы знаете, как создавать многократно используемые пути к каталогам с помощью машинописного текста. До встречи в другой статье.