JavaScript is een zwak getypeerde programmeertaal. Hierdoor is het erg soepel en zullen programmeerfouten waarschijnlijk onopgemerkt blijven tijdens de ontwikkeling. TypeScript, een JavaScript-bibliotheek voor typecontrole, lost dit probleem op door typen op waarden af te dwingen. Dit artikel leert je hoe je een React-project maakt met TypeScript.
Een React-project maken met TypeScript
Met de opdracht create-react-app kunt u Typescript-projecten maken met behulp van de --sjabloon keuze.
Tot maak een nieuw React-project aan voer met TypeScript de volgende opdracht uit:
npx creëren-reageer-app-app-naam--sjabloon typoscript
Met deze opdracht maakt u helemaal opnieuw een nieuw React- en TypeScript-project. U kunt TypeScript ook toevoegen aan een bestaande React-toepassing.
Ga hiervoor naar het project waaraan u TypeScript wilt toevoegen en voer de volgende code uit:
npm install --save typescript @soorten/node @soorten/react @soorten/react-dom @soorten/jest
Verwissel vervolgens de .js-bestandsextensie met .tsx voor bestanden die u naar TypeScript wilt converteren. Zodra u dit doet, krijgt u de "
React verwijst naar een UMD global, maar het huidige bestand is een module.” fout. Je kunt het oplossen door React in elk typescript-bestand als volgt te importeren:importeren Reageer van "Reageer"
Als een meer rechttoe rechtaan oplossing maakt u een tsconfig.json en stelt u jsx in op react-jsx.
{
"compilerOpties": {
"jsx": "reageren-jsx",
"doelwit": "es6",
"module": "volgende",
},
}
U kunt alle configuratie-instellingen vinden op de TypeScript-documenten.
Een React Function-component maken in TypeScript
U definieert een React-functiecomponent op dezelfde manier als een JavaScript-functie.
Hieronder ziet u een voorbeeld van een functiecomponent met de naam Groeten.
exporterenstandaardfunctieHartelijk groeten() {
opbrengst (
<div>Hallo Wereld</div>
)
}
Deze component retourneert een "Hallo wereld" -tekenreeks en TypeScript leidt het retourtype af. U kunt echter het retourtype annoteren:
exporterenstandaardfunctieHartelijk groeten(): JSX.Element{
opbrengst (
<div>Hallo Wereld</div>
)
}
TypeScript geeft een foutmelding als de component Begroetingen een waarde retourneert die geen JSX.element is.
React Props gebruiken met TypeScript
Met React kun je herbruikbare componenten maken door middel van rekwisieten. Het onderdeel Begroetingen kan bijvoorbeeld een naamprop krijgen, zodat de retourwaarde daarop wordt aangepast.
Hieronder staat de bewerkte component met een naam als prop. Let op de inline typeverklaring.
functieHartelijk groeten({naam}: {naam: tekenreeks}) {
opbrengst (
<div>Hallo {naam}</div>
)
}
Als u de naam "Jane" doorgeeft, zal het onderdeel het bericht "Hallo Jane" retourneren.
In plaats van de typedeclaratie in de functie te schrijven, kunt u deze extern als volgt definiëren:
type GroetenProps = {
naam: tekenreeks;
};
Geef vervolgens het gedefinieerde type als volgt door aan de component:
functieHartelijk groeten({name}: GroetenProps) {
opbrengst (
<div>Hallo {naam}</div>
)
}
Gebruik het interface-trefwoord als u dit type exporteert en het wilt uitbreiden:
exporteren koppelGroeten Props{
naam: tekenreeks;
};
Let op het syntaxisverschil tussen type en interface - interface heeft geen gelijkteken.
U kunt een interface uitbreiden met de volgende code:
importeren { GroetenProps } van './Hartelijk groeten'
koppelWelkom Propsstrekt zich uitGroeten Props{
tijd: "snaar"
}
U kunt dan de uitgebreide interface in een ander onderdeel gebruiken.
functieWelkom({naam, tijd}: WelcomeProps) {
opbrengst (
<div>
Goede {tijd}, {naam}!
</div>
)
}
Gebruik de "?" symbool met uw rekwisieten-interface om optionele rekwisieten te definiëren. Hier is een voorbeeld van een interface met een optionele naamprop.
koppelGroeten Props{
naam?: string;
};
Als u geen naamprop doorgeeft, geeft TypeScript geen enkele fout.
React State gebruiken met TypeScript
In gewoon JavaScript definieert u de useState() hook als volgt:
const [customerName, setCustomerName] = useState("");
In dit voorbeeld kan TypeScript gemakkelijk het type voornaam als een tekenreeks afleiden, omdat de standaardwaarde een tekenreeks is.
Soms kunt u de status echter niet initialiseren naar een gedefinieerde waarde. In deze gevallen moet u een statuswaardetype opgeven.
Hier zijn enkele voorbeelden van het definiëren van typen in de useState() hook.
const [customerName, setCustomerName] = useState<snaar>("");
const [leeftijd, setAge] = useState<nummer>(0);
const [isSubscribe, setIsSubscribe] = useState<booleaans>(vals);
Je kunt ook een interface gebruiken in de useState() hook. U kunt bijvoorbeeld het bovenstaande voorbeeld herschrijven om een hieronder getoonde interface te gebruiken.
koppelIKlant{
klantnaam: tekenreeks;
leeftijd: aantal ;
isGeabonneerd: booleaans ;
}
Gebruik de aangepaste interface in de hook als volgt:
const [klant, setKlant] = useState<IKlant>({
klantnaam: "Jane",
leeftijd: 10,
isGeabonneerd: vals
});
Gebeurtenissen gebruiken met TypeScript
Evenementen zijn essentieel omdat ze gebruikers in staat stellen om te communiceren met een webpagina. In TypeScript kunt u gebeurtenissen of de gebeurtenishandlers typen.
Overweeg om dit te demonstreren de volgende Login-component met behulp van de gebeurtenissen onClick() en onChange().
importeren { useState } van 'Reageer';
exporterenstandaardfunctieLog in() {
const [e-mail, setEmail] = useState('');const handvatChange = (gebeurtenis) => {
setE-mail(evenement.doelwit.waarde);
};const handleClick = (gebeurtenis) => {
console.log('Ingediend!');
};
opbrengst (
<div>
<invoertype="e-mail" value={email} onChange={handleChange} />
<knop onClick={() => handvatKlik}>Indienen</button>
</div>
);
}
Dit is hoe u gebeurtenissen in gewoon JavaScript zou behandelen. TypeScript verwacht echter dat u het type gebeurtenisparameter definieert in de gebeurtenishandlerfuncties. Gelukkig biedt React verschillende soorten evenementen.
Gebruik bijvoorbeeld het changeEvent-type voor de gebeurtenishandler handleChange().
importeren { ChangeEvent, useState } van 'Reageer';
const handleChange = (gebeurtenis: ChangeEvent<HTMLInputElement>) => {
setE-mail(evenement.doelwit.waarde);
};
Het changeEvent-type wordt gebruikt voor het wijzigen van de waarden van input-, select- en textarea-elementen. Het is een generiek type, wat betekent dat u het DOM-element moet doorgeven waarvan de waarde verandert. In dit voorbeeld heb je het invoerelement doorgegeven.
Het bovenstaande voorbeeld laat zien hoe u de gebeurtenis typt. De onderstaande code laat zien hoe u in plaats daarvan de gebeurtenishandler kunt typen.
importeren { ChangeEventHandler, useState } van 'Reageer';
const handleChange: ChangeEventHandler<HTMLInputElement> = (gebeurtenis) => {
setE-mail(evenement.doelwit.waarde);
};
Gebruik voor de gebeurtenis handleClick() de MouseEvent().
importeren { useState, MouseEvent } van 'Reageer';
const handleClick = (gebeurtenis: MouseEvent) => {
console.log('Ingediend!');
};
Nogmaals, u kunt het type aan de gebeurtenishandler zelf koppelen.
importeren { useState, MouseEventHandler } van 'Reageer';
const handleClick: MouseEventHandler = (gebeurtenis) => {
console.log('Ingediend!');
};
Voor andere soorten evenementen, bekijk de Reageer TypeScript-spiekbriefje.
Als u grote formulieren maakt, is het beter om: gebruik een formulierbibliotheek zoals Formik, omdat het is gebouwd met TypeScript.
Waarom zou u TypeScript gebruiken?
U kunt een nieuw React-project opdracht geven om TypeScript te gebruiken of een bestaand project converteren. U kunt TypeScript ook gebruiken met React-functiecomponenten, status en React-gebeurtenissen.
Het typen van React-componenten kan soms aanvoelen als het schrijven van onnodige boilerplate-code. Hoe meer u het echter gebruikt, hoe meer u zult waarderen dat het fouten kan opvangen voordat u uw code implementeert.
