Inleiding TypeScript

Wat is TypeScript?

  • TypeScript is een superset van JavaScript.
  • De bestandsextensie is .ts
  • Je bent verplicht om aan elke variabele een type toe te kennen.
  • In TypeScript kan je ondermeer ook klassen en interfaces definiĆ«ren.
  • TypeScript wordt door geen enkele browser ondersteund. Een browser herkent enkel JavaScript.
  • De Angular CLI compiler/transpiler converteert TypeScript-code naar JavaScript-code.

Extra bronnen:

TypeScript in 5 minuten.

Bestudeer en experimenteer met de voorbeelden in deze tutorial: typescriptlang.org

  • Download de startbestanden en open de map in WebStorm.
  • Installeer TypeScript en een webserver vanuit de terminal: $ npm install -g typescript live-server.
  • Maak een nieuw TypeScript-bestand greeter.ts.
    Experimenteer met de voorbeeldcode van de tutorial.
  • Maak een nieuw HTML-bestand greeter.html en verwijs onderaan de body-tag naar greeter.js.
    Let op de extensie: dus niet .ts maar wel .js!
  • Run de TypeScript compiler vanuit de terminal: $ tsc *.ts -w.
    De optie -w staat voor watch. Bij elke wijziging wordt het TypeScript-bestand automatisch opnieuw gecompileerd naar een JavaScript-bestand.
  • Open een tweede terminalvenster en start de webserver: live-server.
    De indexpagina opent op http://localhost:8080.

            

            

            

Een kort overzicht van de belangrijkste array properties en methoden.


            

Extra oefeningen.

Om Angular te gebruiken, hoef je niet alles van TypeScript te begrijpen. Met een grondige basiskennis van types en klassen kom je al een heel eind.

In de startbesanden die je net hebt gedownload, vind je al enkele half uitgewerket oefeningen. Een aantal technieken, zoals het uitlezen van teksvelden en de inhoud van een HTML-tag wijzigen, krijg je kado. In Angular ga je deze code immers niet meer terug vinden. Angular gebruikt namelijk databinging om gegevens tussen de HTML-code en de TypeScrip-code uit te wisselen. Hierover later meer.