Вы когда-нибудь задумывались, можете ли вы использовать общие интерфейсы, типы и функции между проектами TypeScript?

В настоящее время я разрабатываю проект, состоящий из двух отдельных приложений TypeScript, одно из которых представляет собой панель инструментов React.js, а другое — приложение Azure Function, написанное на Node.js. В рамках проекта панель мониторинга вызывает API в приложении "Функция Azure". Это заставило меня задуматься, так как я контролирую как источник данных, так и приложение, которое использует данные, есть ли способ, которым я могу использовать определенные интерфейсы между двумя проектами?

Ответ положительный, начиная с версии 3 TypeScript вы можете использовать Ссылки на проекты для обмена кодом между проектами TypeScript. Однако при использовании Project References в моем проекте я не смог найти никаких официальных примеров того, как их использовать — отсюда и этот пост!

Несмотря на то, что приведенная ниже реализация сработала для меня, если у вас есть какие-либо улучшения, сообщите мне об этом в комментариях.

Что такое Ссылки на проекты?

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

Как пользоваться

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

Директория проекта:

myproject 
- frontend 
  - app.ts 
  - interfaces 
    - IData.ts 
  - tsconfig.json 
- backend 
  - server.ts 
  - interfaces 
    - IData.ts 
  - tsconfig.json

Чтобы использовать один файл IData.ts между обоими проектами, мы можем использовать Project References.

Добавление общего проекта TypeScript

Мы начнем с создания третьего проекта TypeScript с именем common, добавления пустого файла tsconfig.json и копирования интерфейса IData.ts. Мы также можем удалить его из приложений frontend и backend. Таким образом, структура каталогов будет такой:

myproject 
- frontend 
  - app.ts 
  - tsconfig.json 
- backend 
  - server.ts 
  - tsconfig.json 
- common 
  - interfaces 
    - IData.ts 
  - tsconfig.json

Однако этого недостаточно. В tsconfig.json приложения common нам нужно добавить следующее:

Ключевые части:

  • declaration: создает файл объявления, который приложения frontend и backend могут использовать для ссылки на элементы в приложении common.
  • composite: гарантирует, что TypeScript может быстро определить, где найти результаты указанного проекта.
  • declarationMap: включает функции редактора, такие как «Перейти к определению» и «Переименовать», для прозрачной навигации и редактирования кода за пределами проекта в поддерживаемых редакторах.

Ссылка на общий проект в frontend/backend

Чтобы сослаться на общий интерфейс IData в приложениях frontend и backend, нам нужно внести простое изменение в оба их файла tsconfig.json. Добавьте свойство references к существующему tsconfig.json.

Создание приложений frontend/backend

Теперь, когда мы добавили ссылку на общее приложение, чтобы получить доступ к его интерфейсам, нам нужно скомпилировать приложения frontend и backend.

При этом убедитесь, что вы используете параметр --build, чтобы TypeScript автоматически создавал все проекты, на которые ссылаются.

Примечание. Если вы используете Next.js с TypeScript, мне не нужно этого делать. И next dev, и next build продолжали работать одинаково.

Импорт общего интерфейса в frontend/backend

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

Резюме

В этом посте я продемонстрировал, как использовать TypeScript Project References, чтобы использовать общий проект для общих интерфейсов, функций, типов и многого другого!

Отзывы о моем подходе приветствуются! Как я уже сказал выше, я не смог найти официальный пример, который показывал бы мне, как использовать ссылки на проекты, поэтому любые отзывы в комментариях помогут мне улучшить это руководство и мои собственные проекты TypeScript!

Спасибо за чтение!

Первоначально опубликовано на https://wallis.dev 30 марта 2021 г.