Привет, Хабр! В последнее время комбинация React+TypeScript стала особенно популярной во фронтенд-сфере.
Соответственно, возрастает актуальность грамотной миграции с JavaScript на TypeScript, желательно в короткие сроки.
Сегодня мы хотели бы обсудить с вами именно эту тему.
Как безопасно создавать и внедрять компоненты React TypeScript в ваш проект React JS.
Почему вам может понадобиться перейти с JS на TS? Причин этому может быть огромное количество, но дело не в этом.
(Гипотетический) факт таков: вам нужно начать использовать TypeScript, и вам нужен простой способ реализовать его в своем проекте.
Причем все это нужно как-то сделать, не нарушая структуру всего существующего кода, и убедив команду в необходимости такого перехода.
Здесь будет продемонстрирован постепенный рефакторинг: как встроить компоненты React в другую базу кода, а затем использовать Bit для безопасного внедрения их в уже работающее приложение React JavaScript. .
Безопасное встраивание компонентов TS в проект JS с помощью Bit
Существует множество способов перехода с React JS на React TS. Цель этой статьи — показать, как это делается постепенно.
Подобный метод применим и в других случаях.
Основная идея состоит в том, чтобы максимально эффективно использовать компоненты React+, используя Bit для их изоляции друг от друга в собственной среде разработки Bit. В совокупности это позволяет собирать компоненты TS и безопасно внедрять их в полнофункциональное приложение React JS. Кусочек — это инструмент с открытым исходным кодом для извлечения компонентов из репозиториев Git. Bit позволяет собирать компоненты TS вне проекта, написанного на JS, предоставляя каждому автономную изолированную среду разработки, которая может работать в других проектах независимо от их конфигураций.
Затем вы можете просто создать версию и «побитово-импортировать» эти компоненты в свой JS-проект, и они будут работать.
Наряду с Bit существует Bit.dev – удаленный концентратор, в котором эти компоненты можно хранить для последующего повторного использования.
Мы сохраним компоненты TS в Bit.dev и оттуда введем их в наш проект React JS. 
Пример: поиск общих компонентов React в bit.dev
Пример использования
Для целей этой статьи мы рассмотрим пример, который во фронтенде сравним с классическим «hello world»: речь пойдет о приложении для планирования задач.Не волнуйтесь, я не собираюсь рассказывать вам, как написать такое приложение на React. Я предполагаю, что вы уже умеете это делать и, скажем честно, тема далеко не новая, так что извините.
Но я приведу в качестве примера это приложение — вы вполне можете его форкнуть или хотя бы открыть ссылку и посмотреть весь его код.
github.com/deleteman/react-todo-demo
Эта база кода состоит из следующих компонентов: Список дел : Это основной компонент, отображаемый в виде поля ввода текста с самой обычной кнопкой.
Все находится в форме, и после отправки текст добавляется в список, поддерживаемый основным приложением.
Код этого компонента очень прост:
TodoItems : очень простой компонент списка, используемый для отображения внутреннего списка элементов, добавленных с помощью предыдущего компонента.import React, { Component } from 'react' class TodoList extends Component { render() { return ( <div className="todoListMain"> <div className="header"> <form onSubmit={this.props.addItem}> <input placeholder="Задача" ref={this.props.inputElement} value={this.props.currentItem.text} onChange={this.props.handleInput} /> <button type="submit"> Add Task </button> </form> </div> </div> ) } } export default TodoList
Каждый из элементов кликабельен, и после нажатия на него он удаляется из списка.
Код также довольно прост: import React, { Component } from 'react'
class TodoItems extends Component {
createTasks(item) {
return <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>{item.text}</li>
}
render() {
const todoEntries = this.props.entries || []
const listItems = todoEntries.map(this.createTasks.bind(this))
return <ul className="theList">{listItems}</ul>
}
}
export default TodoItems
В обоих случаях соответствующие методы принимаются как реквизиты из основного компонента приложения.
Полный код этого компонента показан здесь.
Согласен, это приложение очень простое, но, еще раз подчеркну, потенциально это может быть любое React-приложение, над которым вы сейчас работаете — и вдруг перед вами стоит задача начать миграцию на TypeScript. Что делать?
- Вариант №1: Вытерев слезы, вы начинаете переписывать всю базу исходного кода.
- Вариант №2: переименуйте все ваши файлы .
js в .
ts, настройте необходимые шаги в процессе сборки и умойте руки.
- Вариант №3: Вы решаете, что действительно пора переходить к постепенной миграции всего старого кода, и писать весь новый код непосредственно на TypeScript.
Введите TypeScript
Итак, в качестве примера предположим, что нам поручено добавить кнопку переключения к каждому элементу в нашем списке дел.После нажатия на элемент его нужно переключить в фоновом режиме.
Ничего сверхъестественного, но, как вы помните, нас в данном случае интересует процесс, а не код как таковой.
Итак, мы не будем пытаться добавить TypeScript в уже настроенный вами проект, чтобы случайно не сломать вашу существующую сборку на несколько лет, а создадим совершенно новый проект, используя чистый TypeScript: $ npx create-react-app ts-components --template typescript
Обратите внимание: для использования npx вам нужна только новая версия NPM, и она включена в процесс установки в версии 5.2.0 и выше.
Как и раньше, в этом случае создается шаблон проекта, но на этот раз в качестве базового языка мы используем TypeScript. Плюс простой компонент-переключатель, который можно вставить в другой проект без введения дополнительных зависимостей.
Если вам интересно, как это делается, прочитайте следующую статью о том, как написать многоразовые компоненты .
import React, {useState} from 'react';
interface IActionProps {
Теги: #программирование #миграция #JavaScript #frontend #забавные задачи #typescript #рефакторинг #react
-
Вручение Ux-Оскара В Нью-Йорке
19 Oct, 24 -
Корректная Работа С Потоками В Qt
19 Oct, 24 -
Sony Cybershot G3: Первая Камера С Браузером
19 Oct, 24
