TypeScripti kasutamine Reacti rakendustes

JavaScript on nõrgalt tipitud programmeerimiskeel. Seetõttu on see väga leebe ja programmeerimisvead jäävad arenduse käigus tõenäoliselt märkamatuks. TypeScript, JavaScripti tüübikontrolli teek, lahendab selle probleemi, jõustades väärtustele tüübid. See artikkel õpetab teile, kuidas TypeScriptiga Reacti projekti luua.

Reaktsiooniprojekti loomine TypeScriptiga

Käsk create-react-app võimaldab teil luua Typescripti projekte kasutades -- mall valik.

To luua uus Reacti projekt TypeScriptiga käivitage järgmine käsk:

npx luua-react-rakenduse rakendus-nimi--mall masinakiri

See käsk loob nullist uue Reacti ja TypeScripti projekti. TypeScripti saate lisada ka olemasolevale Reacti rakendusele.

Selleks liikuge projekti juurde, millele soovite TypeScripti lisada, ja käivitage järgmine kood:

npm install --save masinakiri @tüübid/node @tüübid/react @tüübid/react-dom @tüübid/jest

Seejärel vahetage .js-faililaiend laiendiga tsx failide vastu, mille soovite TypeScriptiks teisendada. Kui teete seda, saate "React viitab globaalsele UMD-le, kuid praegune fail on moodul.

viga. Saate selle lahendada, importides Reacti igasse masinakirjafaili järgmiselt:

importida Reageerige alates "reageerida"

Lihtsama lahendusena looge fail tsconfig.json ja määrake jsx väärtuseks react-jsx.

{
"kompilaatori valikud": {
"jsx": "reageerida-jsx",
"sihtmärk": "es6",
"moodul": "järgmiseks",
 },
}

Kõik konfiguratsiooniseaded leiate lehelt TypeScripti dokumendid.

React-funktsiooni komponendi loomine TypeScriptis

Funktsiooni React komponendi määratlete samamoodi nagu JavaScripti funktsiooni.

Allpool on näide funktsiooni komponendist nimega Tervitused.

eksportidavaikimisifunktsiooniTervitused() {
tagasi (
<div>Tere, Maailm</div>
 )
}

See komponent tagastab stringi „Tere maailm” ja TypeScript järeldab selle tagastustüübi. Siiski saate märkida selle tagastustüübi:

eksportidavaikimisifunktsiooniTervitused(): JSX.Element{
tagasi (
<div>Tere, Maailm</div>
 )
}

TypeScript annab veateate, kui tervituskomponent tagastab väärtuse, mis ei ole JSX.element.

React Propsi kasutamine koos TypeScriptiga

React võimaldab rekvisiitide kaudu luua korduvkasutatavaid komponente. Näiteks tervituste komponent võib vastu võtta sellise nimetuse, et tagastatav väärtus on selle alusel kohandatud.

Allpool on redigeeritud komponent koos nimega rekvisiidina. Pange tähele tekstisisest tüübideklaratsiooni.

funktsiooniTervitused({nimi}: {nimi: string}) {
tagasi (
<div>Tere, {name}</div>
 )
}

Kui edastate nime "Jane", tagastab komponent sõnumi "Tere Jane".

Funktsiooni tüübideklaratsiooni kirjutamise asemel saate selle väliselt määratleda järgmiselt:

tüüp GreetingsProps = {
 nimi: string;
};

Seejärel edastage määratletud tüüp komponendile järgmiselt:

funktsiooniTervitused({name}: TervitusedProps) {
tagasi (
<div>Tere, {name}</div>
 )
}

Kasutage liidese märksõna, kui ekspordite seda tüüpi ja soovite seda laiendada:

eksportida liidesTervitusedRekvisiidid{
 nimi: string;
};

Pange tähele süntaksi erinevust tüübi ja liidese vahel – liidesel pole võrdusmärki.

Liidest saate laiendada järgmise koodi abil:

importida { GreetingsProps } alates './Tervitused'
liidesWelcomePropsulatubTervitusedRekvisiidid{
 aeg: "string"
}

Seejärel saate laiendatud liidest kasutada mõnes teises komponendis.

funktsiooniTere tulemast({nimi, aeg}: WelcomeProps) {
tagasi (
<div>
 Head {time}, {name}!
</div>
 )
}

Kasuta "?" sümbolit oma rekvisiitide liidesega, et määratleda valikulised rekvisiidid. Siin on näide liidesest, millel on valikuline nimi.

liidesTervitusedRekvisiidid{
 nimi?: string;
};

Kui te nimeproportsiooni ei edasta, ei anna TypeScript viga.

Reageerimisoleku kasutamine koos TypeScriptiga

Lihtsas JavaScriptis määratlete konks useState(). järgnevalt:

const [customerName, setCustomerName] = useState("");

Selles näites saab TypeScript hõlpsasti järeldada eesnime tüübi stringina, kuna vaikeväärtus on string.

Kuid mõnikord ei saa te olekut määratud väärtusele lähtestada. Sellistel juhtudel peate määrama oleku väärtuse tüübi.

Siin on mõned näited selle kohta, kuidas konksus useState() tüüpe määratleda.

const [customerName, setCustomerName] = useState<string>("");
const [vanus, setAge] = useState<number>(0);
konst [isSubscribed, setIsSubscribed] = useState<tõeväärtus>(vale);

Liidest saate kasutada ka konksus useState(). Näiteks saate ülaltoodud näite ümber kirjutada, et kasutada allpool näidatud liidest.

liidesIklient{
 kliendinimi: string ;
 vanus: arv ;
 on tellitud: tõeväärtus ;
}

Kasutage konksu kohandatud liidest järgmiselt:

const [klient, setCustomer] = useState<Iklient>({
 Kliendi nimi: "Jane",
 vanus: 10,
 on tellitud: vale
 });

Sündmuste kasutamine TypeScriptiga

Sündmused on olulised, kuna need võimaldavad kasutajatel veebilehega suhelda. TypeScriptis saate sisestada sündmused või sündmuste töötlejad.

Demonstreerimiseks kaaluge järgmist sisselogimiskomponenti, kasutades sündmusi onClick() ja onChange().

importida { useState } alates 'reageerida';
eksportidavaikimisifunktsiooniLogi sisse() {
 const [e-post, setEmail] = useState('');
konst handChange = (sündmus) => {
setEmail(sündmus.sihtmärk.väärtus);
 };
konst handClick = (sündmus) => {
 console.log('Esitatud!');
 };
tagasi (
<div>
<sisendi tüüp="meili" value={email} onChange={handleChange} />
<nupp onClick={() => käepideClick}>Esita</button>
</div>
 );
}

Nii käsitleksite sündmusi tavalises JavaScriptis. TypeScript aga eeldab, et määratlete sündmuse parameetri tüübi sündmuste käitleja funktsioonides. Õnneks pakub React mitut tüüpi sündmusi.

Näiteks kasutage sündmuste käitleja handleChange() jaoks tüüpi changeEvent.

importida { ChangeEvent, useState } alates 'reageerida';
const handleChange = (sündmus: ChangeEvent<HTMLInputElement>) => {
setEmail(sündmus.sihtmärk.väärtus);
};

Tüüpi changeEvent kasutatakse sisend-, valiku- ja tekstiala elementide väärtuste muutmiseks. See on üldine tüüp, mis tähendab, et peate sisestama DOM-elemendi, mille väärtus muutub. Selles näites edastasite sisendelemendi.

Ülaltoodud näide näitab, kuidas sündmust tippida. Allolev kood näitab, kuidas saate selle asemel sisestada sündmuste käitleja.

importida { ChangeEventHandler, useState } alates 'reageerida';
const handleChange: ChangeEventHandler<HTMLInputElement> = (sündmus) => {
setEmail(sündmus.sihtmärk.väärtus);
};

Sündmuse handleClick() jaoks kasutage MouseEvent().

importida { useState, MouseEvent } alates 'reageerida';
konst handleClick = (sündmus: MouseEvent) => {
 console.log('Esitatud!');
};

Jällegi saate tüübi kinnitada sündmuste käitleja enda külge.

importida { useState, MouseEventHandler } alates 'reageerida';
konst handleClick: MouseEventHandler = (sündmus) => {
 console.log('Esitatud!');
 };

Muude sündmuste tüüpide kohta vaadake Reageerige TypeScripti petulehele.

Kui loote suuri vorme, on parem kasutage vormiteeki nagu Formik, kuna see on üles ehitatud TypeScriptiga.

Miks peaksite TypeScripti kasutama?

Saate anda uuele Reacti projektile käsu kasutada TypeScripti või teisendada olemasolevat. TypeScripti saate kasutada ka funktsiooni React komponentide, oleku ja React sündmustega.

Reacti komponentide tippimine võib mõnikord tunduda nagu tarbetu standardkoodi kirjutamine. Kuid mida rohkem te seda kasutate, seda rohkem hindate selle võimet enne koodi juurutamist vead tabada.