Aan de slag met TypeScript voor beginners

TypeScript is een krachtige superset van JavaScript die statische typen en andere geavanceerde functies aan de taal toevoegt. Het helpt ontwikkelaars om fouten vroegtijdig te ontdekken, schonere code te schrijven en grote codebases effectiever te onderhouden. In deze gids leiden we je door de basisprincipes van TypeScript en helpen we je ermee aan de slag te gaan, zelfs als je een absolute beginner bent.

Wat is TypeScript?

TypeScript is een open-source programmeertaal die is ontwikkeld door Microsoft. Het bouwt voort op JavaScript door statische typen toe te voegen, die kunnen helpen fouten te identificeren tijdens compile-time in plaats van runtime. Dit maakt het makkelijker om betrouwbare en onderhoudbare code te schrijven. TypeScript-code moet worden gecompileerd naar JavaScript voordat het kan worden uitgevoerd in een browser of een Node.js-omgeving.

Waarom TypeScript gebruiken?

  • Verbeterde codekwaliteit en vroege bugdetectie met statische typen
  • Betere tooling en autocomplete-functies in moderne IDE's
  • Verbeterde leesbaarheid en onderhoudbaarheid voor grote codebases
  • Ondersteunt de nieuwste JavaScript-functies en toekomstige standaarden

Hoe TypeScript te installeren

Voordat u TypeScript kunt gebruiken, moet u het op uw machine installeren. U hebt Node.js en npm (Node Package Manager) nodig. Als u deze niet hebt geïnstalleerd, download ze dan van de Node.js-website.

  1. Open uw terminal of opdrachtprompt.
  2. Voer de volgende opdracht uit om TypeScript wereldwijd te installeren:
npm install -g typescript

Met deze opdracht wordt TypeScript wereldwijd op uw systeem geïnstalleerd, zodat het vanuit elke map toegankelijk is.

Uw eerste TypeScript-programma maken

Zodra u TypeScript hebt geïnstalleerd, kunt u uw eerste TypeScript-bestand maken. Volg deze stappen:

  1. Maak een nieuwe map voor uw project en navigeer er naartoe via de terminal:
mkdir my-first-typescript-app
cd my-first-typescript-app
  1. Maak een nieuw TypeScript-bestand met de naam app.ts:
echo "console.log('Hello, TypeScript!');" > app.ts

Hiermee wordt een eenvoudig TypeScript-bestand gemaakt dat "Hallo, TypeScript!" in de console registreert.

TypeScript compileren naar JavaScript

TypeScript-code kan niet rechtstreeks worden uitgevoerd door browsers of Node.js; het moet eerst worden gecompileerd naar JavaScript. U kunt uw TypeScript-bestand compileren door de volgende opdracht in uw terminal uit te voeren:

tsc app.ts

Deze opdracht genereert een JavaScript-bestand met de naam app.js in dezelfde directory. U kunt nu het gecompileerde JavaScript-bestand uitvoeren met Node.js:

node app.js

Je zou Hello, TypeScript! op de console moeten zien staan.

Basistypen in TypeScript begrijpen

TypeScript introduceert verschillende basistypen die u helpen de vorm en structuur van uw gegevens te definiëren. Hier zijn een paar veelvoorkomende typen:

  • Getal: Geeft numerieke waarden weer.
  • String: vertegenwoordigt tekstwaarden.
  • Boolean: Geeft de waarden true of false weer.
  • Array: vertegenwoordigt een verzameling waarden van hetzelfde type.
  • Tuple: vertegenwoordigt een array met een vast aantal elementen van verschillende typen.
  • Enum: vertegenwoordigt een verzameling benoemde constanten.
  • Any: vertegenwoordigt een dynamisch type dat elke waarde kan bevatten.

Voorbeeld: Typen gebruiken in TypeScript

Laten we eens kijken naar een eenvoudig voorbeeld dat het gebruik van verschillende typen in TypeScript demonstreert:

let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;
let hobbies: string[] = ["Reading", "Gaming", "Traveling"];
let person: [string, number] = ["Jane", 25];

enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Green;

console.log(age, name, isStudent, hobbies, person, favoriteColor);

In dit voorbeeld definiëren we variabelen met specifieke typen zoals number, string, boolean, array, tuple en enum. De TypeScript-compiler zorgt ervoor dat de variabelen de juiste typen toegewezen krijgen, wat een veiligheidslaag biedt die vanilla JavaScript niet biedt.

Conclusie

TypeScript is een geweldige keuze voor ontwikkelaars die robuustere en onderhoudbare code willen schrijven. Door statische typen toe te voegen aan JavaScript, kan TypeScript u helpen fouten vroegtijdig op te sporen en betere toolingondersteuning te bieden. In deze tutorial hebt u de basisbeginselen van TypeScript geleerd, hoe u het installeert, een eenvoudig programma schrijft en enkele van de basistypen gebruikt. Naarmate u TypeScript verder verkent, zult u nog veel meer krachtige functies ontdekken die uw ontwikkelworkflow kunnen verbeteren.