JavaScript je slabo tipiziran programski jezik. Zaradi tega je zelo popustljiv in verjetno bodo programske napake med razvojem ostale neopažene. TypeScript, knjižnica JavaScript za preverjanje tipov, rešuje to težavo z uveljavljanjem tipov v vrednosti. Ta članek vas bo naučil, kako ustvariti projekt React s TypeScript.
Ustvarjanje projekta React s TypeScript
Ukaz create-react-app vam omogoča ustvarjanje projektov Typescript z uporabo --šablona možnost.
Za ustvarite nov projekt React s TypeScriptom zaženite naslednji ukaz:
npx ustvariti-react-app app-ime--tipkopis predloge
Ta ukaz ustvari nov projekt React in TypeScript iz nič. TypeScript lahko dodate tudi obstoječi aplikaciji React.
To storite tako, da se pomaknete do projekta, v katerega želite dodati TypeScript, in zaženete to kodo:
npm install --save typescript @vrste/node @vrste/react @vrste/react-dom @vrste/jest
Nato zamenjajte pripono datoteke .js z .tsx za datoteke, ki jih želite pretvoriti v TypeScript. Ko to storite, boste prejeli »React se nanaša na global UMD, toda trenutna datoteka je modul.«
napaka. To lahko rešite tako, da uvozite React v vsako tipkopisno datoteko, kot je ta:uvoz Reagiraj od "reagirati"
Kot bolj preprosto rešitev ustvarite tsconfig.json in nastavite jsx na react-jsx.
{
"prevajalnikOptions": {
"jsx": "reagirati-jsx",
"tarča": "es6",
"modul": "esnext",
},
}
Vse konfiguracijske nastavitve najdete v Dokumenti TypeScript.
Ustvarjanje komponente funkcije React v TypeScriptu
Komponento funkcije React definirate na enak način kot funkcijo JavaScript.
Spodaj je primer funkcijske komponente, imenovane Pozdravi.
izvozprivzetofunkcijoPozdravi() {
vrnitev (
<div>Pozdravljen, svet</div>
)
}
Ta komponenta vrne niz »Hello world«, TypeScript pa sklepa o vrnjenem tipu. Lahko pa označite njegovo vrnjeno vrsto:
izvozprivzetofunkcijoPozdravi(): JSX.Element{
vrnitev (
<div>Pozdravljen, svet</div>
)
}
TypeScript bo sprožil napako, če komponenta Greetings vrne vrednost, ki ni JSX.element.
Uporaba React Props s TypeScript
React vam omogoča ustvarjanje komponent za večkratno uporabo prek rekvizitov. Na primer, komponenta Pozdravi lahko prejme podlago za ime, tako da je vrnjena vrednost prilagojena na podlagi tega.
Spodaj je urejena komponenta z imenom kot prop. Bodite pozorni na deklaracijo tipa v vrstici.
funkcijoPozdravi({name}: {name: niz}) {
vrnitev (
<div>Pozdravljeni {name}</div>
)
}
Če posredujete ime »Jane«, bo komponenta vrnila sporočilo »Hello Jane«.
Namesto da deklaracijo tipa zapišete v funkcijo, jo lahko definirate zunaj takole:
vrsta GreetingsProps = {
ime: niz;
};
Nato posredujte definirani tip komponenti na naslednji način:
funkcijoPozdravi({name}: Lep pozdrav) {
vrnitev (
<div>Pozdravljeni {name}</div>
)
}
Če izvažate to vrsto in jo želite razširiti, uporabite ključno besedo vmesnik:
izvoz vmesnikPozdraviProps{
ime: niz;
};
Upoštevajte razliko v sintaksi med vrsto in vmesnikom – vmesnik nima znaka enačaja.
Vmesnik lahko razširite z naslednjo kodo:
uvoz {GreetingsProps} od './Pozdravi'
vmesnikWelcomePropsse raztezaPozdraviProps{
čas: "vrvica"
}
Nato lahko uporabite razširjeni vmesnik v drugi komponenti.
funkcijodobrodošli({ime, čas}: WelcomeProps) {
vrnitev (
<div>
Dobro {time}, {name}!
</div>
)
}
Uporabi "?" simbol z vašim vmesnikom rekvizitov za definiranje neobveznih rekvizitov. Tukaj je primer vmesnika z izbirnim imenom prop.
vmesnikPozdraviProps{
ime?: niz;
};
Če ne posredujete name prop, TypeScript ne bo vrgel nobene napake.
Uporaba stanja React s TypeScriptom
V navadnem JavaScriptu definirate vi kavelj useState(). kot sledi:
const [customerName, setCustomerName] = useState("");
V tem primeru lahko TypeScript zlahka sklepa o vrsti firstName kot nizu, ker je privzeta vrednost niz.
Vendar včasih stanja ne morete inicializirati na določeno vrednost. V teh primerih morate podati vrsto vrednosti stanja.
Tukaj je nekaj primerov, kako definirati tipe v kavlju useState().
const [customerName, setCustomerName] = useState<vrvica>("");
const [starost, setAge] = useState<število>(0);
konst [isSubscribed, setIsSubscribed] = useState<logično>(lažno);
Uporabite lahko tudi vmesnik v kavlju useState(). Zgornji primer lahko na primer prepišete za uporabo spodaj prikazanega vmesnika.
vmesnikICustomer{
customerName: niz;
starost: številka ;
je naročen: logično ;
}
Uporabite vmesnik po meri v kljukici takole:
const [stranka, setCustomer] = useState<ICustomer>({
Ime stranke: "Jane",
starost: 10,
je naročen: lažno
});
Uporaba dogodkov s TypeScriptom
Dogodki so bistveni, saj uporabnikom omogočajo interakcijo s spletno stranjo. V TypeScript lahko vnašate dogodke ali obdelovalce dogodkov.
Za prikaz razmislite o naslednji komponenti prijave z dogodkoma onClick() in onChange().
uvoz {useState} od 'reagirati';
izvozprivzetofunkcijoVpiši se() {
const [email, setEmail] = useState('');konst handleChange = (dogodek) => {
setEmail(dogodek.tarča.vrednost);
};konst handleClick = (dogodek) => {
console.log('Oddano!');
};
vrnitev (
<div>
<vrsta vnosa="E-naslov" value={email} onChange={handleChange} />
<gumb onClick={() => handleClick}>Predloži</button>
</div>
);
}
Tako bi obravnavali dogodke v navadnem JavaScriptu. TypeScript pa od vas pričakuje, da definirate vrsto parametra dogodka v funkcijah za obravnavo dogodkov. Na srečo React ponuja več vrst dogodkov.
Uporabite na primer vrsto changeEvent za obravnavo dogodkov handleChange().
uvoz { ChangeEvent, useState } od 'reagirati';
const handleChange = (dogodek: ChangeEvent<HTMLInputElement>) => {
setEmail(dogodek.tarča.vrednost);
};
Vrsta changeEvent se uporablja za spreminjanje vrednosti elementov vnosa, izbire in besedilnega polja. To je splošen tip, kar pomeni, da morate posredovati element DOM, katerega vrednost se spremeni. V tem primeru ste posredovali vhodni element.
Zgornji primer prikazuje, kako vtipkati dogodek. Spodnja koda prikazuje, kako lahko namesto tega vnesete obravnavo dogodkov.
uvoz { ChangeEventHandler, useState } od 'reagirati';
const handleChange: ChangeEventHandler<HTMLInputElement> = (dogodek) => {
setEmail(dogodek.tarča.vrednost);
};
Za dogodek handleClick() uporabite MouseEvent().
uvoz {useState, MouseEvent} od 'reagirati';
konst handleClick = (dogodek: MouseEvent) => {
console.log('Oddano!');
};
Ponovno lahko vrsto pripnete samemu obdelovalcu dogodkov.
uvoz {useState, MouseEventHandler} od 'reagirati';
konst handleClick: MouseEventHandler = (dogodek) => {
console.log('Oddano!');
};
Za druge vrste dogodkov si oglejte React TypeScript goljufija.
Če ustvarjate velike oblike, je bolje, da uporabite knjižnico obrazcev, kot je Formik, saj je zgrajen s TypeScriptom.
Zakaj bi morali uporabljati TypeScript?
Novemu projektu React lahko naročite uporabo TypeScript ali pretvorite obstoječega. TypeScript lahko uporabite tudi s komponentami funkcije React, stanjem in dogodki React.
Vnašanje komponent React se lahko včasih zdi, kot da pišete nepotrebno standardno kodo. Vendar bolj ko ga boste uporabljali, bolj boste cenili njegovo zmožnost odkrivanja napak, preden uvedete kodo.
