Voordat we aan de slag kunnen met TypeScrypt installeer je TypeScript via NPM (Node Package Manager) met onderstaand commando:
```
npm install -g typescript
```
NB: Download NPM via nodejs.org
-
Maak op een locatie naar keuze een folder aan en noem deze 'HelloTypeScript'. Vanuit deze folder beginnen we het 'project'.
-
Maak in de root van deze folder een nieuw bestaand aan en noem deze 'main.js'. (De .ts extensie gebruiken we later)
-
In het main.js bestand maak je een Main class met een constructor die twee parameters accepteert, 'name' en 'age.
class Main {
constructor(name, age) {
}
};- Deze parameters schrijf je binnen de constructor weg naar de publieke tegenhanger ('this.name' en 'this.age')
this.name = name;
this.age = age;- Buiten de constructor, maar binnen de 'Main' class, schrijf je een functie genaamd 'run'. Deze bevat geen input parameters.
run() {
}-
Schrijf in de 'run' functie de volgende regel 'code'. Deze regel retourneert een HTML Heading-1 met de ingevoerde 'name' en 'age' properties.
return "<h1> Hi, " + this.name + " (" + this.age + ")</h1>";
-
Direct onder de main class instantieer je de zojuist geschreven class op de volgende manier: (waarbij je je eigen naam en leeftijd invult op de plaats van parameters)
var main = new Main("JENAAM", 88); // Vul hier je eigen naam en leeftijd in.
-
Daaronder roep je de run() functie aan en schrijf je deze weg naar de innerHTML van de document.body:
document.body.innerHTML = main.run();
Je uiteindelijke main.js zou er als volgt uit moeten zien:
class Main {
constructor(name, age) {
this.name = name;
this.age = age;
}
run() {
return "<h1> Hi, " + this.name + " (" + this.age + ")</h1>";
}
};
var main = new Main("JENAAM", 88); // Vul hier je naam en leeftijd in.
document.body.innerHTML = main.run();- In de root folder maak je een nieuwe bestand aan, noem deze index.html.
- Voer vervolgens onderstaande HTML code in en sla het index.html bestand op.
<!DOCTYPE html>
<html>
<head><title> TypeScript Demo </title></head>
<body>
<script src='main.js'></script>
</body>
</html>- Open Windows Verkenner en dubbelklik op het index.html bestand zodat deze geopend wordt in de browser. Je ziet nu een naam met tussenhaakjes je leeftijd staan.
- Open nu de main.js code en wijzig de initialisatie van de Main class als volgt:
var main = new Main(1234, "JENAAM"); // Vul hier je leeftijd en naam in.- Sla het gewijzigde main.js bestand op en open index.html opnieuw in je browser (of ververs de pagina, als je deze nog had laten staan) Het resultaat is dan:
Zoals je ziet maakt het JavaScript geen drol uit of je nu eerst een tekst (je naam) of eerst een getal (je leeftijd) invoert. De code draait zonder problemen en ook de editor vind het allemaal best.
Met TypeScript kunnen we niet het probleem van de omgekeer parameters weghalen maar wel kunnen we voorkomen dat jij als programmeur deze fout maakt. TypeScript zorgt er alleen voor dat in de editor gecontroleerd wordt of alle types (what's in a name) correct zijn opgevoerd.
In de volgende stappen schrijven we de main.js om naar TypeScript en zullen we al snel de kracht van TypeScript ondervinden.
-
We beginnen met het hernoemen van het main.js bestand naar main.ts (waarbij .ts natuurlijk verwijst naar TypeScript)
-
Wanneer we nu het main.ts bestand openen zien we al direct vele meldingen onder de code verschijnen. Waaronder bijvoorbeeld 'Parameter 'name' explicitly has an 'any' type' Dit betekend dat het type van de parameter 'name' niet gedefinieerd is. Om in TypeScript het type aan te geven van de parameter zetten we achter de parameternaam een dubbele punt met daarachter een spatie gevolgd door de typenaam. Zoals onderstaand:
constructor(name: string, age: Number) {- Nu zien we in de constructor ook meldingen verschijnen onder de this.name en this.age. In TS is het niet meer nodig om de input parameters weg te schrijven naar de public parameters. Dit kunnen we gemakkelijk in 1x schrijven door voor 'name' en 'age' de public modified te noteren.
constructor(public name: string, public age: Number) { }Hierdoor kan de rest van de constructor weg en blijft een enkele regel over.
- Wanneer we nu onderstaande regel aanroepen krijgen we direct een tweetal foutmeldingen:
var main = new Main(1234, "JENAAM"); 'Argument of type 'Number' is not assignable to parameter of type 'string''
'Argument of type 'string' is not assignable to parameter of type 'Number''
Hiermee zien we niet alleen de werking van TypeScript maar ook het voordeel voor de programmeur. Je kan nu direct zien als je een type verkeerd toewijst.
-
Wanneer we nu echter de index.html pagina openen zien we niets dan een blanko pagina. Dit komt omdat we in stap 14 het main.js bestand hernoemt hebben naar main.ts. Geen van de browsers kan op het moment overweg met TypeScript. Dit betekend dat we nog 1 kleine extra stap moeten doen en dat is het compileren van TypeScript naar JavaScript.
-
Open hiervoor command prompt (Windows, Run: cmd.exe) en navigeer naar je root folder. Zorg dat je IN de root folder zit!
-
Type vervolgens onderstaand command en ram op enter.
tsc
Met dit commando spreken we de TypeScript Compiler (tsc) aan. Deze compileert alle *.ts bestanden naar *.js bestanden.