Использование машинописного текста в React может быть затруднительным вначале, но по мере того, как мы продвигаемся вперед, он начинает расти в нас, и вместо того, чтобы чувствовать себя вынужденным использовать типы везде, это становится привычкой, хорошей. Эта статья о том, как правильно использовать определения типов в компонентах React. Все, что вам нужно, это базовые знания React и Typescript.
Компоненты React Javascript
Прежде чем погрузиться в среду TypeScript React, давайте просто посмотрим, как мы создаем компоненты в React javascript.
Как видите, компонент Input - это компонент класса, а Button component - это функциональный компонент. Для понимания функциональной или классовой составляющей вы можете посетить здесь. Мы возьмем их в качестве примеров и заменим эти компоненты на React typescript.
Компоненты React Typescript
Давайте сначала настроим наш проект TypeScript React с самого начала. Просто введите следующую команду в свою командную строку и дождитесь ее.
$ npx create-react-app react-ts-dummy --typescript
Это создаст проект React с настройкой сборки машинописного текста из любимого приложения create-react-app. После проекта все настроено. Вы можете видеть компоненты с расширением .tsx, и причина этого в том, что .tsx - это специальное расширение, которое поддерживает jsx.
Теперь перейдите в папку src и создайте три новых компонента с именами Form.tsx, Button.tsx и Input.tsx. Каталог вашего проекта может выглядеть примерно так.
Приведенный ниже фрагмент кода содержит код для компонента формы. Сначала просмотрите следующий код, а затем давайте посмотрим, что здесь происходит.
Файл Form.tsx имеет два интерфейса FormProps и FormState, теперь вопрос в том, как использовать эти интерфейсы в качестве определений типов для состояния и свойств компонента. Чтобы передать определение типа компонента FormProps и FormState, мы должны использовать угловые скобки следующим образом:
class Form extends Component<FormProps, FormState> {…
Определив компонент с помощью FormProps и FormState, теперь API-интерфейсы React могут извлечь выгоду из этих типов. Когда мы находимся внутри этих компонентов, мы можем использовать определение типа. Все впереди будет таким же, как и в среде JavaScript React, с этим изменением вы всегда получаете все преимущества машинописного текста.
Давайте рассмотрим следующий фрагмент кода и поймем определение типа функции, когда функция передается в реквизитах. В приведенном ниже коде функция onChange передается как свойство компоненту Input, поэтому мы должны определить тип того, что функция может принимать в качестве аргумента и что она будет возвращать.
Компонент Input не имеет состояния, поэтому мы можем передать пустой объект в качестве его типа. Кроме того, у него есть реквизиты, поступающие из компонента формы, и интерфейс InputProps может быть передан в угловых скобках для определения типа реквизита InputComponent.
Компонент Button - это функциональный компонент в нашем примере. Теперь, когда мы знаем, что функциональный компонент не имеет состояния, поэтому нам не нужно определять тип состояния, все, что нам нужно определить, это определения типов для входящих свойств.
const Button: React.FC<ButtonProps> = (props) => {...
В приведенном выше коде я использовал React.FC для добавления типов в свойства компонента. Несмотря на то, что children не является частью ButtonProps, имплицитность React предоставляет свойство children с определенными нами реквизитами.
useState
Подойдя к последнему пункту, определения типов в перехватчиках реакции могут быть сложными, и я не собираюсь описывать все перехватчики, кроме самого известного. Определение типа для ловушки useState почти такое же, как определение типа, которое мы дали функциональному компоненту.
const [open, setOpen] = React.useState<boolean>(false)
Ну, useState на самом деле является универсальной функцией, в которую можно передать тип, используя угловые скобки послеuseState, мы можем определить тип.
Спасибо, что прочитали мой блог. Это мой первый блог, и я чувствую себя прекрасно, когда пишу его, возможно, я тоже сделал некоторые ошибки, поэтому, если вы найдете один, просто оставьте комментарий.
