Короткие пути импорта TypeScript в Angular9

При работе с Angular импорт файлов в TypeScript - это то, что мы делаем довольно часто. Когда мы импортируем файлы из других родительских каталогов, IDE обычно разрешает пути к файлам импорта. Кроме того, когда мы создаем приложение Angular, компилятор TypeScript компилирует код и создает окончательный пакет JavaScript с помощью Webpack. Поскольку эти важные шаги выполнены, большинство из нас не будет беспокоиться об улучшении этих путей импорта.

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

Почему так важно стандартизировать пути импорта TypeScript?

Существует несколько причин, по которым вам следует настроить псевдонимы путей импорта для вашего проекта Angular.

Выглядит хорошо

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

import { Component, OnInit } from '@angular/core';
import { ArticleForm } from '../../../views/article-form/article-form';

Этот код изменится на следующий, как только мы добавим псевдоним пути для представлений.

import { Component, OnInit } from '@angular/core';
import { ArticleForm } from '@views/article-form/article-form';

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

Определяет стиль кодирования

Другим важным аспектом наличия псевдонимов путей является то, что сами псевдонимы будут действовать как документ, в котором не смешиваются относительные и абсолютные пути. В противном случае, если разработчик выберет абсолютный или относительный путь на основе предпочтений, он не будет однородным. Следовательно, определяя набор псевдонимов, мы можем обновить стили кодирования, чтобы они соответствовали преобразованиям псевдонимов, определенным для проекта.

Помогает рефакторингу

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

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

• Шаг 1. В VSCode перейдите кFile>Preferences>Settings>User Settings
• Шаг 2: найдите свойство typescript.preferences.importModuleSpecifier и задайте его значение non-relative.

Совет: используйте Bit (Github) для совместного использования, документирования и управления повторно используемыми компонентами Angular из разных проектов. Это отличный способ увеличить повторное использование кода, ускорить разработку и создавать масштабируемые приложения.

Установите общие компоненты с помощью NPM или клонирования и измените с помощью Bit.

Настройка псевдонимов пути с помощью Angular9

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

Шаг 1. Определите нужные псевдонимы

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

• @app
• @views
• @containers
• @store
• @services

Шаг 2. Измените tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@angular/*": [ "../node_modules/@angular/*" ],
    "@app/*": ["app/*"],
    "@views/*": ["app/views/*"],
    "@containers/*": ["app/containers/*"],
    "@store/*": ["app/store/*"],
    "@services/*": ["app/services/*"]
},
...
}

Обратите внимание, что здесь настройка baseUrl необходима, чтобы IDE (я использовал VSCode) не распознала пути правильно для IntelliSense.

Шаг 3. Измените tsconfig.app.json

После выполнения шага 2 я обнаружил, что сборка Angular9 работает некорректно. Затем я понял, что проблема в файле tsconfig.app.json.

Разница в том, что я удалил следующий сегмент пути в tsconfig.app.json и переместил угловой на tsconfig.json.

"paths": {      
   "@angular/*": [ "../node_modules/@angular/*" ]
}

После удаления tsconfig.app.json не имеет ссылки на переопределение путей, где сборка Angular9 использует свойство paths, определенное в файле tsconfig.json.

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

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

Учить больше