JavaScript är ett svagt skrivet programmeringsspråk. På grund av detta är det mycket överseende, och programmeringsfel kommer sannolikt att förbli obemärkta under utvecklingen. TypeScript, ett JavaScript-typkontrollbibliotek, löser det här problemet genom att tillämpa typer på värden. Den här artikeln kommer att lära dig hur du skapar ett React-projekt med TypeScript.
Skapa ett React-projekt med TypeScript
Kommandot create-react-app låter dig skapa Typescript-projekt med hjälp av --mall alternativ.
Till skapa ett nytt React-projekt med TypeScript, kör följande kommando:
npx skapa-react-app app-namn--mall typskript
Detta kommando skapar ett nytt React- och TypeScript-projekt från början. Du kan också lägga till TypeScript till en befintlig React-applikation.
För att göra det, navigera till projektet som du vill lägga till TypeScript till och kör följande kod:
npm installera --save typscript @typer/node @typer/react @typer/react-dom @typer/jest
Byt sedan ut filtillägget .js med .tsx mot filer du vill konvertera till TypeScript. När du gör detta får du "
React hänvisar till en UMD global, men den aktuella filen är en modul." fel. Du kan lösa det genom att importera React i varje typskriptfil så här:importera Reagera från "reagera"
Som en mer okomplicerad lösning, skapa en tsconfig.json och ställ in jsx till react-jsx.
{
"kompilatoralternativ": {
"jsx": "react-jsx",
"mål": "es6",
"modul": "nästa",
},
}
Du kan hitta alla konfigurationsinställningar från TypeScript-dokument.
Skapa en React-funktionskomponent i TypeScript
Du definierar en React-funktionskomponent på samma sätt som en JavaScript-funktion.
Nedan är ett exempel på en funktionskomponent som kallas Hälsningar.
exporterastandardfungeraHälsningar() {
lämna tillbaka (
<div>Hej världen</div>
)
}
Den här komponenten returnerar en "Hello world"-sträng och TypeScript härleder dess returtyp. Du kan dock kommentera dess returtyp:
exporterastandardfungeraHälsningar(): JSX.Element{
lämna tillbaka (
<div>Hej världen</div>
)
}
TypeScript ger ett felmeddelande om Greetings-komponenten returnerar ett värde som inte är ett JSX.element.
Använda React Props med TypeScript
React låter dig skapa återanvändbara komponenter genom rekvisita. Till exempel kan Greetings-komponenten ta emot ett namnrekvisita så att returvärdet anpassas utifrån det.
Nedan är den redigerade komponenten med ett namn som rekvisita. Lägg märke till den inline-typdeklarationen.
fungeraHälsningar({namn}: {namn: sträng}) {
lämna tillbaka (
<div>Hej {name}</div>
)
}
Om du skickar namnet "Jane", kommer komponenten att returnera meddelandet "Hej Jane".
Istället för att skriva typdeklarationen i funktionen kan du definiera den externt så här:
typ HälsningarProps = {
namn: sträng;
};
Skicka sedan den definierade typen till komponenten enligt följande:
fungeraHälsningar({name}: GreetingsProps) {
lämna tillbaka (
<div>Hej {name}</div>
)
}
Använd nyckelordet för gränssnittet om du exporterar den här typen och vill utöka den:
exportera gränssnittHälsningarProps{
namn: sträng;
};
Observera syntaxskillnaden mellan typ och gränssnitt — gränssnittet har inget likhetstecken.
Du kan utöka ett gränssnitt med följande kod:
importera { GreetingsProps } från './Hälsningar'
gränssnittWelcomePropssträcker sigHälsningarProps{
tid: "sträng"
}
Du kan sedan använda det utökade gränssnittet i en annan komponent.
fungeraVälkommen({namn, tid}: WelcomeProps) {
lämna tillbaka (
<div>
God {time}, {name}!
</div>
)
}
Använd "?" symbol med ditt rekvisitagränssnitt för att definiera valfria rekvisita. Här är ett exempel på ett gränssnitt med en valfri namnprop.
gränssnittHälsningarProps{
namn?: sträng;
};
Om du inte godkänner en namnpropp kommer TypeScript inte att ge något fel.
Använda React State med TypeScript
I vanlig JavaScript definierar du haken useState(). som följer:
const [kundnamn, setKundnamn] = useState("");
I det här exemplet kan TypeScript enkelt sluta sig till typen av firstName som en sträng eftersom standardvärdet är en sträng.
Men ibland kan du inte initiera tillståndet till ett definierat värde. I dessa fall måste du ange en tillståndsvärdetyp.
Här är några exempel på hur man definierar typer i useState()-kroken.
const [customerName, setCustomerName] = useState<sträng>("");
const [ålder, setAge] = useState<siffra>(0);
konst [isSubscribed, setIsSubscribed] = useState<booleskt>(falsk);
Du kan också använda ett gränssnitt i useState()-kroken. Du kan till exempel skriva om exemplet ovan för att använda ett gränssnitt som visas nedan.
gränssnittIKund{
kundnamn: sträng ;
ålder: nummer ;
är prenumererad: booleskt ;
}
Använd det anpassade gränssnittet i kroken så här:
const [customer, setCustomer] = useState<IKund>({
Köparens namn: "Jane",
ålder: 10,
är prenumererad: falsk
});
Använda händelser med TypeScript
Händelser är viktiga eftersom de tillåter användare att interagera med en webbsida. I TypeScript kan du antingen skriva händelser eller händelsehanterare.
För att demonstrera, överväg följande inloggningskomponent med händelserna onClick() och onChange().
importera { useState } från 'reagera';
exporterastandardfungeraLogga in() {
const [email, setEmail] = useState('');konst handleChange = (händelse) => {
setEmail(händelse.mål.värde);
};konst handleClick = (händelse) => {
console.log('Lämnats!');
};
lämna tillbaka (
<div>
<ingångstyp="e-post" value={email} onChange={handleChange} />
<knappen onClick={() => handleClick}>Skicka in</button>
</div>
);
}
Så här skulle du hantera händelser i vanlig JavaScript. TypeScript förväntar sig dock att du definierar händelseparametertypen i händelsehanterarens funktioner. Lyckligtvis tillhandahåller React flera händelsetyper.
Använd till exempel typen changeEvent för händelsehanteraren handleChange().
importera { ChangeEvent, useState } från 'reagera';
const handleChange = (händelse: ChangeEvent<HTMLInputElement>) => {
setEmail(händelse.mål.värde);
};
ChangeEvent-typen används för att ändra värdena för inmatnings-, markerings- och textområdeselement. Det är en generisk typ som betyder att du måste skicka in DOM-elementet vars värde ändras. I det här exemplet klarade du inmatningselementet.
Exemplet ovan visar hur man skriver händelsen. Koden nedan visar hur du kan skriva händelsehanteraren istället.
importera { ChangeEventHandler, useState } från 'reagera';
const handleChange: ChangeEventHandler<HTMLInputElement> = (händelse) => {
setEmail(händelse.mål.värde);
};
För händelsen handleClick() använder du MouseEvent().
importera { useState, MouseEvent } från 'reagera';
konst handleClick = (händelse: MouseEvent) => {
console.log('Lämnats!');
};
Återigen kan du bifoga typen till själva händelsehanteraren.
importera { useState, MouseEventHandler } från 'reagera';
konst handleClick: MouseEventHandler = (händelse) => {
console.log('Lämnats!');
};
För andra evenemangstyper, kolla in React TypeScript fuskblad.
Om du skapar stora formulär är det bättre att göra det använd ett formulärbibliotek som Formik, eftersom det är byggt med TypeScript.
Varför ska du använda TypeScript?
Du kan instruera ett nytt React-projekt att använda TypeScript eller konvertera ett befintligt. Du kan också använda TypeScript med React-funktionskomponenter, tillstånd och React-händelser.
Att skriva React-komponenter kan ibland kännas som att skriva onödig kod. Men ju mer du använder den, desto mer kommer du att uppskatta dess förmåga att fånga fel innan du distribuerar din kod.