Начало работы с React и TypeScript

Обзор Typescript с React

TypeScript — это надмножество JavaScript, поэтому любая функция JavaScript также доступен в TypeScript. Но TypeScript делает JavaScript еще один шаг вперед и добавляет мощную систему типов, позволяющую рефакторинг кода, функции навигации, проверку типов и многое другое.

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

Чтобы использовать Typescript с React, нам нужно иметь представление о том, что Typescript делает с нашим JavaScript. код. Хотя полный курс TypeScript необходим, чтобы вы быстро освоились, давайте посмотрим, что TypeScript добавляет в код JavaScript:

• Аннотации типов: позволяет нам назначать типы для переменных.
• Вывод типа: определяет тип данных переменной
• Тип никогда: используется для представления типа значения, которое никогда не появится.
• Неизвестный тип: позволяет сократить использование any и создать более строго типизированный код.
• Типы пересечений: позволяют комбинировать существующие типы для формирования нового типа со всеми члены из типа, на котором он основан.
• Типы объединения: позволяет нам комбинировать новую форму типа с помощью вертикальной черты | символ
• Обеспечение возможности повторного использования типов с помощью универсальных шаблонов
• Строго типизированные массивы
• Кортежи со строгой типизацией

F или базовое руководство по Typescript, ознакомьтесь с нашей статьей TypeScript Tutorial: пошаговое руководство по изучению Typescript

Преимущества использования Typescript с React

Возможно, вам все еще интересно, «но почему я должен использовать Typescript для проекта React.js?» . Давайте разберем преимущества Typescript и покажем, как он упрощает разработку интерфейса React.

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

• Читаемость и проверка: Поскольку Typescript — это статически типизированная система, вы можете добавлять типы к переменным, функциям и свойствам, что значительно упрощает чтение вашего кода. TypeScript также служит для устранения PropTypes React, что упрощает разработку React.

• Выявление ошибок ранее и IntelliSense: один из Самая любимая функция Typescript — это способность выделять ошибки, как только они возникают. TypeScript показывает ошибки еще до того, как вы запускаете код, экономя часы времени, исправляя ошибки на раннем этапе.

• Точное обслуживание и рефакторинг кода : По мере роста кодовой базы приложения React его становится слишком сложно читать, делиться или поддерживать. Навигация по этим кодовым базам может быть утомительной, а рефакторинг кода — рискованным. TypeScript на самом деле помогает вам реорганизовать код и предотвращать опечатки, что значительно упрощает его обслуживание и обновление без изменения его поведения.

• Улучшает использование JavaScript: Typescript полностью интегрируется с JavaScript и использует новейшие функции, доступные разработчикам JavaScript. Проекты React, созданные с помощью Typescript, компилируются в версию JavaScript, работающую в любом браузере.

Как использование TypeScript с React

Теперь, когда вы понимаете, что такое Typescript и почему вы должны его использовать, давайте немного углубимся в разработку React с помощью TypeScript. Я покажу вам четыре лучшие функции, предлагаемые TypeScript, но имейте в виду, что React может сделать гораздо больше.

1. Строго типизированные свойства компонентов функций

Одна из лучших частей использования Typescript с React — это возможность использовать строго типизированные свойства компонентов. Это означает, что вы можете быстрее узнать, что передает компонент, чтобы предотвратить ошибки в вашем приложении. Чтобы показать вам, как это делается, давайте создадим компонент React Hello с простой опорой.

Взгляните на код ниже.

Здесь props не указан тип, поэтому Typescript будет обозначать любой тип. Чтобы решить эту проблему, мы используем аннотации типов для реквизита.. Это можно сделать с помощью обычной функции, а также функции стрелки.

Примечание: в React функциональные компоненты — это функции, которые принимают свойства для возврата JSX.

Мы должны добавить аннотацию типа для свойств в нашем коде. Это определит опору who . Это делает свойства Hello строго типизированными.

  const Hello = (props: {who: string}) => (
 Здравствуйте, {props.who} 
);  

Однако по-прежнему возникает ошибка, когда используется Hello .

Мы решаем эту проблему, передавая строку "Мэри" в Hello .

  render (, rootElement); Затем мы  закоротил компонент `Hello`, деструктурировав параметр` props` const Hello = ({who}: {who: string}) => (
 Здравствуйте, {who} 
);  

Мы также можем реорганизовать наш компонент Hello , чтобы превратить его в обычную функцию вместо функции стрелки.

   function Hello ({who}: Props) {return 
 Hello, {who} 
;}  

Нравится статья? Прокрутите вниз, чтобы подписаться на нашу бесплатную рассылку новостей раз в два месяца.

2. Строго типизированный контекст для функциональных компонентов

Контекст React — это инструмент, который позволяет нескольким компонентам в одном дереве обмениваться данными. Это экономит усилия, поскольку вам не нужно передавать данные вниз по дереву через реквизиты. Контекст обычно используется для предоставления информации о теме, такой как значение цвета, чтобы все компоненты могли получить к ней доступ. Давайте посмотрим, как Typescript упрощает эту задачу, определяя тип для контекста.

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

Начнем с создания темы с помощью функции createContext React.

   const defaultTheme = "white"; const ThemeContext = React.createContext (defaultTheme);  

Теперь, когда у нас есть тема, мы создаем компонент поставщика.

  type Props = {children: React.ReactNode}; export const ThemeProvider = ({children}: Props) => {const [theme, setTheme] = React.useState (defaultTheme)  ;  React.useEffect (() => {//Мы получили бы тему из веб-API/локального хранилища в реальном приложении//Мы жестко запрограммировали тему в нашем примере const currentTheme = "lightblue"; setTheme (currentTheme)  ;}, []);  return ( {children} Provider>);};  

Что все это делает? Значение темы сохраняется в состоянии, поэтому в случае его изменения дочерние элементы получают доступ к новой теме. Мы также используем хук React useEffect , чтобы получить текущую тему и обновить значение состояния theme .

Затем мы можем создать настраиваемый хук, который позволяет нашему функциональному компоненту использовать контекст следующим образом:

  const useTheme = () => React.useContext (ThemeContext);  

Мы можем использовать компонент ThemeProvider в дереве компонентов. Чтобы предоставить Header доступ к контексту, мы используем хук useTheme .

  const Header = (  ) => {const theme = useTheme ();  return (
 Здравствуйте! 
);}  

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

3. Строго типизированные обработчики событий React

В React для обработки событий используются интерактивные компоненты, но как реализовать обработчики событий в строго типизированном функциональном компоненте? Давайте узнаем, как и посмотрим, как вывод типов Typescript помогает нам на этом пути.

Сначала взгляните на следующий код:

Это приложение содержит input , который должен позволить пользователю вводить критерии поиска, но прямо сейчас пользователь не может ничего вводить. Нам нужно добавить встроенный обработчик событий onChange для обновления состояния критериев . Обратите внимание, что IntelliSense предоставляется в параметре e .

В React обработчик событий onChange то же, что и атрибут JavaScript onchange, но имеет верблюжий корпус.

   setCriteria (e.currentTarget.value)}/>  

TypeScript определил тип, что сделало встроенный обработчик событий строго типизированным. Теперь с помощью этого обработчика событий пользователь может вводить критерии в input . Если мы хотим создать именованную функцию-обработчик событий, мы должны навести указатель мыши на опору обработчика событий, чтобы узнать, каким должен быть тип параметра функции. Всем спасибо TypeScript!

4. Строго типизированные ссылки в функциональных компонентах

Функциональные компоненты React необходимы для написания современных приложений React. React Hooks позволяют писать все приложение с компонентами React. А с TypeScript мы можем получить строго типизированную ссылку на элемент в функциональном компоненте. Посмотрим, как это делается.

Мы можем использовать ловушку useRef для доступа ко всем свойствам и методам элемента, который используется для императивного вызова методов. Посмотрите на этот пример:

  const element = React.useRef (null);//может получить доступ ко всем свойствам и методам `element` через` element.current` ..  .return ();  

В настоящее время TypeScript определяет тип input.current как null , если строгий режим включен, и any в противном случае. Затем мы можем определить тип возвращаемого элемента, передав параметр универсального типа в ловушке useRef следующим образом:

  const element = React  .useRef  (null);  

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

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

  React.createRef  ();  

Есть намного больше что TypeScript может сделать для реакции. Общее практическое правило — делать все максимально строго типизированным. Это может применяться к строго типизированным событиям, свойствам классов, состоянию класса, состояниям компонентов с useState и многому другому.

Создание проекта React с помощью TypeScript

Существует два распространенных способа создания проекта React с помощью TypeScript: с помощью Create React App или вручную. Сегодня я покажу вам, как использовать приложение Create React для создания базового проекта React-Typescript. Если вам интересен ручной процесс, ознакомьтесь с учебным курсом «Использование Typescript с React», чтобы получить простое руководство.

Шаг 1. Соберите технические требования

Чтобы настроить новое приложение React с Typescript, вам потребуются следующие инструменты:

• Node.js и npm. Вам понадобится как минимум версия 5.2.
• Редактор кода. Я рекомендую Visual Studio Code.
• Создание приложения React (CRA)

Шаг 2. Настройка React с помощью Typescript

Create React App (CRA) — это инструмент командной строки, используемый для быстрого создания приложений React. Вы можете загрузить CRA как пакет npm с помощью команды npx. Если вы создаете новое приложение React с помощью create-react-app v2.1 или выше, Typescript уже встроен. Итак, чтобы настроить новый проект с помощью Typescript, просто используйте - typescript в качестве параметра.

  npx create-react-app hello  -tsx --typescript  

Это создает проект с именем my-app , но вы можете изменить его имя. Важно отметить, что файлы, содержащие JSX, должны быть файлом .tsx , а файлы, содержащие только код Typescript, должны быть файлом .ts .

Корневой HTML-файл приложения находится в общедоступной папке. Он называется index.html . Приложение React вводится в index.html следующей строкой кода:

  ReactDOM.render (, document.getElementById  ('root'));  

Это означает, что корневой компонент React называется App , определенный в App.tsx .

Если вы хотите добавить TypeScript в существующий проект приложения create-response-app, вам необходимо установить TypeScript и все необходимые типы. Ознакомьтесь с этой ссылкой, чтобы узнать, как это делается.

Перед запуском сервера вам необходимо переименовать свои файлы в .tsx или .ts . Будет создан файл tsconfig.json .

Шаг 3. Запустите приложение

Теперь, когда у вас есть приложение готово к работе, вы можете запустить его в режиме разработки. Найдите корневую папку проекта и запустите сценарий start npm в Терминале.

  cd my-appnpm start  

Ваша корневая папка должна иметь то же имя, что и ваше приложение, и содержать файл package.json . Теперь у вас есть приложение React, готовое к работе с TypeScript!

Что изучать дальше

Теперь у вас есть базовое понимание того, что такое Typescript и что он может предложить для ваших проектов React. Typescript может сделать для React гораздо больше, и еще многое нужно изучить! Далее вы захотите узнать:

• Создание строго типизированных компонентов класса
• Свойства компонентов React
• Создать проект React TS с нуля.
• Использование Babel и Webpack
• Добавление скриптов npm
• и др.

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

Продолжить чтение о React и TypeScript

• Эволюция React: V16 и не только
• Учебник по TypeScript: пошаговое руководство по изучению Typescript
• Пять лучших практик для разработчиков React