Voordat we aan de slag kunnen met TypeScrypt installeer je TypeScript via NPM (Node Package Manager) met onderstaand commando:
npm install typescript -g
NB: Download NPM via nodejs.org
-
Maak op een locatie naar keuze een folder aan en noem deze '01'. 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 nu nog niet) -
In het
main.jsbestand 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.htmlbestand op.
<!DOCTYPE html>
<html>
<head><title>01: TypeScript Demo </title></head>
<body>
<script src='main.js'></script>
</body>
</html>- Open Windows Verkenner en dubbelklik op het
index.htmlbestand 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 niets 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'. We moeten in TypeScript publieke parameter expliciet definieren. Dit doen we binnen de Main class net voor de constructor.
class Main {
name: string;
age: Number;
- 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 druk op enter.
tsc
Met dit commando spreken we de TypeScript Compiler (tsc) aan. Deze compileert alle *.ts bestanden naar *.js bestanden. 21. Zoals je ziet krijg je een foutmelding, nuja, niet echt een foutmelding maar meer een lijst met opties. We kunnen er voor kiezen om een parameter mee te geven aan het TSC commando, maar dat doen we niet, bijvoorbeeld
tsc main.ts
Wat we willen is dat het commando gewoon zelf in de folder kijkt welke TS bestanden er omgezet kunnen worden.
Hiertoe moeten we een tsconfig.json configuratie bestan aanmaken.
22. Maak een nieuw bestand aan en noem deze 'tsconfig.json'. Sla het bestand op en open deze.
23. In het tsconfig.json bestand schrijf je een open accolade { direct gevolgd door een sluit accolade }.
- Sla het bestand op en keer terug naar command prompt. Run daar nogmaals het 'tsc' commando. Zoals je ziet gaat het nu wel goed en zal het main.ts bestand worden geconverteerd naar een main.js bestand.
- Bekijk de index.html pagina in de browser. Nu werkt alles weer als 'vanouds'.
- Omdat je natuurlijk niet voor elke wijziging terug wilt naar je command prompt om het 'tsc' commando te runnen is er een watcher beschikbaar.
Deze zorgt er voor dat zodra een *.ts bestand gewijzigd wordt in de aangegeven folder de typescript compiler het bestand direct omzet naar een JavaScript tegenhanger.
Je start de TypeScript Watcher door in Command Prompt te navigeren naar de root folder en daar onderstaand commando te runnen (zorg er dus wel voor dat je een tsconfig.json aangemaakt hebt)
tsc -w