Modules
Eigen Modules Maken
Wat zijn modules?
Modules zijn een manier om je code te organiseren in verschillende bestanden. Vaak wil je bepaalde functies beschikbaar maken voor andere bestanden. Dit kan je doen door deze functies in een module te zetten. Je kan dan in andere bestanden deze module importeren en de functies gebruiken.
Eigenlijk heb je al modules gebruikt in vorige delen in de vorm van npm packages. Deze bevatten ook modules die je kan importeren in je eigen code.
Hoe maak je een module?
Stel dat je een functie hebt om de oppervlakte te berekenen van een cirkel, vierkant en rechthoek.
Tot nu toe heb je altijd deze functies in hetzelfde bestand gezet. Maar stel dat je deze functies ook in een ander bestand wil gebruiken. Dan kan je deze functies in een module zetten door gebruik te maken van een export
statement.
Zorg er wel voor dat je deze functies in een apart bestand zet met de extensie .ts
. In dit geval bijvoorbeeld area.ts
.
Hoe importeer je functies uit een module?
Wil je deze functies gebruiken in een ander bestand? Dan moet je deze eerst importeren aan de hand van het volgende commando.
De functies die je wil importeren zet je tussen de accolades. Het gedeelte achter from
is het pad naar het bestand waar de module in staat. In dit geval is dat ./area
omdat het bestand area.ts
in dezelfde map staat als het bestand waar je de functies wil gebruiken. Plaats je de module in een andere map, dan moet je het pad aanpassen. Staat je area.ts
bestand in de directory functions
dan moet je het volgende commando gebruiken.
nu kan je deze functies gebruiken in je code net zoals je dat zou doen alsof ze in hetzelfde bestand staan.
Default exports
Heel vaak wordt er door een module maar één functie geëxporteerd. In dat geval kan je gebruik maken van een default export. Dit is een export zonder naam.
Je kan deze functie dan importeren zonder tussen de accolades te zetten.
In principe maakt het niet uit welke naam je achter de import zet want er is maar één functie geëxporteerd.
Interfaces exporteren
Tot nu toe hebben we altijd interfaces in hetzelfde bestand gezet als de code die deze interface gebruikt. Maar je kan ook interfaces exporteren uit een module.
We plaatsen deze interfaces vaak in een apart bestand met de naam types.ts
. We kunnen deze dan importeren in een ander bestand.
Classes exporteren
Net zoals functies en interfaces kunnen we ook onze classes in een apart bestand zetten en vervolgens importeren.
Bij classes is de regel dat elke class in een apart bestand komt te staan. Gebruik ook de naam van class als bestandsnaam. In dit geval dus het bestand 'planet.ts'.
Importeren is op dezelfde manier als bij de interface:
Opgelet voor de naamgeving ! Een class is steeds met een hoofdletter!
Aangezien er steeds maar één class per bestand zal zijn, kan je kiezen om via default export te werken. De naam van de class moet wel behouden worden, maar bij de import kan je zelf de naam van de class kiezen.
En bij de import vallen de accolades weg!
Npm Packages
npm.js
npm.js is de package manager voor JavaScript. Het is de grootste software registry ter wereld. Hier vind je heel veel packages die je kan gebruiken in je projecten. Je kan deze packages installeren aan de hand van het volgende commando.
Wil je een bepaalde package zoeken dan kan je dat doen op de npmjs website. Je vind er ook uitgebreide documentatie over de packages en hoe je deze kan gebruiken.
package.json
Elk project heeft een package.json
bestand. Dit bestand bevat alle informatie over je project. Het bevat ook een lijst van alle packages die je nodig hebt voor je project. Wanneer je een package installeert met npm dan wordt deze package toegevoegd aan dit bestand in de dependencies
sectie.
Je kan alle dependencies installeren aan de hand van het volgende commando. Dus je moet niet elke package apart installeren.
SemVer
= Semantic Versioning
De versienummer van een node module wordt samengesteld volgens semantic versioning met formaat: {major}.{minor}.{patch} . Bijvoorbeeld : 1.4.10
Major versienummer : grote wijzigingen, bestaande code zal waarschijnlijke breken
Minor versienummer : verbeteringen, compatibel met bestaande code
Patch versienummer : kleine aanpassingen, compatibel met bestaande code
Welke versie gebruiken?
Versienummer : gebruik exact deze versie
^Versienummer : gebruik de laatste versie van de patch release ( bv 4.1.x )
~Versienummer : gebruik de laatste versie van de minor release ( bv 4.x.x )
node_modules
Wanneer je een package installeert met npm dan wordt deze package geïnstalleerd in een map genaamd node_modules
. Deze map bevat alle packages die je nodig hebt voor je project. Je moet deze map niet zelf aanmaken. npm doet dit automatisch voor je.
Omdat alle dependencies opgegeven staan in het package.json
bestand en je deze ten allen tijde kan installeren aan de hand van het npm install
commando, moet je deze map ook niet toevoegen aan je git repository. Het is een goed idee om deze map toe te voegen aan je .gitignore
bestand. Voeg deze map ook nooit toe aan een zip bestand dat je doorstuurt naar iemand anders. Deze persoon kan dan zelf de dependencies installeren aan de hand van het npm install
commando.
Importeren van npm packages
Dit is ook de manier hoe je meestal npm packages importeert. Daar maakte het ook nooit uit welke naam je achter de import zette.
Deze functies kon je dan gebruiken door middel van de naam die je achter de import zette gevongd door een punt.
Voorbeeld: Chalk
We gaan in dit voorbeeld de chalk
package gebruiken. Deze package zorgt ervoor dat je tekst in de terminal kan kleuren. We gaan een programma maken dat de naam van de gebruiker in het rood toont.
Het eerste wat we moeten doen is de package installeren.
Opgelet we moeten hier de versie 4 installeren omdat de nieuwste versie niet werkt met ts-node
(en oudere versies van node)
Vervolgens bekijken we de documentatie van de package op de npmjs website. Hier vinden we hoe we de package kunnen gebruiken.
Dit zal de naam Jelle
in het rood tonen in de terminal.
Importeren van types
http://definitelytyped.github.io/
Af en toe kom je in contact met een npm package die geen meegeleverde types hebben. Dit is bijvoorbeeld het geval bij de readline-sync
package. In dat geval kan je gebruik maken van de @types
(ook gekend als DefinitelyTyped) packages. Deze bevatten de types die bij de npm package horen. Je moet deze dan wel altijd apart installeren.
Een overzicht van alle @types
packages die je nodig hebt in deze cursus:
Je kan op de npmjs website heel eenvoudig zien of een bepaalde package TypeScript support heeft:
Bevat deze geen van beide? Dan heb je helemaal geen types en heb je geen voordelen van TypeScript. Je moet dan ook nog een extra aanpassing doen aan je project om deze library toch nog te gebruiken.
Bijvoorbeeld de rainbow-colors-array
package bevat geen TypeScript support en geen @types
package. Je kan deze dan toch nog gebruiken door in je project een types.d.ts
bestand aan te maken met de volgende inhoud.
Dit is ook wat je vscode je aanraad als je over de error hovered als hij de types niet vindt:
Voorbeeld: Lodash
We gaan in dit voorbeeld de lodash
package gebruiken. Deze package bevat heel veel handige functies die je kan gebruiken in je projecten. Het is een soort zwitsers zakmes voor JavaScript.
We installeren deze library aan de hand van het volgende commando.
Deze library heeft geen ingebouwde types. We moeten deze dus apart installeren.
Vaak is de documentatie bedoeld voor een ouder module systeem. We moeten dan de documentatie aanpassen naar het nieuwe module systeem.
Dit moeten we aanpassen naar het nieuwe module systeem.
Vervolgens kunnen we de functies gebruiken zoals beschreven in de documentatie.
Bv de reverse
functie.
of de round
functie.
In die oefeningen zullen we nog een aantal handige functies van lodash
bekijken.
Last updated