JavaScript je slabo napísaný programovací jazyk. Z tohto dôvodu je veľmi zhovievavý a chyby v programovaní si počas vývoja pravdepodobne ani nevšimneme. TypeScript, knižnica na kontrolu typov JavaScriptu, rieši tento problém vynútením typov na hodnotách. Tento článok vás naučí, ako vytvoriť projekt React pomocou TypeScript.
Vytvorenie projektu React s TypeScript
Príkaz create-react-app vám umožňuje vytvárať projekty Typescript pomocou --šablóna možnosť.
Komu vytvorte nový projekt React pomocou TypeScript spustite nasledujúci príkaz:
npx vytvoriť-aplikácia na reakciu-názov--šablóna strojopis
Tento príkaz vytvorí nový projekt React and TypeScript od začiatku. TypeScript môžete pridať aj do existujúcej aplikácie React.
Ak to chcete urobiť, prejdite na projekt, do ktorého chcete pridať TypeScript, a spustite nasledujúci kód:
npm install --save typescript @typy/node @typy/react @typy/react-dom @typy/jest
Potom vymeňte príponu súboru .js za .tsx pre súbory, ktoré chcete konvertovať do TypeScript. Keď to urobíte, dostanete „
React odkazuje na globálny UMD, ale aktuálny súbor je modul. chyba. Môžete to vyriešiť importovaním React do každého strojopisného súboru, ako je tento:importovať Reagovať od "reagovať"
Ako jednoduchšie riešenie vytvorte súbor tsconfig.json a nastavte jsx na reakciu-jsx.
{
"možnosti kompilátora": {
"jsx": "reagovat-jsx",
"cieľ": "es6",
"modul": "esnext",
},
}
Všetky konfiguračné nastavenia nájdete na Dokumenty TypeScript.
Vytvorenie komponentu funkcie React v TypeScript
Komponent funkcie React definujete rovnakým spôsobom ako funkciu JavaScript.
Nižšie je uvedený príklad funkčného komponentu s názvom Pozdravy.
exportpredvolenáfunkciuPozdravujem() {
vrátiť (
<div>Ahoj svet</div>
)
}
Tento komponent vracia reťazec „Hello world“ a TypeScript odvodzuje jeho návratový typ. Môžete však anotovať jeho návratový typ:
exportpredvolenáfunkciuPozdravujem(): JSX.Prvok{
vrátiť (
<div>Ahoj svet</div>
)
}
TypeScript vyvolá chybu, ak komponent Greetings vráti hodnotu, ktorá nie je JSX.element.
Použitie React Props s TypeScriptom
React vám umožňuje vytvárať opakovane použiteľné komponenty prostredníctvom rekvizít. Komponent Pozdravy môže napríklad dostať podperu názvu, takže návratová hodnota je prispôsobená na základe nej.
Nižšie je upravený komponent s názvom ako rekvizita. Všimnite si inline deklaráciu typu.
funkciuPozdravujem({meno}: {meno: reťazec}) {
vrátiť (
<div>Dobrý deň, {name}</div>
)
}
Ak zadáte meno „Jane“, komponent vráti správu „Hello Jane“.
Namiesto písania deklarácie typu vo funkcii ju môžete definovať externe takto:
typu PozdravyProps = {
meno: reťazec;
};
Potom odovzdajte definovaný typ komponentu takto:
funkciuPozdravujem({meno}: PozdravyProps) {
vrátiť (
<div>Dobrý deň, {name}</div>
)
}
Ak exportujete tento typ a chcete ho rozšíriť, použite kľúčové slovo rozhrania:
export rozhraniePozdravyProps{
meno: reťazec;
};
Všimnite si rozdiel v syntaxi medzi typom a rozhraním — rozhranie nemá znamienko rovnosti.
Rozhranie môžete rozšíriť pomocou nasledujúceho kódu:
importovať { PozdravyProps } od './Pozdravy'
rozhranieWelcomePropspredlžujePozdravyProps{
čas: "reťazec"
}
Rozšírené rozhranie potom môžete použiť v inom komponente.
funkciuVitajte({meno, čas}: WelcomeProps) {
vrátiť (
<div>
Dobrý {time}, {name}!
</div>
)
}
Použi "?" symbol s rozhraním rekvizít na definovanie voliteľných rekvizít. Tu je príklad rozhrania s voliteľným názvom prop.
rozhraniePozdravyProps{
meno?: reťazec;
};
Ak nezadáte názov podpery, TypeScript nevyvolá žiadnu chybu.
Použitie React State s TypeScriptom
V jednoduchom JavaScripte definujete háčik useState(). nasledovne:
const [menozákazníka, nastaviťNázovZákazníka] = useState("");
V tomto príklade môže TypeScript ľahko odvodiť typ firstName ako reťazec, pretože predvolená hodnota je reťazec.
Niekedy však nemôžete inicializovať stav na definovanú hodnotu. V týchto prípadoch musíte zadať typ hodnoty stavu.
Tu je niekoľko príkladov, ako definovať typy v háku useState().
const [názov zákazníka, setCustomerName] = useState<reťazec>("");
const [vek, setAge] = useState<číslo>(0);
konšt [isSubscribed, setIsSubscribed] = useState<boolovská hodnota>(falošný);
Môžete tiež použiť rozhranie v háku useState(). Môžete napríklad prepísať vyššie uvedený príklad a použiť rozhranie zobrazené nižšie.
rozhranieICcustomer{
Meno zakaznika: string ;
vek: číslo ;
isSubscribed: boolovská hodnota ;
}
Použite vlastné rozhranie v háku takto:
const [customer, setCustomer] = useState<ICcustomer>({
Meno zákazníka: "Jane",
vek: 10,
isSubscribed: falošný
});
Používanie udalostí s TypeScript
Udalosti sú nevyhnutné, pretože umožňujú používateľom interagovať s webovou stránkou. V TypeScript môžete zadať udalosti alebo obslužné rutiny udalostí.
Na demonštráciu zvážte nasledujúci komponent prihlásenia pomocou udalostí onClick() a onChange().
importovať { useState } od 'reagovať';
exportpredvolenáfunkciuPrihlásiť sa() {
const [e-mail, setEmail] = useState('');konšt handleChange = (udalosť) => {
setEmail(udalosť.cieľ.hodnota);
};konšt handleClick = (udalosť) => {
console.log('Odoslané!');
};
vrátiť (
<div>
<typ vstupu ="email" value={email} onChange={handleChange} />
<button onClick={() => handleClick}>Predložiť</button>
</div>
);
}
Takto by ste spravovali udalosti v jednoduchom JavaScripte. TypeScript však očakáva, že zadefinujete typ parametra udalosti vo funkciách obsluhy udalosti. Našťastie React poskytuje niekoľko typov udalostí.
Napríklad použite typ changeEvent pre obsluhu udalosti handleChange().
importovať { ChangeEvent, useState } od 'reagovať';
const handleChange = (udalosť: ChangeEvent<HTMLInputElement>) => {
setEmail(udalosť.cieľ.hodnota);
};
Typ changeEvent sa používa na zmenu hodnôt prvkov input, select a textarea. Je to všeobecný typ, čo znamená, že musíte zadať prvok DOM, ktorého hodnota sa mení. V tomto príklade ste prešli vstupným prvkom.
Vyššie uvedený príklad ukazuje, ako zadať udalosť. Nižšie uvedený kód ukazuje, ako môžete namiesto toho zadať obsluhu udalosti.
importovať { ChangeEventHandler, useState } od 'reagovať';
const handleChange: ChangeEventHandler<HTMLInputElement> = (udalosť) => {
setEmail(udalosť.cieľ.hodnota);
};
Pre udalosť handleClick() použite MouseEvent().
importovať { useState, MouseEvent } od 'reagovať';
konšt handleClick = (udalosť: MouseEvent) => {
console.log('Odoslané!');
};
Opäť môžete typ pripojiť k samotnej obsluhe udalosti.
importovať { useState, MouseEventHandler } od 'reagovať';
konšt handleClick: MouseEventHandler = (udalosť) => {
console.log('Odoslané!');
};
Pre iné typy udalostí si pozrite Reagovať TypeScript cheat sheet.
Ak vytvárate veľké formuláre, je to lepšie použite knižnicu formulárov ako Formik, pretože je vytvorený pomocou TypeScript.
Prečo by ste mali používať TypeScript?
Môžete dať pokyn novému projektu React, aby použil TypeScript alebo skonvertoval existujúci. TypeScript môžete použiť aj s komponentmi funkcie React, stavom a udalosťami React.
Písanie komponentov React môže mať niekedy pocit, že píšete nepotrebný štandardný kód. Čím viac ho však používate, tým viac oceníte jeho schopnosť zachytiť chyby pred nasadením kódu.
