Kako koristiti TypeScript u React aplikacijama

JavaScript je slabo tipiziran programski jezik. Zbog toga je vrlo blag, a programske pogreške vjerojatno će proći nezapaženo tijekom razvoja. TypeScript, JavaScript biblioteka za provjeru tipa, rješava ovaj problem nametanjem tipova na vrijednosti. Ovaj članak će vas naučiti kako stvoriti React projekt s TypeScriptom.

Stvaranje React projekta s TypeScriptom

Naredba create-react-app omogućuje vam stvaranje Typescript projekata pomoću --predložak opcija.

Do izraditi novi React projekt s TypeScriptom pokrenite sljedeću naredbu:

npx stvoriti-react-app aplikacija-Ime-- predložak strojopis

Ova naredba stvara novi React i TypeScript projekt od nule. Također možete dodati TypeScript postojećoj React aplikaciji.

Da biste to učinili, dođite do projekta kojem želite dodati TypeScript i pokrenite sljedeći kod:

npm install --save typescript @vrste/node @vrste/react @vrste/react-dom @vrste/jest

Zatim zamijenite datotečni nastavak .js s .tsx za datoteke koje želite pretvoriti u TypeScript. Nakon što to učinite, dobit ćete "

React se odnosi na UMD global, ali trenutna datoteka je modul.” greška. To možete riješiti uvozom Reacta u svaku typescript datoteku ovako:

uvoz Reagirati iz "reagirati"

Kao jednostavnije rješenje, stvorite tsconfig.json i postavite jsx na react-jsx.

{
"compilerOptions": {
"jsx": "reagirati-jsx",
"cilj": "es6",
"modul": "esnext",
 },
}

Sve konfiguracijske postavke možete pronaći na TypeScript dokumenti.

Stvaranje React funkcijske komponente u TypeScriptu

Komponentu React funkcije definirate na isti način kao i JavaScript funkciju.

Ispod je primjer funkcijske komponente pod nazivom Pozdrav.

izvozzadanofunkcijaLijepi pozdrav() {
povratak (
<div>Pozdrav svijete</div>
 )
}

Ova komponenta vraća niz "Hello world", a TypeScript zaključuje njegov povratni tip. Međutim, možete označiti njegovu vrstu povrata:

izvozzadanofunkcijaLijepi pozdrav(): JSX.Element{
povratak (
<div>Pozdrav svijete</div>
 )
}

TypeScript će izbaciti pogrešku ako komponenta Greetings vrati vrijednost koja nije JSX.element.

Korištenje React Props-a s TypeScriptom

React vam omogućuje stvaranje komponenti za višekratnu upotrebu putem rekvizita. Na primjer, komponenta Pozdravi može primiti rekvizit imena tako da se povratna vrijednost prilagođava na temelju njega.

Ispod je uređena komponenta s imenom kao prop. Obratite pažnju na inline deklaraciju tipa.

funkcijaLijepi pozdrav({name}: {name: niz}) {
povratak (
<div>Pozdrav {name}</div>
 )
}

Ako proslijedite ime "Jane", komponenta će vratiti poruku "Hello Jane".

Umjesto pisanja deklaracije tipa u funkciji, možete je definirati eksterno ovako:

tip GreetingsProps = {
 naziv: niz;
};

Zatim proslijedite definirani tip komponenti na sljedeći način:

funkcijaLijepi pozdrav({name}: PozdraviProps) {
povratak (
<div>Pozdrav {name}</div>
 )
}

Koristite ključnu riječ sučelja ako izvozite ovu vrstu i želite je proširiti:

izvoz sučeljePozdraviProps{
 naziv: niz;
};

Obratite pažnju na razliku u sintaksi između tipa i sučelja — sučelje nema znak jednakosti.

Sučelje možete proširiti pomoću sljedećeg koda:

uvoz {GreetingsProps} iz './Pozdrav'
sučeljeWelcomePropsproteže sePozdraviProps{
 vrijeme: "niz"
}

Zatim možete koristiti prošireno sučelje u drugoj komponenti.

funkcijaDobrodošli({ime, vrijeme}: WelcomeProps) {
povratak (
<div>
 Dobro {time}, {name}!
</div>
 )
}

Koristiti "?" simbol sa sučeljem vaših rekvizita za definiranje dodatnih rekvizita. Ovdje je primjer sučelja s izbornim imenom prop.

sučeljePozdraviProps{
 ime?: niz;
};

Ako ne proslijedite propis imena, TypeScript neće izbaciti nikakvu pogrešku.

Korištenje React State s TypeScriptom

U običnom JavaScriptu, vi definirate kuka useState(). kako slijedi:

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

U ovom primjeru, TypeScript može lako zaključiti vrstu firstName kao niz jer je zadana vrijednost niz.

Međutim, ponekad ne možete inicijalizirati stanje na definiranu vrijednost. U tim slučajevima morate dati tip vrijednosti stanja.

Evo nekoliko primjera kako definirati tipove u useState() kuki.

const [CustomerName, setCustomerName] = useState<niz>("");
const [dob, setAge] = useState<broj>(0);
konst [isSubscribed, setIsSubscribed] = useState<Booleov>(lažno);

Također možete koristiti sučelje u useState() kuki. Na primjer, možete prepisati gornji primjer da biste koristili dolje prikazano sučelje.

sučeljeICustomer{
 Ime kupca: niz;
 dob: broj ;
 je pretplaćen: Booleov ;
}

Koristite prilagođeno sučelje u kuki ovako:

const [kupac, setKupac] = useState<ICustomer>({
 Ime kupca: "Jane",
 dob: 10,
 je pretplaćen: lažno
 });

Korištenje događaja s TypeScriptom

Događaji su bitni jer omogućuju korisnicima interakciju s web stranicom. U TypeScriptu možete upisivati ​​događaje ili rukovatelje događajima.

Za demonstraciju, razmotrite sljedeću komponentu prijave koja koristi događaje onClick() i onChange().

uvoz {useState} iz 'reagirati';
izvozzadanofunkcijaPrijaviti se() {
 const [e-pošta, setEmail] = useState('');
konst handleChange = (event) => {
setEmail(događaj.cilj.vrijednost);
 };
konst handleClick = (događaj) => {
 console.log('Poslano!');
 };
povratak (
<div>
<vrsta unosa="elektronička pošta" vrijednost={email} onChange={handleChange} />
<gumb onClick={() => handleClick}>podnijeti</button>
</div>
 );
}

Ovako biste rukovali događajima u običnom JavaScriptu. TypeScript, međutim, očekuje da definirate vrstu parametra događaja u funkcijama rukovatelja događajima. Srećom, React nudi nekoliko vrsta događaja.

Na primjer, koristite changeEvent tip za handleChange() rukovatelj događajima.

uvoz { ChangeEvent, useState } iz 'reagirati';
const handleChange = (događaj: ChangeEvent<HTMLInputElement>) => {
setEmail(događaj.cilj.vrijednost);
};

ChangeEvent tip se koristi za promjenu vrijednosti elemenata input, select i textarea. To je generički tip što znači da morate proslijediti DOM element čija se vrijednost mijenja. U ovom primjeru proslijedili ste ulazni element.

Gornji primjer pokazuje kako upisati događaj. Kôd u nastavku pokazuje kako umjesto toga možete upisati rukovatelj događajima.

uvoz { ChangeEventHandler, useState } iz 'reagirati';
const handleChange: ChangeEventHandler<HTMLInputElement> = (događaj) => {
setEmail(događaj.cilj.vrijednost);
};

Za događaj handleClick() koristite MouseEvent().

uvoz {useState, MouseEvent} iz 'reagirati';
konst handleClick = (događaj: MouseEvent) => {
 console.log('Poslano!');
};

Opet, tip možete priložiti samom rukovatelju događaja.

uvoz {useState, MouseEventHandler} iz 'reagirati';
konst handleClick: MouseEventHandler = (event) => {
 console.log('Poslano!');
 };

Za ostale vrste događaja, pogledajte React TypeScript varalica.

Ako stvarate velike oblike, bolje je koristite biblioteku obrazaca kao što je Formik, budući da je izgrađen pomoću TypeScripta.

Zašto biste trebali koristiti TypeScript?

Možete uputiti novi React projekt da koristi TypeScript ili pretvoriti postojeći. Također možete koristiti TypeScript s React funkcijskim komponentama, stanjem i React događajima.

Upisivanje React komponenti ponekad se može činiti kao pisanje nepotrebnog šablonskog koda. Međutim, što ga više koristite, to ćete više cijeniti njegovu sposobnost hvatanja pogrešaka prije nego što implementirate svoj kod.