TypeScript voor beginners, deel 1 Aan de slag

Laten we deze zelfstudie beginnen met de vraag: "Wat is TypeScript?" 

TypeScript is een getypte superset van JavaScript die compileert met gewoon JavaScript. Als een analogie, als JavaScript CSS was, dan zou TypeScript SCSS zijn. 

Alle geldige JavaScript-code die u schrijft, is ook geldige TypeScript-code. Met TypeScript kunt u statisch typen gebruiken en de nieuwste functies die worden gecompileerd naar gewoon JavaScript, dat door alle browsers wordt ondersteund. TypeScript is gericht op het oplossen van het probleem van het schaalbaar maken van JavaScript, en het doet behoorlijk goed werk. 

In deze tutorial begin je met het lezen van verschillende functies van TypeScript en waarom het leren ervan een goed idee is. De rest van de secties in het artikel behandelen de installatie en compilatie van TypeScript samen met enkele populaire teksteditors die u ondersteuning bieden voor de TypeScript-syntaxis en andere belangrijke functies.

Waarom TypeScript leren?

Als je nog nooit eerder met TypeScript hebt gewerkt, vraag je je misschien af ​​waarom je het helemaal zou moeten leren als het uiteindelijk naar JavaScript compileert. 

Ik kan je verzekeren dat je niet veel tijd hoeft te besteden aan het leren van TypeScript. Zowel TypeScript als JavaScript hebben een vergelijkbare syntaxis en u kunt uw naam gewoon wijzigen .js bestanden naar .ts en begin met het schrijven van de TypeScript-code. Hier zijn enkele functies die u moeten overtuigen om te beginnen met het leren van TypeScript:

1. In tegenstelling tot JavaScript, dat dynamisch wordt getypeerd, kunt u met TypeScript statisch typen gebruiken. Deze functie zelf maakt de code beter onderhouden en vermindert de kans op fouten die mogelijk zijn veroorzaakt door onjuiste aannames over het type van bepaalde variabelen. Als een toegevoegde bonus kan TypeScript het type van een variabele bepalen op basis van het gebruik ervan, zonder dat u expliciet een type opgeeft. U moet de typen voor een variabele echter altijd expliciet opgeven voor de duidelijkheid.
2. Om eerlijk te zijn, JavaScript was niet ontworpen om te dienen als een grootschalige ontwikkelingstaal. TypeScript voegt al deze ontbrekende functies toe aan JavaScript waardoor het echt schaalbaar is. Met statisch typen kan de IDE die u gebruikt, nu die code begrijpen die u op een betere manier schrijft. Dit geeft de IDE de mogelijkheid om functies zoals code-aanvulling en veilige refactoring te bieden. Dit alles resulteert in een betere ontwikkelervaring.
3. Met TypeScript kunt u ook de nieuwste JavaScript-functies in uw code gebruiken zonder dat u zich zorgen hoeft te maken over browserondersteuning. Nadat u de code hebt geschreven, kunt u deze met eenvoudige oude compilatie van alle JavaScript-browsers compileren.
4. Veel populaire frameworks zoals Angular en Ionic gebruiken nu TypeScript. Dit betekent dat als je ooit in de toekomst besluit om een ​​van de frameworks te gebruiken, het leren van TypeScript nu een goed idee is.

Installatie

Voordat u begint met het schrijven van een aantal geweldige TypeScript-codes, moet u eerst TypeScript installeren. Dit kan gedaan worden met de hulp van npm. Als npm niet is geïnstalleerd, moet u eerst npm installeren voordat u TypeScript installeert. Om TypeScript te installeren, moet u de terminal starten en de volgende opdracht uitvoeren:

npm install -g typescript

Zodra de installatie is voltooid, kunt u de versie van TypeScript controleren die is geïnstalleerd door de opdracht uit te voeren tsc -v in uw terminal. Als alles correct is geïnstalleerd, ziet u het geïnstalleerde TypeScript-versienummer in de terminal.

IDE's en teksteditors met TypeScript-ondersteuning

TypeScript is gemaakt door Microsoft. Dus het feit dat Visual Studio de eerste IDE was die TypeScript ondersteunt, hoeft niet als een verrassing te komen. Zodra TypeScript populair begon te worden, voegden steeds meer editors en IDE's ondersteuning toe voor deze taal, zowel uit de doos of via plug-ins. Een andere lichtgewicht en open-source-editor genaamd Visual Studio Code, gemaakt door Microsoft, heeft ingebouwde ondersteuning voor TypeScript. Op dezelfde manier heeft WebStorm ook out-of-the-box-ondersteuning voor TypeScript.

Microsoft heeft ook een gratis Sublieme TypeScript-plug-in gemaakt. NetBeans heeft een TypeScript-plug-in die verschillende functies biedt voor eenvoudige ontwikkeling. Syntax highlighting is beschikbaar in Vim en Notepad ++ met behulp van respectievelijk de typescript-vim en notepadplus-typescript plug-ins. 

U kunt een volledige lijst bekijken van alle teksteditors en IDE's die TypeScript op GitHub ondersteunen. Voor de voorbeelden in deze serie zal ik Visual Studio Code gebruiken om alle code te schrijven.

Compileren van TypeScript naar JavaScript

Stel dat u wat TypeScript-code in a hebt geschreven .ts het dossier. Browsers kunnen deze code niet zelf uitvoeren. Je zult het TypeScript moeten compileren in gewoon JavaScript dat door browsers kan worden begrepen. 

Als u een IDE gebruikt, kan de code worden gecompileerd naar JavaScript in de IDE zelf. Met Visual Studio kunt u bijvoorbeeld de TypeScript-code direct naar JavaScript compileren. U moet een maken tsconfig.json bestand waarin u alle configuratieopties opgeeft voor het compileren van uw TypeScript-bestand met JavaScript. 

De meest beginnersvriendelijke aanpak als je niet aan een groot project werkt, is om de terminal zelf te gebruiken. Eerst moet u naar de locatie van het TypeScript-bestand in de terminal gaan en vervolgens de volgende opdracht uitvoeren.

tsc first.ts

Hiermee wordt een nieuw bestand met de naam gemaakt first.js op dezelfde locatie. Houd er rekening mee dat als je al een bestand had met de naam first.js, het zou worden overschreven.

Als u alle bestanden in de huidige map wilt compileren, kunt u dit doen met behulp van jokertekens. Vergeet niet dat dit niet recursief zal werken.

tsc * .ts 

Ten slotte kunt u alleen bepaalde bestanden compileren door hun namen expliciet in één regel op te geven. In dergelijke gevallen worden JavaScript-bestanden gemaakt met bijbehorende bestandsnamen.

tsc first.ts product.ts bot.ts

Laten we eens kijken naar het volgende programma, dat twee getallen vermenigvuldigt in TypeScript.

laat a: nummer = 12; laat b: nummer = 17; functie showProduct (eerste: nummer, tweede: nummer): void console.log ("Het product is:" + eerste * seconde);  showProduct (a, b);

De bovenstaande TypeScript-code compileert naar de volgende JavaScript-code wanneer de beoogde versie is ingesteld op ES6. Merk op dat alle type-informatie die u in TypeScript hebt opgegeven nu weg is na de compilatie. Met andere woorden, de code wordt gecompileerd naar JavaScript dat door de browser kan worden begrepen, maar je kunt de ontwikkeling in een veel betere omgeving doen die je kan helpen bij het vangen van veel bugs.

laat a = 12; laat b = 17; functie showProduct (eerste, tweede) console.log ("Het product is:" + eerste * seconde);  showProduct (a, b);

In de bovenstaande code hebben we het type variabelen gespecificeerd een en b als cijfers. Dit betekent dat als u later probeert de waarde in te stellen b om een ​​string zoals "apple", zal TypeScript je een fout laten zien dat "apple" niet kan worden toegewezen aan het type aantal. Je code zal nog steeds worden gecompileerd naar JavaScript, maar deze foutmelding laat je weten dat je een fout hebt gemaakt en helpt je een probleem te voorkomen tijdens runtime. 

Hier is een screenshot die het foutbericht in Visual Studio-code laat zien:

Het bovenstaande voorbeeld laat zien hoe TypeScript je steeds hints geeft over mogelijke fouten in code. Dit was een heel basaal voorbeeld, maar als je hele grote programma's aan het maken bent, helpen dit soort berichten je enorm bij het schrijven van robuuste code met minder kans op fouten.

Laatste gedachten

Deze introductiehandleiding in de serie was bedoeld om u een kort overzicht te geven van de verschillende TypeScript-functies en u te helpen de taal te installeren, samen met enkele suggesties voor IDE's en teksteditors die u kunt gebruiken voor ontwikkeling. Het volgende gedeelte behandelde verschillende manieren om uw TypeScript-code te compileren tot JavaScript en liet u zien hoe TypeScript u kan helpen om veelvoorkomende fouten te voorkomen.

Ik hoop dat je deze tutorial leuk vond. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen. In de volgende zelfstudie van de serie worden verschillende variabeletypen beschreven die beschikbaar zijn in TypeScript.