JavaScript е език за програмиране със слаб тип. Поради това е много снизходителен и програмните грешки вероятно ще останат незабелязани по време на разработката. TypeScript, JavaScript библиотека за проверка на типа, решава този проблем чрез налагане на типове върху стойности. Тази статия ще ви научи как да създадете React проект с TypeScript.
Създаване на React проект с TypeScript
Командата create-react-app ви позволява да създавате Typescript проекти, като използвате --шаблон опция.
Да се създайте нов React проект с TypeScript изпълнете следната команда:
npx създавам-react-app приложение-име--шаблонен шрифт
Тази команда създава нов React и TypeScript проект от нулата. Можете също да добавите TypeScript към съществуващо приложение на React.
За да направите това, отидете до проекта, към който искате да добавите TypeScript, и изпълнете следния код:
npm install --save typescript @типове/node @типове/react @типове/react-dom @типове/jest
След това разменете файловото разширение .js с .tsx за файлове, които искате да конвертирате в TypeScript. След като направите това, ще получите „
React се отнася до глобален UMD, но текущият файл е модул.“ грешка. Можете да го разрешите, като импортирате React във всеки typescript файл по този начин:импортиране Реагирайте от "реагира"
Като по-лесно решение, създайте tsconfig.json и задайте jsx да реагира-jsx.
{
"compilerOptions": {
"jsx": "реагират-jsx",
"цел": "es6",
"модул": "esnext",
},
}
Можете да намерите всички настройки за конфигурация от TypeScript документи.
Създаване на функционален компонент на React в TypeScript
Вие дефинирате функционален компонент на React по същия начин като JavaScript функция.
По-долу е даден пример за функционален компонент, наречен Greetings.
износпо подразбиранефункцияПоздравления() {
връщане (
<див>Здравей свят</div>
)
}
Този компонент връща низ „Hello world“ и TypeScript извежда типа му на връщане. Можете обаче да коментирате неговия тип на връщане:
износпо подразбиранефункцияПоздравления(): JSX.елемент{
връщане (
<див>Здравей свят</div>
)
}
TypeScript ще изведе грешка, ако компонентът Greetings върне стойност, която не е JSX.element.
Използване на React Props с TypeScript
React ви позволява да създавате компоненти за многократна употреба чрез подпори. Например компонентът Greetings може да получи проп за име, така че върнатата стойност да бъде персонализирана въз основа на него.
По-долу е редактираният компонент с име като проп. Обърнете внимание на декларацията за вграден тип.
функцияПоздравления({име}: {име: низ}) {
връщане (
<див>здравей {name}</div>
)
}
Ако подадете името „Jane“, компонентът ще върне съобщението „Hello Jane“.
Вместо да пишете декларацията на типа във функцията, можете да я дефинирате външно по следния начин:
Тип GreetingsProps = {
име: низ;
};
След това предайте определения тип на компонента, както следва:
функцияПоздравления({name}: GreetingsProps) {
връщане (
<див>здравей {name}</div>
)
}
Използвайте ключовата дума интерфейс, ако експортирате този тип и искате да го разширите:
износ интерфейсПоздравиРеквизит{
име: низ;
};
Обърнете внимание на разликата в синтаксиса между тип и интерфейс — интерфейсът няма знак за равенство.
Можете да разширите интерфейс, като използвате следния код:
импортиране { GreetingsProps } от './Поздравления'
интерфейсWelcomePropsсе простираПоздравиРеквизит{
време: "низ"
}
След това можете да използвате разширения интерфейс в друг компонент.
функцияДобре дошли({име, час}: WelcomeProps) {
връщане (
<див>
Добре {time}, {name}!
</div>
)
}
Използвай "?" символ с вашия интерфейс за подпори, за да определите незадължителни подпори. Ето пример за интерфейс с опция за име по избор.
интерфейсПоздравиРеквизит{
име?: низ;
};
Ако не подадете проп за име, TypeScript няма да изведе грешка.
Използване на React State с TypeScript
В обикновен JavaScript вие определяте куката useState(). както следва:
const [име на клиент, setCustomerName] = useState("");
В този пример TypeScript може лесно да изведе типа на firstName като низ, тъй като стойността по подразбиране е низ.
Понякога обаче не можете да инициализирате състоянието до определена стойност. В тези случаи трябва да зададете тип стойност на състоянието.
Ето някои примери за това как да дефинирате типове в куката useState().
const [име на клиент, setCustomerName] = useState<низ>("");
const [възраст, setAge] = useState<номер>(0);
конст [isSubscribed, setIsSubscribed] = useState<булево>(невярно);
Можете също да използвате интерфейс в куката useState(). Например, можете да пренапишете горния пример, за да използвате интерфейс, показан по-долу.
интерфейсICustomer{
име на клиента: низ;
възраст: номер ;
е абониран: булево ;
}
Използвайте персонализирания интерфейс в куката по следния начин:
const [клиент, setCustomer] = useState<ICustomer>({
Потребителско име: "Джейн",
възраст: 10,
е абониран: невярно
});
Използване на събития с TypeScript
Събитията са от съществено значение, тъй като позволяват на потребителите да взаимодействат с уеб страница. В TypeScript можете да въвеждате или събития, или манипулатори на събития.
За да демонстрирате, разгледайте следния компонент за влизане, използвайки събитията onClick() и onChange().
импортиране {useState} от 'реагира';
износпо подразбиранефункцияВлизам() {
const [имейл, setEmail] = useState('');конст handleChange = (събитие) => {
setEmail(събитие.цел.стойност);
};конст handleClick = (събитие) => {
console.log('Изпратено!');
};
връщане (
<див>
<тип вход ="електронна поща" стойност={имейл} onChange={handleChange} />
<бутон onClick={() => handleClick}>Изпращане</button>
</div>
);
}
Ето как бихте обработвали събития в обикновен JavaScript. TypeScript обаче очаква да дефинирате типа на параметъра на събитието във функциите за манипулиране на събития. За щастие React предоставя няколко типа събития.
Например, използвайте типа changeEvent за манипулатора на събитие handleChange().
импортиране { ChangeEvent, useState } от 'реагира';
const handleChange = (събитие: ChangeEvent<HTMLInputElement>) => {
setEmail(събитие.цел.стойност);
};
Типът changeEvent се използва за промяна на стойностите на елементите input, select и textarea. Това е общ тип, което означава, че трябва да подадете DOM елемента, чиято стойност се променя. В този пример сте предали входния елемент.
Горният пример демонстрира как да въведете събитието. Кодът по-долу показва как вместо това можете да въведете манипулатора на събития.
импортиране { ChangeEventHandler, useState } от 'реагира';
const handleChange: 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.
Въвеждането на React компоненти понякога може да се почувства като писане на ненужен шаблонен код. Въпреки това, колкото повече го използвате, толкова повече ще оцените способността му да улавя грешки, преди да внедрите своя код.
