JavaScript este un limbaj de programare slab tipizat. Din această cauză, este foarte indulgent, iar erorile de programare sunt probabil să treacă neobservate în timpul dezvoltării. TypeScript, o bibliotecă JavaScript de verificare a tipului, rezolvă această problemă prin aplicarea tipurilor pe valori. Acest articol vă va învăța cum să creați un proiect React cu TypeScript.
Crearea unui proiect React cu TypeScript
Comanda create-react-app vă permite să creați proiecte Typescript folosind --șablon opțiune.
La creați un nou proiect React cu TypeScript, rulați următoarea comandă:
npx crea-aplicația reacționează-Nume--şablon dactilografiat
Această comandă creează un nou proiect React și TypeScript de la zero. De asemenea, puteți adăuga TypeScript la o aplicație React existentă.
Pentru a face acest lucru, navigați la proiectul la care doriți să adăugați TypeScript și rulați următorul cod:
npm install --save typescript @tipuri/node @tipuri/react @tipuri/react-dom @tipuri/jest
Apoi schimbați extensia de fișier .js cu .tsx pentru fișierele pe care doriți să le convertiți în TypeScript. Odată ce faci asta, vei primi „
React se referă la un UMD global, dar fișierul curent este un modul.” eroare. Puteți să o rezolvați importând React în fiecare fișier dactilograf astfel:import Reacţiona din "reacţiona"
Ca o soluție mai simplă, creați un tsconfig.json și setați jsx la react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx",
"ţintă": "es6",
"modul": "esnext",
},
}
Puteți găsi toate setările de configurare din Documente TypeScript.
Crearea unei componente de funcție React în TypeScript
Definiți o componentă a funcției React în același mod ca o funcție JavaScript.
Mai jos este un exemplu de componentă a funcției numită Salutări.
exportMod implicitfuncţieSalutari() {
întoarcere (
<div>Salut Lume</div>
)
}
Această componentă returnează un șir „Hello world”, iar TypeScript deduce tipul său returnat. Cu toate acestea, puteți adnota tipul de returnare al acestuia:
exportMod implicitfuncţieSalutari(): JSX.Element{
întoarcere (
<div>Salut Lume</div>
)
}
TypeScript va genera o eroare dacă componenta Salutări returnează o valoare care nu este un element JSX.
Utilizarea React Props cu TypeScript
React vă permite să creați componente reutilizabile prin recuzită. De exemplu, componenta Salutări poate primi un nume de prop, astfel încât valoarea returnată să fie personalizată pe baza acesteia.
Mai jos este componenta editată cu un nume ca prop. Observați declarația de tip inline.
funcţieSalutari({nume}: {nume: șir}) {
întoarcere (
<div>salut {name}</div>
)
}
Dacă treceți numele „Jane”, componenta va returna mesajul „Hello Jane”.
În loc să scrieți declarația de tip în funcție, o puteți defini extern astfel:
tip GreetingsProps = {
nume: șir;
};
Apoi treceți tipul definit componentului după cum urmează:
funcţieSalutari({nume}: GreetingsProps) {
întoarcere (
<div>salut {name}</div>
)
}
Utilizați cuvântul cheie interfață dacă exportați acest tip și doriți să îl extindeți:
export interfațăSalutări, props{
nume: șir;
};
Rețineți diferența de sintaxă dintre tip și interfață - interfața nu are semnul egal.
Puteți extinde o interfață folosind următorul cod:
import { GreetingsProps } din './Salutari'
interfațăBun venitProsse extindeSalutări, props{
timp: "şir"
}
Apoi puteți utiliza interfața extinsă într-o altă componentă.
funcţieBine ati venit({nume, oră}: WelcomeProps) {
întoarcere (
<div>
{time} bun, {name}!
</div>
)
}
Folosește "?" simbol cu interfața de recuzită pentru a defini elementele de recuzită opționale. Iată un exemplu de interfață cu un nume opțional prop.
interfațăSalutări, props{
nume?: șir;
};
Dacă nu treceți un nume de prop, TypeScript nu va arunca nicio eroare.
Utilizarea React State cu TypeScript
În JavaScript simplu, definiți cârligul useState(). după cum urmează:
const [CustomerName, setCustomerName] = useState("");
În acest exemplu, TypeScript poate deduce cu ușurință tipul firstName ca șir, deoarece valoarea implicită este un șir.
Cu toate acestea, uneori nu puteți inițializa starea la o valoare definită. În aceste cazuri, trebuie să dați un tip de valoare de stare.
Iată câteva exemple de definire a tipurilor în hook-ul useState().
const [customerName, setCustomerName] = useState<şir>("");
const [vârstă, setAge] = useState<număr>(0);
const [isSubscribed, setIsSubscribed] = useState<boolean>(fals);
De asemenea, puteți utiliza o interfață în cârligul useState(). De exemplu, puteți rescrie exemplul de mai sus pentru a utiliza o interfață prezentată mai jos.
interfațăICclient{
customerName: șir ;
vârsta: număr ;
este abonat: boolean ;
}
Utilizați interfața personalizată în cârlig astfel:
const [client, setCustomer] = useState<ICclient>({
Numele clientului: "Jane",
varsta: 10,
este abonat: fals
});
Utilizarea evenimentelor cu TypeScript
Evenimentele sunt esențiale, deoarece permit utilizatorilor să interacționeze cu o pagină web. În TypeScript, puteți introduce fie evenimente, fie handlere de evenimente.
Pentru a demonstra, luați în considerare următoarea componentă Login folosind evenimentele onClick() și onChange().
import { useState } din 'reacţiona';
exportMod implicitfuncţieAutentificare() {
const [email, setEmail] = useState('');const handleChange = (eveniment) => {
setEmail(eveniment.ţintă.valoare);
};const handleClick = (eveniment) => {
console.log('Trimis!');
};
întoarcere (
<div>
<tip de intrare="e-mail" value={email} onChange={handleChange} />
<butonul onClick={() => handleClick}>Trimite</button>
</div>
);
}
Acesta este modul în care ați gestiona evenimentele în JavaScript simplu. TypeScript, totuși, se așteaptă să definiți tipul de parametru al evenimentului în funcțiile de gestionare a evenimentelor. Din fericire, React oferă mai multe tipuri de evenimente.
De exemplu, utilizați tipul changeEvent pentru handler-ul de evenimente handleChange().
import { ChangeEvent, useState } din 'reacţiona';
const handleChange = (eveniment: ChangeEvent<HTMLInputElement>) => {
setEmail(eveniment.ţintă.valoare);
};
Tipul changeEvent este utilizat pentru modificarea valorilor elementelor de intrare, selectare și textarea. Este un tip generic, ceea ce înseamnă că trebuie să treceți în elementul DOM a cărui valoare se modifică. În acest exemplu, ați trecut elementul de intrare.
Exemplul de mai sus demonstrează cum să tastați evenimentul. Codul de mai jos arată cum puteți introduce în schimb handlerul de evenimente.
import { ChangeEventHandler, useState } din 'reacţiona';
const handleChange: ChangeEventHandler<HTMLInputElement> = (eveniment) => {
setEmail(eveniment.ţintă.valoare);
};
Pentru evenimentul handleClick(), utilizați MouseEvent().
import { useState, MouseEvent } din 'reacţiona';
const handleClick = (eveniment: MouseEvent) => {
console.log('Trimis!');
};
Din nou, puteți atașa tipul la handlerul de evenimente însuși.
import { useState, MouseEventHandler } din 'reacţiona';
const handleClick: MouseEventHandler = (eveniment) => {
console.log('Trimis!');
};
Pentru alte tipuri de evenimente, consultați React TypeScript cheat sheet.
Dacă creați forme mari, este mai bine utilizați o bibliotecă de formulare precum Formik, deoarece este construit cu TypeScript.
De ce ar trebui să utilizați TypeScript?
Puteți solicita unui nou proiect React să folosească TypeScript sau să convertească unul existent. De asemenea, puteți utiliza TypeScript cu componente ale funcției React, stare și evenimente React.
Tastarea componentelor React poate fi uneori ca și cum să scrieți coduri standard inutile. Cu toate acestea, cu cât îl folosiți mai mult, cu atât mai mult îi veți aprecia capacitatea de a detecta erori înainte de a vă implementa codul.
