12 советов по внедрению TypeScript в React-приложениях

12 советов по внедрению TypeScript в React-приложениях

React – это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов, а TypeScript – типизированное надмножество JavaScript. Объединяя их, мы создаем пользовательские интерфейсы, используя типизированную версию JavaScript. Это означает большую безопасность и меньшее количество ошибок, отправляемых во внешний интерфейс.

Не существует единственного правильного способа написания кода React с использованием TypeScript. Как и в случае с другими технологиями, если ваш код компилируется и работает, вы, вероятно, что-то сделали правильно.

Подготовка компонентов к совместному использованию с помощью TypeScript

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

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

Настройка проекта и tsconfig.json

Самый быстрый способ запустить приложение React/TypeScript – использовать create-react-app с шаблоном TypeScript:

tsconfig.json это файл конфигурации TypeScript. Файл содержит первоначальные настройки, ниже приведем несколько параметров с пояснениями:

Дополнительные рекомендации исходят от сообщества response-typescript-cheatsheet , а объяснения взяты из документации по параметрам компилятора в официальном справочнике TypeScript.

Enums

Enums определяет набор связанных констант как часть единой сущности.

Интерфейсы и типы

Что следует использовать – интерфейсы или псевдонимы типов? Хотя эти сущности концептуально различны, на деле они очень похожи:

  • обе могут быть продлены;
  • обе могут использоваться для определения формы объектов;
  • обе они могут быть реализованы одинаково;

Единственная функция интерфейсов, которую не делают псевдонимы типов – это объединение деклараций.

Расширение элементов HTML

Иногда ваши компоненты работают как собственные HTML-элементы. В таких случаях лучше определить тип компонента как собственный элемент HTML или его расширение.

Типы событий

React имеет собственный набор событий, поэтому вы не можете напрямую использовать события HTML. Однако у вас есть доступ к событиям пользовательского интерфейса. Убедитесь, что ссылаетесь на них напрямую или просто не забудьте импортировать их из React следующим образом:

Мы также можем использовать для ограничения элементов Generics с конкретным обработчиком событий.

Также можно применять объединения, чтобы разрешить повторное использование обработчика несколькими компонентами:

Определение интегрированного типа

Стоит упомянуть файлы index.d.ts и global.d.ts в React. Оба они устанавливаются, когда вы добавляете React в свой проект. Эти файлы содержат определения типов и интерфейсов: чтобы понять свойства или доступность конкретного типа, вы можете открыть эти файлы и просмотреть их содержимое.

<span> index.d.ts</span>index.d.ts

Там вы увидете небольшой раздел файла index.d.ts , показывающий подписи для функции createElement .

ESLint/Prettier

Чтобы гарантировать, что ваш код соответствует правилам проекта, а стиль согласован, рекомендуется настроить ESLint и Prettier :

  • Установите необходимые зависимости для разработчиков:
  • Создайте файл .eslintrc.js в корне и добавьте следующее:
  • Добавьте зависимости Prettier:
  • Создайте файл .prettierrc.js в корне и добавьте в него следующий код:
  • Обновите файл .eslintrc.js :

Расширения и настройки кода VS

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

Установите ESLint и Prettier для VS Code. Это позволит ESLint легко интегрироваться с вашим редактором.

Затем обновите настройки, добавив следующий код в свой .vscode/settings.json :

Хуки, вроде useState , получают параметр и правильно возвращают состояние и функцию для его установки.

Вы можете принудительно установить тип или интерфейс начального значения состояния, например, так:

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

Обработка событий формы

Один из наиболее распространенных случаев – это правильный ввод using в поле ввода onChange . Вот пример:

Расширение свойств компонентов

Можно расширить свойства, объявленные для одного компонента, и задействовать их в другом. Давайте сначала посмотрим, как использовать type:

Если вы использовали interface, то можно применить extends, чтобы расширить его, но придется внести пару изменений:

Сторонние библиотеки

Мы часто включаем сторонние библиотеки в проекты React и TypeScript. В таких случаях стоит посмотреть, есть ли пакет @types с определениями типов:

Пространство имен @types зарезервировано для определений типов пакетов. Они живут в репозитории под названием DefinitherTyped , который частично поддерживается командой TypeScript, а частично – сообществом.

Итоги

Совместное использование React и TypeScript требует некоторого обучения из-за объема информации, но в долгосрочной перспективе затраты времени окупаются. В своей публикации мы опирались на лучшие практики из статей Джо Превайта , Фернандо Дольо и Мартина Хохеля . Мы постарались осветить самые полезные приемы и моменты, которые помогут использовать TypeScript как часть инструментальной цепочки React. Больше информации вы найдете в официальном справочнике к TypeScript или в публикациях « Библиотеки программиста ».