JavaScript — это язык программирования со слабой типизацией. Из-за этого он очень мягкий, и ошибки программирования, скорее всего, останутся незамеченными во время разработки. TypeScript, библиотека проверки типов JavaScript, решает эту проблему, применяя типы к значениям. В этой статье вы узнаете, как создать проект React с помощью TypeScript.
Создание проекта React с помощью TypeScript
Команда create-react-app позволяет создавать проекты Typescript с помощью --шаблон вариант.
К создать новый проект React с TypeScript выполните следующую команду:
npx Создайте-реагировать-приложение приложение-имя--template машинописный текст
Эта команда создает новый проект React и TypeScript с нуля. Вы также можете добавить TypeScript в существующее приложение React.
Для этого перейдите к проекту, в который вы хотите добавить TypeScript, и выполните следующий код:
npm установить --сохранить машинописный текст @типы/node @типы/react @типы/react-dom @типы/jest
Затем замените расширение файла .js на .tsx для файлов, которые вы хотите преобразовать в TypeScript. Как только вы это сделаете, вы получите «
React относится к глобальному UMD, но текущий файл — это модуль». ошибка. Вы можете решить эту проблему, импортировав React в каждый машинописный файл следующим образом:импорт Реагировать из "реагировать"
В качестве более простого решения создайте tsconfig.json и задайте для jsx значение react-jsx.
{
"параметры компилятора": {
"jsx": "реагировать-jsx",
"цель": "es6",
"модуль": "следующий",
},
}
Вы можете найти все параметры конфигурации в Документы TypeScript.
Создание функционального компонента React в TypeScript
Вы определяете компонент функции React так же, как функцию JavaScript.
Ниже приведен пример функционального компонента под названием «Приветствия».
экспортдефолтфункцияПривет() {
возвращаться (
<див>Привет, мир</div>
)
}
Этот компонент возвращает строку «Hello world», а TypeScript определяет тип возвращаемого значения. Однако вы можете аннотировать его возвращаемый тип:
экспортдефолтфункцияПривет(): JSX.Элемент{
возвращаться (
<див>Привет, мир</div>
)
}
TypeScript выдаст ошибку, если компонент Greetings вернет значение, отличное от JSX.element.
Использование реквизита React с TypeScript
React позволяет создавать повторно используемые компоненты с помощью реквизита. Например, компонент Greetings может получить реквизит имени, чтобы возвращаемое значение настраивалось на его основе.
Ниже отредактированный компонент с именем в качестве опоры. Обратите внимание на объявление встроенного типа.
функцияПривет({имя}: {имя: строка}) {
возвращаться (
<див>Привет {имя}</div>
)
}
Если вы передадите имя «Джейн», компонент вернет сообщение «Привет, Джейн».
Вместо того, чтобы писать объявление типа в функции, вы можете определить его внешне следующим образом:
тип ПриветствияПропс = {
имя: строка;
};
Затем передайте определенный тип компоненту следующим образом:
функцияПривет({имя}: GreetingsProps) {
возвращаться (
<див>Привет {имя}</div>
)
}
Используйте ключевое слово interface, если вы экспортируете этот тип и хотите его расширить:
экспорт интерфейсПоздравленияРеквизит{
имя: строка;
};
Обратите внимание на синтаксическую разницу между типом и интерфейсом — интерфейс не имеет знака равенства.
Вы можете расширить интерфейс, используя следующий код:
импорт {Приветствияреклама} из './Привет'
интерфейсДобро пожаловатьреквизитырасширяетПоздравленияРеквизит{
время: "нить"
}
Затем вы можете использовать расширенный интерфейс в другом компоненте.
функцияДобро пожаловать({имя, время}: WelcomeProps) {
возвращаться (
<див>
Доброго {времени}, {имя}!
</div>
)
}
Использовать "?" символ с вашим интерфейсом реквизита, чтобы определить дополнительные реквизиты. Вот пример интерфейса с необязательным именем.
интерфейсПоздравленияРеквизит{
имя?: строка;
};
Если вы не передадите имя, TypeScript не выдаст никакой ошибки.
Использование состояния React с TypeScript
В простом JavaScript вы определяете хук useState() следующим образом:
const [ИмяЗаказчика, setИмяЗаказчика] = useState("");
В этом примере TypeScript может легко определить тип firstName как строку, поскольку значением по умолчанию является строка.
Однако иногда вы не можете инициализировать состояние определенным значением. В этих случаях вы должны указать тип значения состояния.
Вот несколько примеров того, как определять типы в хуке useState().
const [имя_клиента, setCustomerName] = useState<нить>("");
const [возраст, setAge] = useState<количество>(0);
константа [isSubscribed, setIsSubscribed] = useState<логический>(ЛОЖЬ);
Вы также можете использовать интерфейс в хуке useState(). Например, вы можете переписать приведенный выше пример, чтобы использовать интерфейс, показанный ниже.
интерфейсIКлиент{
имя_клиента: строка ;
возраст: число ;
подписан: логический ;
}
Используйте пользовательский интерфейс в хуке следующим образом:
const [клиент, setCustomer] = useState<IКлиент>({
Имя Клиента: "Джейн",
возраст: 10,
подписан: ЛОЖЬ
});
Использование событий с TypeScript
События необходимы, поскольку они позволяют пользователям взаимодействовать с веб-страницей. В TypeScript вы можете либо вводить события, либо обработчики событий.
Для демонстрации рассмотрим следующий компонент входа в систему, использующий события onClick() и onChange().
импорт { состояние использования } из 'реагировать';
экспортдефолтфункцияАвторизоваться() {
const [электронная почта, setEmail] = useState('');константа handleChange = (событие) => {
setEmail(мероприятие.цель.ценность);
};константа handleClick = (событие) => {
console.log('Поданный!');
};
возвращаться (
<див>
<тип ввода="Эл. адрес" значение={электронная почта} onChange={handleChange} />
<кнопка onClick={() => обработатьклик}>Представлять на рассмотрение</button>
</div>
);
}
Вот как вы будете обрабатывать события в простом JavaScript. Однако TypeScript ожидает, что вы определите тип параметра события в функциях обработчика событий. К счастью, React предоставляет несколько типов событий.
Например, используйте тип changeEvent для обработчика события handleChange().
импорт {ChangeEvent, состояние использования} из 'реагировать';
const handleChange = (событие: ChangeEvent<HTMLInputElement>) => {
setEmail(мероприятие.цель.ценность);
};
Тип changeEvent используется для изменения значений элементов input, select и textarea. Это общий тип, означающий, что вы должны передать элемент DOM, значение которого изменяется. В этом примере вы передали элемент ввода.
В приведенном выше примере показано, как ввести событие. В приведенном ниже коде показано, как вместо этого можно ввести обработчик события.
импорт {ChangeEventHandler, useState} из 'реагировать';
константный дескрипторChange: ChangeEventHandler<HTMLInputElement> = (событие) => {
setEmail(мероприятие.цель.ценность);
};
Для события handleClick() используйте метод MouseEvent().
импорт { useState, MouseEvent } из 'реагировать';
константа handleClick = (событие: MouseEvent) => {
console.log('Поданный!');
};
Опять же, вы можете прикрепить тип к самому обработчику событий.
импорт { useState, MouseEventHandler } из 'реагировать';
константа handleClick: MouseEventHandler = (событие) => {
console.log('Поданный!');
};
Другие типы событий см. Шпаргалка React TypeScript.
Если вы создаете большие формы, лучше используйте библиотеку форм, например Formik, так как он создан с помощью TypeScript.
Почему вы должны использовать TypeScript?
Вы можете поручить новому проекту React использовать TypeScript или преобразовать существующий. Вы также можете использовать TypeScript с функциональными компонентами, состоянием и событиями React.
Ввод компонентов React иногда может показаться написанием ненужного шаблонного кода. Однако чем больше вы его используете, тем больше вы оцените его способность выявлять ошибки перед развертыванием кода.
