WebOntwikkeling 2024
DigitAP
  • Introductie
  • Tooling
    • Devcontainers
    • Git
    • Terminal en bash
  • NodeJS + TypeScript
    • Wat is NodeJS?
    • Waarom TypeScript?
    • Nieuw project
    • Input lezen
    • Type Systeem
      • Basic types
      • Arrays
      • Interfaces
      • Functions
    • Exceptions
    • Modules
    • Asynchroon Programmeren
      • Promises
      • Async/Await
      • Fetch
      • Extra voorbeelden
  • Express.js
    • Wat is een backend framework?
    • Basis
    • Nodemon
    • Statische Bestanden
    • EJS
    • Request
      • GET Request
      • POST Request
      • Multi-part form data
    • Response
    • Router
    • Middleware
    • Deployment
  • MongoDB
    • Wat is MongoDB?
    • MongoDB driver
    • Insert
    • Find
    • Limit & Sort
    • Query Operators
    • Update
    • Delete
    • Text Search
    • Gebruik in Express.js
      • CRUD
  • Security & Testing
    • Environment Variables
    • Cookies
    • Hashing & Encryptie
    • Sessions
      • Session Based Login
    • JWT Tokens
      • JWT NPM package
      • Tokens veilig opslaan
      • Token Based Login
    • Testing
  • Labos
    • 1. Tooling
    • 2. Basis
      • Hello Name
      • BMI Calculator
      • BMI Calculator Multi
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 3. Arrays
      • Som van getallen
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
    • 4. Interfaces & functies
      • Interfaces
        • Recepten
        • Movies Objects
        • Todo List Objects
      • Functies
        • Math Fun
        • Short Notation
        • Array Sum
        • Movies Functions
        • Filter Numbers
        • At Least Two
    • 5. Async & fetch
      • Fake Fetch
      • Promise All
      • Slow Sum
      • Todo List Fetch
      • Cocktails Promise All
      • Bitcoin API
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 6. Modules en NPM Packages
      • Math Module
      • Export Interfaces
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 7. Express
      • Hello Express
      • DadJoke Express
      • Bitcoin current
    • 8. EJS + Static
      • Hello Express EJS
      • Cat Static
      • Maaltafels
      • Newspaper
    • 9. Get Request
      • Hello Query
      • Math Service
      • Newspaper Route
      • Newspaper Search
      • Steam
    • 10. Post Request
      • Pet Shelter
      • Redirect Form
      • Contact Form
    • 11. Router en Middleware
      • Router Combi
      • Utility Middleware
      • Rate Limiter
    • 12. Herhaling
      • Twitter
      • Word Guess
    • 13. Mongo Basics
      • Guestbook
      • MoviesDB
      • Pokemon Team
    • 14. Mongo Queries
      • Pet Shelter
      • Games DB
    • 15. Mongo + Express
      • Pet Shelter Express
      • Guestbook Express
      • Pokemon Team Express
    • 16. CRUD
      • Users CRUD
      • Pokedex
    • 17. Session & Cookies
      • Shopping Cookie
      • View Counter Cookies
      • View Counter Sessions
    • 18. Session based login
      • Login Express
      • Pokedex Express Sessions
    • 19. Token based login
      • JWT Sign
      • Login Express JWT
    • 20. Testing
      • Math Test
      • String Test
      • Math Express Test
      • Form Express Test
      • Pet Shelter Express Test
    • 21. Herhaling
      • Youtube Favorites
      • Beerster
    • Extra oefeningen
      • DNA Match
      • View Counter
      • Hogwarts Express CRUD
  • Project
    • Voorbereiding (devcontainer + github)
    • Semester 2
      • Milestone 1 - Terminal App
      • Milestone 2 - Express
      • Milestone 3 - MongoDB
      • Milestone 4 - Security
Powered by GitBook
On this page
  • npm init
  • TypeScript configuratie
  • Node types installeren
  • Bestand aanmaken
  • Uitvoeren
  • Samengevat
  • create-clean-node
Export as PDF
  1. NodeJS + TypeScript

Nieuw project

Vooraleer we kunnen starten met het schrijven van een node applicatie moeten we eerst een nieuwe directory aanmaken waar we onze code in kunnen plaatsen.

We zullen in dit geval een nieuwe directory aanmaken met de naam hello. Je kan deze in een directory theorie plaatsen.

Vervolgens zorg je ervoor dat je in de hello directory zit aan de hand van het cd commando.

cd theorie/hello

npm init

Nu we een nieuwe directory hebben aangemaakt kunnen we een nieuw project aanmaken. Dit doen we aan de hand van het npm init commando.

npm init

Dit commando zal een aantal vragen stellen over jouw project. Je kan deze gewoon beantwoorden door op enter te drukken. Als je dit commando hebt uitgevoerd zal je een nieuw bestand package.json zien in je directory. Dit bestand bevat alle informatie over jouw project. We zullen hier later nog op terugkomen.

TypeScript configuratie

Nu we een nieuw project hebben aangemaakt moeten we een nieuwe TypeScript configuratie aanmaken. Dit doen we aan de hand van het tsc --init commando.

tsc --init

Dit commando zal een nieuw bestand tsconfig.json aanmaken in je directory. Dit bestand bevat alle configuratie opties voor de TypeScript compiler.

Node types installeren

Nu we een TypeScript configuratie hebben aangemaakt moeten we de node types installeren. Dit zijn de types die nodig zijn om met TypeScript en Node.js te werken.

npm install --save-dev @types/node

Je zal zien dat er een nieuwe directory node_modules is aangemaakt in je project. Hierin zitten alle modules die je nodig hebt om je project te laten werken.

Bestand aanmaken

Nu we alle configuratie hebben aangemaakt kunnen we beginnen met het schrijven van onze code. Maak een nieuw bestand hello.ts aan in de hello directory. De bestandsnaam mag je zelf kiezen.

Het bestand hello.ts moet het volgende bevatten:

console.log('Hello, world!');

Uitvoeren

Nu we ons programma hebben geschreven kunnen we dit uitvoeren. Dit kan je doen aan de hand van het ts-node commando.

ts-node hello.ts

Dit commando zal je programma uitvoeren en je zal Hello, world! zien verschijnen in je terminal.

Samengevat

Commando
Beschrijving

npm init

Maakt een nieuw project aan.

tsc --init

Maakt een nieuw tsconfig bestand aan. Het initialiseert een nieuw TypeScript project.

npm install --save-dev @types/node

Installeert alle types die nodig zijn om met TypeScript en Node.js te werken.

ts-node <naam file>.ts

Voert het programma uit dat je geschreven hebt in <naam file>.ts.

Deze commando's zal je voor elk nieuw project moeten uitvoeren. Het is dus handig om deze te onthouden.

create-clean-node

Er zijn talrijke scripts beschikbaar die het opzetten van een TypeScript of JavaScript project aanzienlijk vereenvoudigen. Een voorbeeld hiervan is create-clean-node, een tool waarmee je met slechts één commando een nieuw project kunt starten. Door het volgende in je terminal te typen:

npx create-clean-node

word je gevraagd om een projectnaam in te voeren, waarna create-clean-node automatisch alle benodigde afhankelijkheden installeert.

PreviousWaarom TypeScript?NextInput lezen

Last updated 3 months ago