JavaScript yra silpno tipo programavimo kalba. Dėl šios priežasties jis yra labai švelnus, o programavimo klaidos greičiausiai nepastebės kuriant. „TypeScript“, „JavaScript“ tipo tikrinimo biblioteka, išsprendžia šią problemą, įvesdama tipus reikšmėms. Šis straipsnis išmokys jus sukurti „React“ projektą naudojant „TypeScript“.
„React“ projekto kūrimas naudojant „TypeScript“.
Komanda kurti-reaguoti-programą leidžia kurti Typescript projektus naudojant --šablonas variantas.
Į sukurti naują React projektą naudodami TypeScript, paleiskite šią komandą:
npx sukurti-react-app programa-vardas-- šablonas mašinraštis
Ši komanda sukuria naują „React“ ir „TypeScript“ projektą nuo nulio. Taip pat galite pridėti „TypeScript“ prie esamos „React“ programos.
Norėdami tai padaryti, eikite į projektą, prie kurio norite pridėti „TypeScript“, ir paleiskite šį kodą:
npm įdiegti --išsaugoti mašinraštį @tipai/node @tipai/react @tipai/react-dom @tipai/jest
Tada pakeiskite .js failo plėtinį į .tsx failais, kuriuos norite konvertuoti į TypeScript. Kai tai padarysite, gausite „
„React“ reiškia UMD visuotinį failą, tačiau dabartinis failas yra modulis. klaida. Galite tai išspręsti importuodami React į kiekvieną mašinraščio failą, pavyzdžiui:importuoti Reaguoti iš "reaguoti"
Kaip paprastesnį sprendimą, sukurkite tsconfig.json ir nustatykite jsx į react-jsx.
{
"kompiliatoriaus parinktys": {
"jsx": "reaguoti-jsx",
"taikinys": "es6",
"modulis": "kitas",
},
}
Visus konfigūracijos nustatymus galite rasti iš TypeScript dokumentai.
„React“ funkcijos komponento kūrimas naudojant „TypeScript“.
Funkcijos „React“ komponentą apibrėžiate taip pat, kaip ir „JavaScript“ funkciją.
Žemiau pateikiamas funkcijos komponento, vadinamo Sveikinimai, pavyzdys.
eksportuotinumatytasfunkcijaSveikinimai() {
grąžinti (
<div>Labas pasauli</div>
)
}
Šis komponentas grąžina eilutę „Hello world“, o „TypeScript“ nustato jo grąžinimo tipą. Tačiau galite komentuoti grąžinimo tipą:
eksportuotinumatytasfunkcijaSveikinimai(): JSX.Elementas{
grąžinti (
<div>Labas pasauli</div>
)
}
„TypeScript“ parodys klaidą, jei „Greetings“ komponentas grąžins reikšmę, kuri nėra JSX.elementas.
„React Props“ naudojimas su „TypeScript“.
„React“ leidžia jums sukurti daugkartinio naudojimo komponentus naudojant rekvizitus. Pavyzdžiui, komponentas „Sveikinimai“ gali gauti pavadinimo rekvizitą, kad grąžinamoji vertė būtų pritaikyta pagal jį.
Žemiau pateikiamas redaguotas komponentas su pavadinimu kaip rekvizitas. Atkreipkite dėmesį į eilutę tipo deklaraciją.
funkcijaSveikinimai({vardas}: {vardas: eilutė}) {
grąžinti (
<div>Sveiki, {name}</div>
)
}
Jei perduosite vardą „Jane“, komponentas grąžins pranešimą „Hello Jane“.
Užuot rašę tipo deklaraciją funkcijoje, galite ją apibrėžti išorėje taip:
tipo GreetingsProps = {
pavadinimas: eilutė;
};
Tada perduokite apibrėžtą tipą komponentui taip:
funkcijaSveikinimai({name}: „GreetingsProps“.) {
grąžinti (
<div>Sveiki, {name}</div>
)
}
Naudokite sąsajos raktinį žodį, jei eksportuojate šį tipą ir norite jį išplėsti:
eksportuoti sąsajaSveikinimaiRekvizitai{
pavadinimas: eilutė;
};
Atkreipkite dėmesį į sintaksės skirtumą tarp tipo ir sąsajos – sąsaja neturi lygybės ženklo.
Galite išplėsti sąsają naudodami šį kodą:
importuoti { GreetingsProps } iš './Sveikinimai'
sąsajaWelcomePropstęsiasiSveikinimaiRekvizitai{
laikas: "styga"
}
Tada galite naudoti išplėstinę sąsają kitame komponente.
funkcijaSveiki({vardas, laikas}: WelcomeProps) {
grąžinti (
<div>
Geras {time}, {name}!
</div>
)
}
Naudoti "?" simbolį su rekvizitų sąsaja, kad apibrėžtumėte pasirenkamus rekvizitus. Čia yra sąsajos su pasirenkamu pavadinimo pasiūlymu pavyzdys.
sąsajaSveikinimaiRekvizitai{
vardas?: eilutė;
};
Jei nepateiksite pavadinimo pasiūlymo, „TypeScript“ nepateiks jokios klaidos.
Reakcijos būsenos naudojimas su TypeScript
Paprastame „JavaScript“ jūs apibrėžiate „useState()“ kabliukas taip:
const [customerName, setCustomerName] = useState("");
Šiame pavyzdyje „TypeScript“ gali lengvai nustatyti vardo tipą kaip eilutę, nes numatytoji reikšmė yra eilutė.
Tačiau kartais negalite inicijuoti būsenos iki nustatytos vertės. Tokiais atvejais turite nurodyti būsenos vertės tipą.
Štai keli pavyzdžiai, kaip apibrėžti tipus „useState() hook“.
const [customerName, setCustomerName] = useState<styga>("");
const [amžius, setAge] = useState<numerį>(0);
konst [isSubscribed, setIsSubscribed] = useState<loginis>(klaidinga);
Taip pat galite naudoti sąsają useState() kabliu. Pavyzdžiui, galite perrašyti aukščiau pateiktą pavyzdį ir naudoti toliau pateiktą sąsają.
sąsajaICklientas{
kliento vardas: eilutė ;
amžius: skaičius ;
isPrenumeruotas: loginis ;
}
Naudokite tinkintą sąsają kabliuke taip:
const [klientas, setCustomer] = useState<ICklientas>({
Kliento vardas: "Džeinė",
amžius: 10,
isPrenumeruotas: klaidinga
});
Įvykių naudojimas su TypeScript
Įvykiai yra būtini, nes jie leidžia vartotojams sąveikauti su tinklalapiu. „TypeScript“ galite įvesti įvykius arba įvykių tvarkykles.
Norėdami parodyti, apsvarstykite šį prisijungimo komponentą naudodami onClick() ir onChange() įvykius.
importuoti { useState } iš „reaguoti“;
eksportuotinumatytasfunkcijaPrisijungti() {
const [el. paštas, setEmail] = useState('');konst handleChange = (įvykis) => {
setEmail(renginys.taikinys.vertė);
};konst handClick = (įvykis) => {
console.log('Pateikta!');
};
grąžinti (
<div>
<įvesties tipas ="paštu" value={email} onChange={handleChange} />
<mygtukas onClick={() => handClick}>Pateikti</button>
</div>
);
}
Taip tvarkytumėte įvykius naudodami paprastą „JavaScript“. Tačiau „TypeScript“ tikisi, kad įvykių tvarkyklės funkcijose nurodysite įvykio parametro tipą. Laimei, „React“ siūlo keletą įvykių tipų.
Pavyzdžiui, naudokite „changeChange() įvykių tvarkyklės tipą changeEvent.
importuoti { ChangeEvent, useState } iš „reaguoti“;
const handleChange = (įvykis: ChangeEvent<HTMLInputElement>) => {
setEmail(renginys.taikinys.vertė);
};
ChangeEvent tipas naudojamas įvesties, pasirinkimo ir teksto srities elementų reikšmėms keisti. Tai yra bendras tipas, reiškiantis, kad turite perduoti DOM elementą, kurio vertė pasikeičia. Šiame pavyzdyje perdavėte įvesties elementą.
Aukščiau pateiktame pavyzdyje parodyta, kaip įvesti įvykį. Toliau pateiktame kode parodyta, kaip galite įvesti įvykių tvarkyklę.
importuoti { ChangeEventHandler, useState } iš „reaguoti“;
const handleChange: ChangeEventHandler<HTMLInputElement> = (įvykis) => {
setEmail(renginys.taikinys.vertė);
};
HandClick() įvykiui naudokite MouseEvent().
importuoti { useState, MouseEvent } iš „reaguoti“;
konst handleClick = (įvykis: MouseEvent) => {
console.log('Pateikta!');
};
Vėlgi, tipą galite pridėti prie pačios įvykių tvarkyklės.
importuoti { useState, MouseEventHandler } iš „reaguoti“;
konst handleClick: MouseEventHandler = (įvykis) => {
console.log('Pateikta!');
};
Norėdami sužinoti kitų tipų renginius, žr Reaguokite „TypeScript“ sukčiavimo lapą.
Jei kuriate dideles formas, geriau naudokite formų biblioteką, pvz., Formik, nes jis sukurtas naudojant „TypeScript“.
Kodėl turėtumėte naudoti „TypeScript“?
Galite nurodyti naujam „React“ projektui naudoti „TypeScript“ arba konvertuoti esamą. Taip pat galite naudoti „TypeScript“ su „React“ funkcijos komponentais, būsena ir „React“ įvykiais.
Įvesdami „React“ komponentus kartais gali atrodyti, kad rašote nereikalingą pagrindinį kodą. Tačiau kuo dažniau jį naudosite, tuo labiau įvertinsite jo gebėjimą užfiksuoti klaidas prieš įdiegiant kodą.