A JavaScript egy gyengén tipizált programozási nyelv. Emiatt nagyon kíméletes, és a programozási hibákat valószínűleg nem veszik észre a fejlesztés során. A TypeScript, egy JavaScript-típusellenőrző könyvtár, úgy oldja meg ezt a problémát, hogy kényszeríti a típusokat az értékekre. Ez a cikk megtanítja, hogyan hozhat létre React projektet TypeScript segítségével.

React projekt létrehozása TypeScript segítségével

A create-react-app parancs lehetővé teszi Typescript-projektek létrehozását a --sablon választási lehetőség.

Nak nek hozzon létre egy új React projektet TypeScript használatával futtassa a következő parancsot:

npx teremt-react-app alkalmazás-név--template gépirat

Ez a parancs egy új React és TypeScript projektet hoz létre a semmiből. A TypeScriptet egy meglévő React alkalmazáshoz is hozzáadhatja.

Ehhez navigáljon ahhoz a projekthez, amelyhez TypeScriptet szeretne hozzáadni, és futtassa a következő kódot:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
instagram viewer

Ezután cserélje le a .js fájlkiterjesztést .tsx-re a TypeScript-re konvertálni kívánt fájlokhoz. Ha ezt megteszi, megkapja a „A React egy UMD globálisra utal, de az aktuális fájl egy modul. hiba. Megoldhatja úgy, hogy minden gépfájlba importálja a Reactot, például:

import Reagál tól től "reagál"

Egyszerűbb megoldásként hozzon létre egy tsconfig.json fájlt, és állítsa be a jsx-t a react-jsx értékre.

{
"compilerOptions": {
"jsx": "react-jsx",
"cél": "es6",
"modult": "következő",
 },
}

Az összes konfigurációs beállítást megtalálja a TypeScript dokumentumok.

React függvénykomponens létrehozása TypeScriptben

A React függvénykomponenst ugyanúgy kell megadni, mint egy JavaScript függvényt.

Az alábbiakban látható egy példa a Greetings nevű függvénykomponensre.

exportalapértelmezettfunkcióÜdvözlet() {
Visszatérés (
<div>Helló Világ</div>
 )
}

Ez az összetevő egy „Hello world” karakterláncot ad vissza, a TypeScript pedig kikövetkezteti a visszatérési típusát. A visszatérési típust azonban megjelölheti:

exportalapértelmezettfunkcióÜdvözlet(): JSX.Elem{
Visszatérés (
<div>Helló Világ</div>
 )
}

A TypeScript hibát jelez, ha a Greetings összetevő olyan értéket ad vissza, amely nem JSX.elem.

React Props használata TypeScript segítségével

A React lehetővé teszi újrafelhasználható alkatrészek létrehozását kellékeken keresztül. Például az Üdvözlet összetevő kaphat egy névreklámot, így a visszatérési érték ez alapján testreszabható.

Alább látható a szerkesztett komponens névvel kellékként. Figyelje meg a soron belüli típusdeklarációt.

funkcióÜdvözlet({name}: {name: string}) {
Visszatérés (
<div>szia {name}</div>
 )
}

Ha átadja a „Jane” nevet, az összetevő a „Hello Jane” üzenetet adja vissza.

Ahelyett, hogy a függvénybe írná a típusdeklarációt, külsőleg definiálhatja a következőképpen:

típus GreetingsProps = {
 név: string;
};

Ezután adja át a meghatározott típust az összetevőnek a következőképpen:

funkcióÜdvözlet({name}: GreetingsProps) {
Visszatérés (
<div>szia {name}</div>
 )
}

Használja az interfész kulcsszót, ha ezt a típust exportálja, és ki szeretné bővíteni:

export felületGreetingsProps{
 név: string;
};

Vegye figyelembe a típus és az interfész közötti szintaktikai különbséget – az interfésznek nincs egyenlőségjele.

Az alábbi kóddal bővítheti ki az interfészt:

import { GreetingsProps } tól től './Üdvözlet'
felületWelcomePropskiterjedGreetingsProps{
 idő: "húr"
}

Ezután használhatja a kiterjesztett felületet egy másik összetevőben.

funkcióÜdvözöljük({név, idő}: WelcomeProps) {
Visszatérés (
<div>
 Jó {time}, {name}!
</div>
 )
}

Használja a "?" szimbólumot a kellékek felületével az opcionális kellékek meghatározásához. Íme egy példa egy interfészre, opcionális névprofillal.

felületGreetingsProps{
 név?: string;
};

Ha nem ad át egy névajánlatot, a TypeScript nem ad hibát.

React State használata TypeScript segítségével

A sima JavaScriptben Ön határozza meg a useState() hook alábbiak szerint:

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

Ebben a példában a TypeScript könnyen ki tudja következtetni a keresztnév típusát karakterláncként, mivel az alapértelmezett érték egy karakterlánc.

Néha azonban nem tudja inicializálni az állapotot egy meghatározott értékre. Ezekben az esetekben meg kell adnia az állapotérték típusát.

Íme néhány példa a típusok meghatározására a useState() hook-ban.

const [customerName, setCustomerName] = useState<húr>("");
const [age, setAge] = useState<szám>(0);
const [isSubscribed, setIsSubscribed] = useState<logikai érték>(hamis);

Használhat interfészt a useState() hook-ban is. Például átírhatja a fenti példát az alább látható felület használatához.

felületICustomer{
 ügyfélnév: string ;
 életkor: szám ;
 isFeliratkozott: logikai érték ;
}

Használja a horog egyéni felületét a következőképpen:

const [ügyfél, setCustomer] = useState<ICustomer>({
 Ügyfél neve: "Jane",
 életkor: 10,
 isFeliratkozott: hamis
 });

Események használata TypeScript segítségével

Az események elengedhetetlenek, mivel lehetővé teszik a felhasználók számára, hogy interakcióba lépjenek egy weboldallal. A TypeScriptben beírhatja az eseményeket vagy az eseménykezelőket.

A bemutatáshoz vegye figyelembe a következő Bejelentkezési összetevőt az onClick() és onChange() események használatával.

import { useState } tól től 'reagál';
exportalapértelmezettfunkcióBelépés() {
 const [email, setEmail] = useState('');
const handleChange = (esemény) => {
setEmail(esemény.cél.érték);
 };


const handleClick = (esemény) => {
 console.log('Beküldve!');
 };
Visszatérés (
<div>
<bemenet típusa="email" value={email} onChange={handleChange} />
<gomb onClick={() => handleClick}>Beküldés</button>
</div>
 );
}

Így kezelheti az eseményeket egyszerű JavaScriptben. A TypeScript azonban elvárja, hogy az eseményparaméter típusát határozza meg az eseménykezelő függvényekben. Szerencsére a React többféle eseménytípust biztosít.

Például használja a changeEvent típust a handleChange() eseménykezelőhöz.

import { ChangeEvent, useState } tól től 'reagál';
const handleChange = (esemény: ChangeEvent<HTMLInputElement>) => {
setEmail(esemény.cél.érték);
};

A changeEvent típus a bemeneti, kijelölési és szövegterületi elemek értékeinek módosítására szolgál. Ez egy általános típus, ami azt jelenti, hogy át kell adnia azt a DOM elemet, amelynek értéke megváltozik. Ebben a példában átadta a bemeneti elemet.

A fenti példa bemutatja, hogyan kell beírni az eseményt. Az alábbi kód megmutatja, hogyan írhatja be helyette az eseménykezelőt.

import { ChangeEventHandler, useState } tól től 'reagál';
const handleChange: ChangeEventHandler<HTMLInputElement> = (esemény) => {
setEmail(esemény.cél.érték);
};

A handleClick() eseményhez használja a MouseEvent()-et.

import { useState, MouseEvent } tól től 'reagál';
const handleClick = (esemény: MouseEvent) => {
 console.log('Beküldve!');
};

Ismét csatolhatja a típust magához az eseménykezelőhöz.

import { useState, MouseEventHandler } tól től 'reagál';
const handleClick: MouseEventHandler = (event) => {
 console.log('Beküldve!');
 };

Más rendezvénytípusokért tekintse meg a React TypeScript csalólap.

Ha nagy űrlapokat hoz létre, akkor jobb használj egy űrlapkönyvtárat, mint például a Formik, mivel TypeScripttel készült.

Miért érdemes TypeScriptet használni?

Utasíthat egy új React projektet TypeScript használatára, vagy konvertálhat egy meglévőt. A TypeScriptet a React függvénykomponensekkel, állapotokkal és React eseményekkel is használhatja.

A React összetevők beírása néha olyan érzés lehet, mintha szükségtelen sablonkódot írnánk. Minél többet használja azonban, annál jobban értékelni fogja, hogy a kód telepítése előtt képes észlelni a hibákat.