JavaScript ir vāji ievadīta programmēšanas valoda. Šī iemesla dēļ tas ir ļoti saudzīgs, un izstrādes laikā programmēšanas kļūdas, visticamāk, netiks pamanītas. TypeScript, JavaScript tipa pārbaudes bibliotēka, atrisina šo problēmu, piespiežot vērtībām tipus. Šis raksts iemācīs jums izveidot React projektu, izmantojot TypeScript.
React projekta izveide, izmantojot TypeScript
Komanda create-react-app ļauj izveidot Typescript projektus, izmantojot --veidne opciju.
Uz izveidot jaunu React projektu ar TypeScript palaidiet šādu komandu:
npx izveidot-react-app app-nosaukums-- veidnes mašīnraksts
Šī komanda no jauna izveido jaunu React un TypeScript projektu. Varat arī pievienot TypeScript esošai React lietojumprogrammai.
Lai to izdarītu, pārejiet uz projektu, kuram vēlaties pievienot TypeScript, un palaidiet šādu kodu:
npm install --save mašīnrakstu @tipi/node @tipi/react @tipi/react-dom @tipi/jest
Pēc tam nomainiet .js faila paplašinājumu ar .tsx pret failiem, kurus vēlaties konvertēt uz TypeScript. Kad to izdarīsit, jūs saņemsit “
React attiecas uz UMD globālo failu, bet pašreizējais fails ir modulis. kļūda. To var atrisināt, importējot React katrā mašīnraksta failā, piemēram:imports Reaģēt no "reaģēt"
Kā vienkāršāku risinājumu izveidojiet failu tsconfig.json un iestatiet jsx kā react-jsx.
{
"kompilatorsOpcijas": {
"jsx": "reaģēt-jsx",
"mērķis": "es6",
"modulis": "nākamais",
},
}
Visus konfigurācijas iestatījumus varat atrast vietnē TypeScript dokumenti.
React funkcijas komponenta izveide programmā TypeScript
Funkcijas React komponents tiek definēts tāpat kā JavaScript funkcija.
Tālāk ir parādīts funkcijas komponenta, ko sauc par apsveikumu, piemērs.
eksportētnoklusējumafunkcijuSveicieni() {
atgriezties (
<div>Sveika pasaule</div>
)
}
Šis komponents atgriež virkni “Hello world”, un TypeScript secina tā atgriešanas veidu. Tomēr varat komentēt tā atgriešanas veidu:
eksportētnoklusējumafunkcijuSveicieni(): JSX.Elements{
atgriezties (
<div>Sveika pasaule</div>
)
}
TypeScript parādīs kļūdu, ja komponents Greetings atgriež vērtību, kas nav JSX.elements.
React Props izmantošana ar TypeScript
React ļauj izveidot atkārtoti lietojamus komponentus, izmantojot rekvizītus. Piemēram, komponents Sveicieni var saņemt tādu nosaukumu, ka atgriešanas vērtība tiek pielāgota, pamatojoties uz to.
Zemāk ir rediģētais komponents ar nosaukumu kā rekvizītu. Ievērojiet iekļauto tipa deklarāciju.
funkcijuSveicieni({name}: {name: string}) {
atgriezties (
<div>Sveiki, {name}</div>
)
}
Ja nodosiet vārdu “Jane”, komponents atgriezīs ziņojumu “Hello Jane”.
Tā vietā, lai funkcijā rakstītu tipa deklarāciju, varat to ārēji definēt šādi:
veids GreetingsProps = {
nosaukums: virkne;
};
Pēc tam nododiet komponentam definēto tipu šādi:
funkcijuSveicieni({name}: GreetingsProps) {
atgriezties (
<div>Sveiki, {name}</div>
)
}
Izmantojiet saskarnes atslēgvārdu, ja eksportējat šo veidu un vēlaties to paplašināt:
eksportēt saskarneApsveikumiProps{
nosaukums: virkne;
};
Ņemiet vērā sintakses atšķirību starp tipu un interfeisu — saskarnei nav vienādības zīmes.
Interfeisu var paplašināt, izmantojot šādu kodu:
imports { GreetingsProps } no './Sveicieni'
saskarneWelcomePropspagarinaApsveikumiProps{
laiks: "virkne"
}
Pēc tam varat izmantot paplašināto saskarni citā komponentā.
funkcijuLaipni lūdzam({name, time}: WelcomeProps) {
atgriezties (
<div>
Labs {time}, {name}!
</div>
)
}
Izmantojiet “?” simbolu ar jūsu rekvizītu saskarni, lai definētu izvēles rekvizītus. Šeit ir interfeisa piemērs ar izvēles nosaukuma rekvizītu.
saskarneApsveikumiProps{
vārds?: virkne;
};
Ja nenodosit nosaukumu, TypeScript neradīs kļūdu.
Reakcijas stāvokļa izmantošana ar TypeScript
Vienkāršā JavaScript jūs definējat useState() āķis sekojoši:
const [customerName, setCustomerName] = useState("");
Šajā piemērā TypeScript var viegli secināt kā virkni firstName veidu, jo noklusējuma vērtība ir virkne.
Tomēr dažreiz jūs nevarat inicializēt stāvokli līdz noteiktai vērtībai. Šādos gadījumos jums ir jānorāda stāvokļa vērtības veids.
Šeit ir daži piemēri, kā definēt tipus useState() āķī.
const [customerName, setCustomerName] = useState<virkne>("");
const [vecums, setAge] = useState<numuru>(0);
konst [isSubscribed, setIsSubscribed] = useState<Būla>(viltus);
Varat arī izmantot interfeisu useState() āķī. Piemēram, varat pārrakstīt iepriekš minēto piemēru, lai izmantotu tālāk parādīto saskarni.
saskarneIklients{
customerName: string ;
vecums: numurs ;
ir Abonēts: Būla ;
}
Izmantojiet pielāgoto interfeisu āķī šādi:
const [klients, setCustomer] = useState<Iklients>({
Klienta vārds: "Džeina",
vecums: 10,
ir Abonēts: viltus
});
Notikumu izmantošana ar TypeScript
Notikumi ir būtiski, jo tie ļauj lietotājiem mijiedarboties ar tīmekļa lapu. Programmā TypeScript varat ierakstīt notikumus vai notikumu apdarinātājus.
Lai demonstrētu, apsveriet šādu Pieteikšanās komponentu, izmantojot notikumus onClick() un onChange().
imports { useState } no "reaģēt";
eksportētnoklusējumafunkcijuPieslēgties() {
const [e-pasts, setEmail] = useState('');konst handChange = (notikums) => {
setEmail(notikumu.target.vērtība);
};konst handClick = (notikums) => {
console.log('Iesniegts!');
};
atgriezties (
<div>
<ievades veids="e-pasts" value={email} onChange={handleChange} />
<poga onClick={() => handClick}>Iesniegt</button>
</div>
);
}
Tādā veidā jūs rīkotos ar notikumiem vienkāršā JavaScript. Tomēr TypeScript sagaida, ka notikumu apstrādātāja funkcijās ir jādefinē notikuma parametra veids. Par laimi React nodrošina vairākus notikumu veidus.
Piemēram, notikumu apstrādātājam handleChange() izmantojiet veidu changeEvent.
imports { ChangeEvent, useState } no "reaģēt";
const handleChange = (notikums: ChangeEvent<HTMLInputElement>) => {
setEmail(notikumu.target.vērtība);
};
ChangeEvent veids tiek izmantots, lai mainītu ievades, atlases un teksta apgabala elementu vērtības. Tas ir vispārīgs tips, kas nozīmē, ka jums ir jānodod DOM elementā, kura vērtība mainās. Šajā piemērā jūs nokārtojāt ievades elementu.
Iepriekš minētais piemērs parāda, kā ierakstīt notikumu. Tālāk redzamais kods parāda, kā tā vietā varat ievadīt notikumu apdarinātāju.
imports { ChangeEventHandler, useState } no "reaģēt";
const handleChange: ChangeEventHandler<HTMLInputElement> = (notikums) => {
setEmail(notikumu.target.vērtība);
};
HandClick() notikumam izmantojiet MouseEvent().
imports { useState, MouseEvent } no "reaģēt";
konst handClick = (notikums: MouseEvent) => {
console.log('Iesniegts!');
};
Atkal varat pievienot veidu pašam notikumu apstrādātājam.
imports { useState, MouseEventHandler } no "reaģēt";
konst handClick: MouseEventHandler = (notikums) => {
console.log('Iesniegts!');
};
Par citiem pasākumu veidiem skatiet Reaģējiet uz TypeScript apkrāptu lapu.
Ja veidojat lielas formas, labāk to darīt izmantojiet veidlapu bibliotēku, piemēram, Formik, jo tas ir izveidots, izmantojot TypeScript.
Kāpēc jums vajadzētu izmantot TypeScript?
Varat uzdot jaunam React projektam izmantot TypeScript vai pārveidot esošu. Varat arī izmantot TypeScript ar React funkcijas komponentiem, stāvokli un React notikumiem.
Rakstot React komponentus, dažkārt var šķist, ka rakstītu nevajadzīgu standarta kodu. Tomēr, jo vairāk to izmantosit, jo vairāk novērtēsit tā spēju uztvert kļūdas pirms koda izvietošanas.
