JavaScript on heikosti kirjoitettu ohjelmointikieli. Tämän vuoksi se on erittäin lempeä, ja ohjelmointivirheet jäävät todennäköisesti huomaamatta kehityksen aikana. TypeScript, JavaScript-tyypintarkistuskirjasto, ratkaisee tämän ongelman pakottamalla tyypit arvoille. Tämä artikkeli opettaa sinulle, kuinka voit luoda React-projektin TypeScriptillä.

React-projektin luominen TypeScriptillä

Create-react-app -komennon avulla voit luoda Typescript-projekteja käyttämällä --sapluuna vaihtoehto.

Vastaanottaja luo uusi React-projekti TypeScriptillä, suorita seuraava komento:

npx luoda-react-app-sovellus-nimi--mallin konekirjoitus

Tämä komento luo uuden React- ja TypeScript-projektin tyhjästä. Voit myös lisätä TypeScriptin olemassa olevaan React-sovellukseen.

Voit tehdä tämän siirtymällä projektiin, johon haluat lisätä TypeScriptin, ja suorittamalla seuraavan koodin:

npm install --tallenna konekirjoitus @tyypit/node @tyypit/react @tyypit/react-dom @tyypit/jest

Vaihda sitten .js-tiedostotunniste .tsx: llä tiedostoille, jotka haluat muuntaa TypeScriptiksi. Kun teet tämän, saat "

instagram viewer
React viittaa UMD-globaaliin, mutta nykyinen tiedosto on moduuli." virhe. Voit ratkaista sen tuomalla Reactin jokaiseen konekirjoitustiedostoon seuraavasti:

tuonti Reagoi alkaen "reagoi"

Yksinkertaisempi ratkaisu on luoda tsconfig.json ja asettaa jsx arvoksi react-jsx.

{
"kääntäjäasetukset": {
"jsx": "reagoi-jsx",
"kohde": "es6",
"moduuli": "seuraavaksi",
 },
}

Löydät kaikki kokoonpanoasetukset osoitteesta TypeScript-dokumentit.

React-funktiokomponentin luominen TypeScriptissä

Määrität React-funktion komponentin samalla tavalla kuin JavaScript-funktion.

Alla on esimerkki funktiokomponentista nimeltä Tervehdys.

viedäoletuksenatoimintoTerveisiä() {
palata (
<div>Hei maailma</div>
 )
}

Tämä komponentti palauttaa "Hello world"-merkkijonon, ja TypeScript päättelee sen palautustyypin. Voit kuitenkin merkitä sen palautustyypin:

viedäoletuksenatoimintoTerveisiä(): JSX.Elementti{
palata (
<div>Hei maailma</div>
 )
}

TypeScript antaa virheilmoituksen, jos Tervehdys-komponentti palauttaa arvon, joka ei ole JSX.elementti.

React Propsien käyttäminen TypeScriptin kanssa

Reactin avulla voit luoda uudelleenkäytettäviä komponentteja rekvisiittajen avulla. Esimerkiksi Tervehdys-komponentti voi vastaanottaa nimiehdotuksen siten, että palautusarvo räätälöidään sen perusteella.

Alla on muokattu komponentti, jonka nimi on rekvisiitta. Huomaa tekstin sisäinen tyyppiilmoitus.

toimintoTerveisiä({nimi}: {nimi: merkkijono}) {
palata (
<div>Hei {name}</div>
 )
}

Jos ohitat nimen "Jane", komponentti palauttaa viestin "Hei Jane".

Sen sijaan, että kirjoittaisit tyypin ilmoituksen funktioon, voit määrittää sen ulkoisesti seuraavasti:

tyyppi GreetingsProps = {
 nimi: merkkijono;
};

Välitä sitten määritetty tyyppi komponentille seuraavasti:

toimintoTerveisiä({name}: GreetingsProps) {
palata (
<div>Hei {name}</div>
 )
}

Käytä käyttöliittymän avainsanaa, jos viet tämän tyypin ja haluat laajentaa sitä:

viedä käyttöliittymäTervehdysProps{
 nimi: merkkijono;
};

Huomaa tyypin ja käyttöliittymän välinen syntaksiero — liitännässä ei ole yhtäläisyysmerkkiä.

Voit laajentaa käyttöliittymää käyttämällä seuraavaa koodia:

tuonti { GreetingsProps } alkaen './Terveisiä'
käyttöliittymäTervetuloaPropsulottuuTervehdysProps{
 aika: "merkkijono"
}

Voit sitten käyttää laajennettua käyttöliittymää toisessa komponentissa.

toimintoTervetuloa({nimi, aika}: TervetuloaProps) {
palata (
<div>
 Hyvää {aikaa}, {name}!
</div>
 )
}

Käytä "?" symboli rekvisiittakäyttöliittymälläsi valinnaisten rekvisiittamäärittämiseksi. Tässä on esimerkki käyttöliittymästä, jossa on valinnainen nimiehdotus.

käyttöliittymäTervehdysProps{
 nimi?: merkkijono;
};

Jos et välitä nimiehdotusta, TypeScript ei anna virhettä.

Reaktiotilan käyttäminen TypeScriptin kanssa

Tavallisella JavaScriptillä määrität useState()-koukku seuraavasti:

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

Tässä esimerkissä TypeScript voi helposti päätellä etunimen tyypin merkkijonona, koska oletusarvo on merkkijono.

Joskus tilaa ei kuitenkaan voi alustaa määritettyyn arvoon. Näissä tapauksissa sinun on annettava tila-arvon tyyppi.

Tässä on esimerkkejä tyyppien määrittämisestä useState()-koukussa.

const [customerName, setCustomerName] = useState<merkkijono>("");
const [ikä, setAge] = useState<määrä>(0);
konst [isSubscribed, setIsSubscribed] = useState<boolean>(väärä);

Voit myös käyttää käyttöliittymää useState()-koukussa. Voit esimerkiksi kirjoittaa yllä olevan esimerkin uudelleen käyttämään alla näkyvää käyttöliittymää.

käyttöliittymäICasiakas{
 asiakkaanName: merkkijono ;
 ikä: numero ;
 isSubscribed: boolean ;
}

Käytä mukautettua käyttöliittymää koukussa seuraavasti:

const [asiakas, setCustomer] = useState<ICasiakas>({
 Asiakkaan nimi: "Jane",
 ikä: 10,
 isSubscribed: väärä
 });

Tapahtumien käyttäminen TypeScriptin kanssa

Tapahtumat ovat tärkeitä, koska niiden avulla käyttäjät voivat olla vuorovaikutuksessa verkkosivun kanssa. TypeScriptissä voit kirjoittaa tapahtumia tai tapahtumakäsittelijöitä.

Havainnollistaaksesi seuraavaa kirjautumiskomponenttia onClick()- ja onChange()-tapahtumien avulla.

tuonti { useState } alkaen "reagoi";
viedäoletuksenatoimintoKirjaudu sisään() {
 const [sähköposti, setEmail] = useState('');
konst handleChange = (tapahtuma) => {
setEmail(tapahtuma.kohde.arvo);
 };


konst handleClick = (tapahtuma) => {
 console.log('Lähetetty!');
 };
palata (
<div>
<syöttötyyppi="sähköposti" value={email} onChange={handleChange} />
<painike onClick={() => handleClick}>Lähetä</button>
</div>
 );
}

Näin käsittelet tapahtumia tavallisessa JavaScriptissä. TypeScript kuitenkin odottaa sinun määrittävän tapahtumaparametrityypin tapahtumakäsittelijän funktioissa. Onneksi React tarjoaa useita tapahtumatyyppejä.

Käytä esimerkiksi changeEvent-tyyppiä handleChange()-tapahtumakäsittelijälle.

tuonti { ChangeEvent, useState } alkaen "reagoi";
const handleChange = (tapahtuma: ChangeEvent<HTMLInputElement>) => {
setEmail(tapahtuma.kohde.arvo);
};

ChangeEvent-tyyppiä käytetään syöte-, valinta- ja tekstialueelementtien arvojen muuttamiseksi. Se on yleinen tyyppi, mikä tarkoittaa, että sinun on välitettävä DOM-elementissä, jonka arvo muuttuu. Tässä esimerkissä ohitit syöttöelementin.

Yllä oleva esimerkki osoittaa, kuinka tapahtuma kirjoitetaan. Alla oleva koodi näyttää, kuinka voit kirjoittaa tapahtumakäsittelijän sen sijaan.

tuonti { ChangeEventHandler, useState } alkaen "reagoi";
const handleChange: ChangeEventHandler<HTMLInputElement> = (tapahtuma) => {
setEmail(tapahtuma.kohde.arvo);
};

Käytä handleClick()-tapahtumassa MouseEvent().

tuonti { useState, MouseEvent } alkaen "reagoi";
konst handleClick = (tapahtuma: MouseEvent) => {
 console.log('Lähetetty!');
};

Jälleen voit liittää tyypin itse tapahtumakäsittelijään.

tuonti { useState, MouseEventHandler } alkaen "reagoi";
konst handleClick: MouseEventHandler = (tapahtuma) => {
 console.log('Lähetetty!');
 };

Muita tapahtumatyyppejä varten katso React TypeScript-huijauslehti.

Jos luot suuria lomakkeita, se on parempi käytä lomakekirjastoa, kuten Formik, koska se on rakennettu TypeScriptillä.

Miksi sinun pitäisi käyttää TypeScriptiä?

Voit ohjeistaa uutta React-projektia käyttämään TypeScriptiä tai muuntaa olemassa olevan. Voit myös käyttää TypeScriptiä React-funktion komponenttien, tilan ja React-tapahtumien kanssa.

React-komponenttien kirjoittaminen voi joskus tuntua tarpeettoman yleiskoodin kirjoittamiselta. Kuitenkin, mitä enemmän käytät sitä, sitä enemmän arvostat sen kykyä havaita virheet ennen koodin käyttöönottoa.