Вы когда-нибудь задумывались, можете ли вы использовать общие интерфейсы, типы и функции между проектами 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 г.