ЈаваСцрипт је слабо куцан програмски језик. Због тога је веома благ, а програмске грешке ће вероватно остати непримећене током развоја. ТипеСцрипт, ЈаваСцрипт библиотека за проверу типова, решава овај проблем применом типова на вредности. Овај чланак ће вас научити како да креирате Реацт пројекат помоћу ТипеСцрипт-а.
Креирање Реацт пројекта помоћу ТипеСцрипт-а
Команда цреате-реацт-апп вам омогућава да креирате Типесцрипт пројекте користећи --темплате опција.
До креирајте нови Реацт пројекат са ТипеСцрипт-ом, покрените следећу команду:
нпк Креирај-реакција-апликација-име--темплате типесцрипт
Ова команда креира нови Реацт и ТипеСцрипт пројекат од нуле. Такође можете додати ТипеСцрипт постојећој Реацт апликацији.
Да бисте то урадили, идите до пројекта у који желите да додате ТипеСцрипт и покрените следећи код:
нпм инсталл --саве типесцрипт @врсте/node @врсте/react @врсте/react-dom @врсте/jest
Затим замените екстензију датотеке .јс са .тск за датотеке које желите да конвертујете у ТипеСцрипт. Када то урадите, добићете „
Реацт се односи на УМД глобал, али тренутна датотека је модул." грешка. Можете га решити тако што ћете увести Реацт у сваки типографски фајл овако:увоз Реаговати из "реаговати"
Као једноставније решење, направите тсцонфиг.јсон и подесите јск на реацт-јск.
{
"цомпилерОптионс": {
"јск": "реацт-јск",
"циљ": "ес6",
"модул": "еснект",
},
}
Сва подешавања конфигурације можете пронаћи из ТипеСцрипт документи.
Креирање компоненте функције Реацт у ТипеСцрипт-у
Компоненту функције Реацт дефинишете на исти начин као и ЈаваСцрипт функцију.
Испод је пример компоненте функције која се зове Поздрав.
извозУобичајенофункцијаВелики поздрав() {
повратак (
<див>Здраво Свете</div>
)
}
Ова компонента враћа стринг „Хелло ворлд“, а ТипеСцрипт закључује његов тип враћања. Међутим, можете означити његов тип повратка:
извозУобичајенофункцијаВелики поздрав(): ЈСКС.Елемент{
повратак (
<див>Здраво Свете</div>
)
}
ТипеСцрипт ће избацити грешку ако компонента Греетингс врати вредност која није ЈСКС.елемент.
Коришћење Реацт реквизита са ТипеСцрипт-ом
Реацт вам омогућава да креирате компоненте за вишекратну употребу путем реквизита. На пример, компонента Греетингс може да прими опис имена тако да се повратна вредност прилагођава на основу њега.
Испод је уређена компонента са именом као реквизитом. Обратите пажњу на инлине декларацију типа.
функцијаВелики поздрав({наме}: {наме: стринг}) {
повратак (
<див>Здраво {наме}</div>
)
}
Ако проследите име „Јане“, компонента ће вратити поруку „Хелло Јане“.
Уместо да пишете декларацију типа у функцији, можете да је дефинишете споља овако:
тип ГреетингсПропс = {
име: стринг;
};
Затим проследите дефинисани тип компоненти на следећи начин:
функцијаВелики поздрав({наме}: ГреетингсПропс) {
повратак (
<див>Здраво {наме}</div>
)
}
Користите кључну реч интерфејса ако извозите овај тип и желите да га проширите:
извоз интерфејсГреетингсПропс{
име: стринг;
};
Обратите пажњу на разлику у синтакси између типа и интерфејса — интерфејс нема знак једнакости.
Можете проширити интерфејс користећи следећи код:
увоз { ГреетингсПропс } из './Велики поздрав'
интерфејсВелцомеПропспротежеГреетингсПропс{
време: "низ"
}
Затим можете користити проширени интерфејс у другој компоненти.
функцијаДобродошли({наме, тиме}: ВелцомеПропс) {
повратак (
<див>
Добро {тиме}, {наме}!
</div>
)
}
Користити "?" симбол са вашим интерфејсом реквизита за дефинисање опционих реквизита. Ево примера интерфејса са опционим наме проп.
интерфејсГреетингсПропс{
име?: стринг;
};
Ако не проследите наме проп, ТипеСцрипт неће испустити никакву грешку.
Коришћење стања Реацт са ТипеСцрипт-ом
У обичном ЈаваСцрипт-у, ви дефинишете куку усеСтате(). као што следи:
цонст [цустомерНаме, сетЦустомерНаме] = усеСтате("");
У овом примеру, ТипеСцрипт може лако да закључи тип првог имена као стринг јер је подразумевана вредност стринг.
Међутим, понекад не можете иницијализовати стање на дефинисану вредност. У овим случајевима морате дати тип вредности стања.
Ево неколико примера како да дефинишете типове у кукици усеСтате().
цонст [цустомерНаме, сетЦустомерНаме] = усеСтате<низ>("");
цонст [старост, сетАге] = усеСтате<број>(0);
конст [исСубсцрибед, сетИсСубсцрибед] = усеСтате<боолеан>(лажно);
Такође можете користити интерфејс у кукици усеСтате(). На пример, можете да препишете горњи пример да бисте користили интерфејс приказан испод.
интерфејсИЦустомер{
цустомерНаме: стринг ;
старост: број ;
је претплаћено: боолеан ;
}
Користите прилагођени интерфејс у куки овако:
цонст [цустомер, сетЦустомер] = усеСтате<ИЦустомер>({
Име клијента: "Јане",
године: 10,
је претплаћено: лажно
});
Коришћење догађаја са ТипеСцрипт-ом
Догађаји су од суштинског значаја јер омогућавају корисницима интеракцију са веб страницом. У ТипеСцрипт-у можете да откуцате догађаје или руковаоце догађајима.
Да бисте демонстрирали, размотрите следећу компоненту Логин користећи догађаје онЦлицк() и онЦханге().
увоз { усеСтате } из 'реаговати';
извозУобичајенофункцијаПријавите се() {
цонст [емаил, сетЕмаил] = усеСтате('');конст хандлеЦханге = (догађај) => {
сетЕмаил(догађај.таргет.вредност);
};конст хандлеЦлицк = (догађај) => {
цонсоле.лог('Достављени!');
};
повратак (
<див>
<тип уноса="емаил" валуе={емаил} онЦханге={хандлеЦханге} />
<дугме онЦлицк={() => хандлеЦлицк}>прихвати</button>
</div>
);
}
Овако бисте поступали са догађајима у обичном ЈаваСцрипт-у. ТипеСцрипт, међутим, очекује да дефинишете тип параметра догађаја у функцијама за руковање догађајима. Срећом, Реацт нуди неколико типова догађаја.
На пример, користите тип цхангеЕвент за обрађивач догађаја хандлеЦханге().
увоз { ЦхангеЕвент, усеСтате } из 'реаговати';
цонст хандлеЦханге = (догађај: ЦхангеЕвент<ХТМЛИнпутЕлемент>) => {
сетЕмаил(догађај.таргет.вредност);
};
Тип цхангеЕвент се користи за промену вредности елемената уноса, избора и тектареа. То је генерички тип што значи да морате проследити ДОМ елемент чија се вредност мења. У овом примеру, проследили сте елемент уноса.
Горњи пример показује како да откуцате догађај. Код испод показује како уместо тога можете да откуцате руковалац догађаја.
увоз { ЦхангеЕвентХандлер, усеСтате } из 'реаговати';
цонст хандлеЦханге: ЦхангеЕвентХандлер<ХТМЛИнпутЕлемент> = (догађај) => {
сетЕмаил(догађај.таргет.вредност);
};
За догађај хандлеЦлицк() користите МоусеЕвент().
увоз { усеСтате, МоусеЕвент } из 'реаговати';
конст хандлеЦлицк = (догађај: МоусеЕвент) => {
цонсоле.лог('Достављени!');
};
Опет, можете приложити тип самом руковаоцу догађаја.
увоз { усеСтате, МоусеЕвентХандлер } из 'реаговати';
конст хандлеЦлицк: МоусеЕвентХандлер = (догађај) => {
цонсоле.лог('Достављени!');
};
За друге типове догађаја, погледајте Реацт ТипеСцрипт варалица.
Ако креирате велике форме, боље је да користите библиотеку образаца као што је Формик, јер је направљен помоћу ТипеСцрипт-а.
Зашто би требало да користите ТипеСцрипт?
Можете наложити новом Реацт пројекту да користи ТипеСцрипт или да конвертује постојећи. Такође можете користити ТипеСцрипт са компонентама функције Реацт, стањем и догађајима Реацт.
Уписивање Реацт компоненти понекад може да изгледа као да пишете непотребан шаблонски код. Међутим, што га више користите, више ћете ценити његову способност да ухвати грешке пре него што примените свој код.
