Hoe u uw JavaScript-programma naar TypeScript kunt porten

Oorspronkelijk uitgebracht in 1995 na een verbluffend korte ontwikkelingsperiode, is JavaScript sindsdien een integraal onderdeel geworden van veel sites en apps. Tegenwoordig heeft JavaScript een thuis gevonden in zowel client- als server-side applicaties. Ontwikkelaars vragen nog steeds veel functies, ondanks alle veranderingen die het door de jaren heen heeft ondergaan.

TypeScript is een scripttaal die JavaScript uitbreidt met veel van deze langverwachte functies. Type-annotatie, aangepast typen en interfaces zijn allemaal belangrijke componenten, samen met betere tools om de productiviteit te verhogen.

Waarom moeite doen met overstappen?

Het vooruitzicht om bij grote projecten van taal te wisselen, kan stressvol zijn. Gelukkig voor iedereen die de taak overweegt, is het proces van het porteren van een project van JavaScript naar TypeScript vrij eenvoudig.

JavaScript heeft de afgelopen jaren aan populariteit gewonnen als een belangrijke programmeertaal. Oorspronkelijk alleen gebruikt voor front-end scripting op websites, bracht de release van Node.js JavaScript server-side, waardoor de populariteit ervan werd vergroot.

Hoewel JavaScript de laatste tijd veel populairder is geworden, zijn er tal van functies die de nieuwste implementatie, ES6, nog steeds mist. Voor veel ontwikkelaars beperken deze ontbrekende functies het nut van JavaScript als taal.

TypeScript heeft tot doel deze zorgen weg te nemen door JavaScript te verpakken met extra functies en vervolgens gebruikerscode te transpileren. Het resultaat is een typeveilige taal met het gemak en de bruikbaarheid van JavaScript.

Er zijn al verschillende tools en frameworks met volledige TypeScript-ondersteuning. Angular gebruikt het al heel lang, en zelfs React heeft manieren om TypeScript te implementeren.

TypeScript is als JavaScript verbeterd

TypeScript implementeert veel van de functies waar ontwikkelaars vaak om vragen in JavaScript. TypeScript is genoemd naar het volledige typesysteem dat het implementeert, inclusief functies zoals typecontrole, veiligheid en impliciet typen. TypeScript laat je zelfs definieer en gebruik aangepaste naamruimten.

TypeScript bevat ook interfaces, opsommingen en type-inferentie. TypeScript behoudt ondersteuning voor functies van de nieuwste JavaScript-implementatie naast verouderde functies, en voegt een reeks nieuwe functies toe.

Over het algemeen ligt de focus van TypeScript op het creëren van een veiliger ontwikkelingsproces met sterkere tools om programmeurs te helpen.

Het moedigt Type-Safe Code aan

TypeScript gebruikt een ingebouwd typecontrolesysteem om variabeletypen te valideren. Het bevat een set standaardtypen met de optie om uw eigen klassen en typen te definiëren. Typen kunnen expliciet worden verklaard of afgeleid op basis van toewijzing.

TypeScript heeft verschillende standaard gegevenstypen, waaronder strings, getallen, booleans en tuples. Er zijn ook variabele typen, zoals onbekend en willekeurig, waarmee u zwak getypeerde code kunt gebruiken.

Met de type-inferentie van TypeScript kunt u typecontroles uitvoeren op zelfs standaard JavaScript-code door deze door de Transpiler van TypeScript te laten lopen.

Transpilatie maakt het gemakkelijk te gebruiken

Vanuit het perspectief van een ontwikkelaar is een van de beste eigenschappen van TypeScript dat het vanille JavaScript uitvoert. U kunt TypeScript-code uitvoeren via een proces dat bekend staat als transpilatie, vergelijkbaar met compilatie.

In plaats van een uitvoerbaar bestand is het resultaat van transpilatie een script in een andere taal dan de originele taal van de code.

TypeScript-code wordt omgezet in JavaScript, dat u vervolgens op een server of client kunt uitvoeren. Hierdoor kun je snel en eenvoudig code schrijven die je op vrijwel elk platform kunt uitvoeren.

TypeScript helpt de productiviteit van ontwikkelaars

Door typen aan JavaScript toe te voegen, kan code niet alleen veilig worden uitgevoerd, maar krijgen ontwikkelaars ook tools waarmee coderen eenvoudiger wordt. De meeste moderne IDE's bieden TypeScript-ondersteuning waarmee hulpprogramma's voor het aanvullen van code, zoals IntelliSense, aanvullende context aan code kunnen bieden. Het kan ook typecontrole bieden terwijl u schrijft, waardoor u fouten sneller kunt opsporen.

Bovendien zijn de extra datastructuren en syntaxis van TypeScript ontworpen om de leesbaarheid van de code te vergroten. Deze functies maken het sneller en gemakkelijker om code van hoge kwaliteit te maken en potentiële problemen op te sporen voordat ze problematisch worden.

Hoe kunt u uw code porteren?

Als u een gloednieuw project start, een nieuw TypeScript-project maken is vrij eenvoudig. Het converteren van een reeds bestaand project naar TypeScript is echter iets ingewikkelder.

Onder de meeste normale omstandigheden is het vooruitzicht van het omzetten van een project van de ene taal naar de andere beangstigend. De conversie van JavaScript naar TypeScript is echter verrassend eenvoudig.

TypeScript als een superset van JavaScript

TypeScript wordt beschouwd als een superset van JavaScript. Dat betekent dat TypeScript extra syntaxis- en functionaliteitslagen toevoegt, zonder de kernfunctionaliteit waar het omheen is gebouwd te wijzigen of te verwijderen.

Voor ontwikkelaars betekent dit dat elke code die correct wordt uitgevoerd in JavaScript, automatisch correct wordt uitgevoerd in TypeScript. Of het script in kwestie nu een webserver is die is geschreven om in NodeJS te worden uitgevoerd, of een set front-endscripts voor een webpagina, overstappen is uitzonderlijk eenvoudig.

Na het installeren van de TypeScript-transpiler, kunt u een eenvoudig tsconfig.json bestand met de volgende inhoud:

{
"compilerOpties": {
"outDir": "./bouwen",
"toestaanJs": WAAR,
"doel": "es5"
 },
"erbij betrekken": ["./src/**/*"]
}

Verplaats alle toepasselijke bestanden naar de src-directory en voer de transpiler uit. Hierdoor worden de resulterende JavaScript-bestanden in het bouwen map.

Deze snelle en eenvoudige wijzigingen zullen een standaard JavaScript-project omzetten in een TypeScript-project. Vanaf hier bent u vrij om de nieuwe functies die TypeScript biedt op uw gemak te gebruiken. U kunt typen op variabelen annoteren, aangepaste typen implementeren en interfaces definiëren.

Na elke transpilatie kunt u de uitvoer van het bouwen directory indien nodig door de bestanden aan elk project toe te voegen, net zoals u normaal zou doen. De transpiler controleert standaard JavaScript en converteert nieuwe functies naar geldige ES5-scripts.

Wat u moet weten om van JS naar TS te gaan

Het proces van het converteren van een project van JavaScript naar TypeScript is uitzonderlijk eenvoudig. Converteren is net zo eenvoudig als het uitschakelen van de directorystructuur, het toevoegen van een configuratiebestand en het installeren van de transpiler.

Het kan echter een veel langer project zijn om alle voordelen uit de nieuwe taal te halen. Hoewel TypeScript het type van elke variabele in een project kan afleiden, moeten deze expliciet worden gedeclareerd. Het kan tijdrovend zijn om terug te gaan naar en aangepaste typen aan een project toe te voegen, de juiste annotaties toe te voegen en interfaces te maken.

Door deze functies aan een project toe te voegen, kunt u echter profiteren van de voordelen van de juiste typecontrole en uitgebreide tooling. Grote projecten zullen sneller en gemakkelijker te bouwen zijn, u zult fouten eerder opsporen en nieuwe ontwikkelaars zullen uw code gemakkelijker kunnen lezen.