JavaScript er et svakt skrevet programmeringsspråk. På grunn av dette er det veldig skånsomt, og programmeringsfeil vil sannsynligvis forbli ubemerket under utviklingen. TypeScript, et JavaScript-typekontrollbibliotek, løser dette problemet ved å håndheve typer på verdier. Denne artikkelen vil lære deg hvordan du lager et React-prosjekt med TypeScript.
Opprette et React-prosjekt med TypeScript
Create-react-app-kommandoen lar deg lage Typescript-prosjekter ved å bruke --mal alternativ.
Til opprette et nytt React-prosjekt med TypeScript, kjør følgende kommando:
npx skape-react-app app-Navn--mal typescript
Denne kommandoen oppretter et nytt React- og TypeScript-prosjekt fra bunnen av. Du kan også legge til TypeScript i en eksisterende React-applikasjon.
For å gjøre det, naviger til prosjektet du vil legge TypeScript til og kjør følgende kode:
npm install --save typescript @typer/node @typer/react @typer/react-dom @typer/jest
Bytt deretter .js-filtypen med .tsx for filer du vil konvertere til TypeScript. Når du gjør dette, får du "
React refererer til en UMD global, men den gjeldende filen er en modul." feil. Du kan løse det ved å importere React i hver typescript-fil slik:import Reagere fra "reagere"
Som en mer enkel løsning, lag en tsconfig.json og sett jsx til react-jsx.
{
"kompilatoralternativer": {
"jsx": "react-jsx",
"mål": "es6",
"modul": "neste",
},
}
Du kan finne alle konfigurasjonsinnstillingene fra TypeScript-dokumenter.
Opprette en React-funksjonskomponent i TypeScript
Du definerer en React-funksjonskomponent på samme måte som en JavaScript-funksjon.
Nedenfor er et eksempel på en funksjonskomponent kalt Greetings.
eksportmisligholdefunksjonHilsener() {
komme tilbake (
<div>Hei Verden</div>
)
}
Denne komponenten returnerer en "Hello world"-streng, og TypeScript utleder returtypen. Du kan imidlertid kommentere returtypen:
eksportmisligholdefunksjonHilsener(): JSX.Element{
komme tilbake (
<div>Hei Verden</div>
)
}
TypeScript vil gi en feilmelding hvis Greetings-komponenten returnerer en verdi som ikke er et JSX.element.
Bruke React Props med TypeScript
React lar deg lage gjenbrukbare komponenter gjennom rekvisitter. For eksempel kan Hilsen-komponenten motta en navnepropp slik at returverdien tilpasses basert på den.
Nedenfor er den redigerte komponenten med et navn som rekvisitt. Legg merke til den innebygde typeerklæringen.
funksjonHilsener({navn}: {navn: streng}) {
komme tilbake (
<div>Hei {name}</div>
)
}
Hvis du sender navnet "Jane", vil komponenten returnere meldingen "Hei Jane".
I stedet for å skrive typedeklarasjonen i funksjonen, kan du definere den eksternt slik:
type HilsenProps = {
navn: streng;
};
Send deretter den definerte typen til komponenten som følger:
funksjonHilsener({navn}: HilsenProps) {
komme tilbake (
<div>Hei {name}</div>
)
}
Bruk grensesnittsøkeordet hvis du eksporterer denne typen og ønsker å utvide den:
eksport grensesnittHilsenProps{
navn: streng;
};
Legg merke til syntaksforskjellen mellom type og grensesnitt - grensesnittet har ikke likhetstegn.
Du kan utvide et grensesnitt ved å bruke følgende kode:
import { GreetingsProps } fra './Hilsener'
grensesnittWelcomePropsstrekkerHilsenProps{
tid: "streng"
}
Du kan deretter bruke det utvidede grensesnittet i en annen komponent.
funksjonVelkommen({navn, tid}: WelcomeProps) {
komme tilbake (
<div>
God {time}, {name}!
</div>
)
}
Bruke "?" symbol med rekvisittgrensesnittet ditt for å definere valgfrie rekvisitter. Her er et eksempel på et grensesnitt med en valgfri navnepropp.
grensesnittHilsenProps{
navn?: streng;
};
Hvis du ikke passerer en navnepropp, vil TypeScript ikke gi noen feil.
Bruke React State med TypeScript
I vanlig JavaScript definerer du useState()-kroken følgende:
const [customerName, setCustomerName] = useState("");
I dette eksemplet kan TypeScript enkelt utlede typen fornavn som en streng fordi standardverdien er en streng.
Noen ganger kan du imidlertid ikke initialisere tilstanden til en definert verdi. I disse tilfellene må du angi en tilstandsverditype.
Her er noen eksempler på hvordan du definerer typer i useState()-kroken.
const [customerName, setCustomerName] = useState<streng>("");
const [alder, settAlder] = brukState<Antall>(0);
konst [isSubscribed, setIsSubscribed] = useState<boolsk>(falsk);
Du kan også bruke et grensesnitt i useState()-kroken. For eksempel kan du skrive om eksemplet ovenfor for å bruke et grensesnitt vist nedenfor.
grensesnittIKund{
kundenavn: streng ;
alder: tall ;
er abonnert: boolsk ;
}
Bruk det tilpassede grensesnittet i kroken slik:
const [kunde, setCustomer] = brukstilstand<IKund>({
Kundenavn: "Jane",
alder: 10,
er abonnert: falsk
});
Bruke hendelser med TypeScript
Arrangementer er viktige siden de lar brukere samhandle med en nettside. I TypeScript kan du enten skrive inn hendelser eller hendelsesbehandlerne.
For å demonstrere, vurder følgende påloggingskomponent ved å bruke hendelsene onClick() og onChange().
import { useState } fra 'reagere';
eksportmisligholdefunksjonLogg Inn() {
const [email, setEmail] = useState('');konst handleChange = (hendelse) => {
sett e-post(begivenhet.mål.verdi);
};konst handleClick = (hendelse) => {
console.log('Sendt inn!');
};
komme tilbake (
<div>
<input type="e-post" value={email} onChange={handleChange} />
<knapp påKlikk={() => handleClick}>Sende inn</button>
</div>
);
}
Dette er hvordan du vil håndtere hendelser i vanlig JavaScript. TypeScript forventer imidlertid at du definerer hendelsesparametertypen i hendelsesbehandlerfunksjonene. Heldigvis tilbyr React flere hendelsestyper.
Bruk for eksempel typen changeEvent for hendelsesbehandleren handleChange().
import { ChangeEvent, useState } fra 'reagere';
const handleChange = (hendelse: ChangeEvent<HTMLInputElement>) => {
sett e-post(begivenhet.mål.verdi);
};
ChangeEvent-typen brukes til å endre verdiene for input-, select- og tekstområdeelementer. Det er en generisk type som betyr at du må sende inn DOM-elementet hvis verdi endres. I dette eksemplet passerte du input-elementet.
Eksempelet ovenfor viser hvordan du skriver inn hendelsen. Koden nedenfor viser hvordan du kan skrive inn hendelsesbehandleren i stedet.
import { ChangeEventHandler, useState } fra 'reagere';
const handleChange: ChangeEventHandler<HTMLInputElement> = (hendelse) => {
sett e-post(begivenhet.mål.verdi);
};
For handleClick()-hendelsen, bruk MouseEvent().
import { useState, MouseEvent } fra 'reagere';
konst handleClick = (hendelse: MouseEvent) => {
console.log('Sendt inn!');
};
Igjen kan du legge ved typen til selve hendelsesbehandleren.
import { useState, MouseEventHandler } fra 'reagere';
konst handleClick: MouseEventHandler = (hendelse) => {
console.log('Sendt inn!');
};
For andre arrangementstyper, sjekk ut React TypeScript-jukseark.
Hvis du lager store skjemaer, er det bedre å gjøre det bruk et skjemabibliotek som Formik, ettersom den er bygget med TypeScript.
Hvorfor bør du bruke TypeScript?
Du kan instruere et nytt React-prosjekt til å bruke TypeScript eller konvertere et eksisterende. Du kan også bruke TypeScript med React-funksjonskomponenter, tilstand og React-hendelser.
Å skrive React-komponenter kan noen ganger føles som å skrive unødvendig standardkode. Men jo mer du bruker den, jo mer vil du sette pris på dens evne til å fange opp feil før du distribuerer koden.