Articles
Introductie tot TypeScript
De basis van TypeScript

De basis van TypeScript

Dit artikel legt de basisprincipes van TypeScript uit.

YouTube Video

"Hello World!" uitvoeren

Eerst zullen we het klassieke voorbeeld "Hello World!" uitvoeren in TypeScript met behulp van Visual Studio Code.

npm install -g typescript

Installeer typescript met behulp van het npm-commando.

Maak een tsconfig.json-bestand aan.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Maak een .vscode/launch.json-bestand aan om het uitvoeren van het main.ts-bestand in Visual Studio Code mogelijk te maken.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Maak een main.ts-bestand aan dat "Hello World!" weergeeft. Je kunt het uitvoeren in Visual Studio Code door op de F5-toets te drukken.

1console.log("Hello World!");

Door het op deze manier te configureren, kun je TypeScript-bestanden uitvoeren binnen VSCode.

Overzicht van TypeScript

TypeScript (TS) is een superset van JavaScript ontwikkeld door Microsoft. TypeScript ondersteunt statische typing, wat zorgt voor robuustere en beter onderhoudbare code.

Statische typing

  • TypeScript voegt types toe aan JavaScript en voert typecontrole uit tijdens de compilatietijd. Dit helpt om typegerelateerde bugs vooraf te voorkomen.
1let message: string = "Hello, TypeScript";
2console.log(message);

Compilatie

  • Omdat TypeScript niet direct in een browser kan worden uitgevoerd, moet het worden getranspileerd (gecompileerd) naar JavaScript. Gebruik tsc (TypeScript Compiler) om TS-bestanden om te zetten in JS-bestanden.

Optionele typeannotaties

  • TypeScript voert ook type-inferentie uit, maar stelt je in staat om types expliciet te specificeren wanneer dat nodig is. Dit verbetert de leesbaarheid en betrouwbaarheid van de code.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • TypeScript biedt interface om de structuur van objecten te definiëren. Dit maakt een strikte beheer van de objectstructuur mogelijk.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klassen

  • TypeScript biedt uitbreidingen aan de klassensyntaxis van JavaScript en ondersteunt overerving, toegangsmodifiers (public, private, protected) en abstracte klassen.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Generieken

  • In TypeScript kun je herbruikbare en type-veilige code schrijven met behulp van generieken.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ecosysteem

  • TypeScript is volledig compatibel met het JavaScript-ecosysteem en kan bestaande JavaScript-code direct gebruiken. Bovendien is het geïntegreerd met populaire bibliotheken zoals React en Node.js.

Krachtige Ontwikkelaarstools

  • TypeScript biedt geavanceerde functies zoals autocompletie, ondersteuning voor refactoring en foutcontrole in editors zoals VSCode.

TypeScript is bijzonder nuttig om de betrouwbaarheid te vergroten en de productiviteit van ontwikkelaars in grote projecten te verbeteren.

Variabelen in TypeScript

Dit verklaart de basisconcepten en het gebruik van variabelen in TypeScript.

Variabele Declaratie

In TypeScript worden variabelen gedeclareerd met behulp van drie trefwoorden: let, const en var. Elk trefwoord heeft verschillende kenmerken.

Voorbeeld van let:

let heeft een blokscope (alleen geldig binnen de accolades {}). Waardes kunnen later opnieuw worden toegewezen.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Voorbeeld van const:

const kan niet opnieuw toegewezen worden, dus de eenmaal toegewezen waarde kan niet worden gewijzigd. De inhoud van objecten en arrays kan echter worden gewijzigd.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Voorbeeld van var:

var heeft function scope en kan opnieuw worden toegewezen. Het negeren van block scope kan echter onverwacht gedrag veroorzaken in vergelijking met let of const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Typeannotaties

In TypeScript kun je expliciet types annoteren voor variabelen. Type-inferentie wordt ook ondersteund, maar typeannotaties zijn nuttig in complexe scenario's.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Niet-geïnitialiseerde variabelen

Als een variabele wordt gedeclareerd zonder initialisatie, krijgt deze standaard de waarde undefined. Een variabele gedeclareerd met let moet expliciet worden ingesteld op undefined of undefined opnemen in het type als het niet wordt geïnitialiseerd.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Variabele Scope

let en const hebben block scope, dus ze zijn alleen geldig binnen hetzelfde blok.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Variabele Hoisting

Aangezien TypeScript een superset van JavaScript is, erft het JavaScript's hoistingfunctie. Hoisting verwijst naar het gedrag waarbij variabele- en functiedeclaraties worden behandeld alsof ze naar de bovenkant van hun scope worden opgetild. Echter, alleen de declaratie wordt geheven, terwijl de initialisatie op zijn plaats blijft. Variabelen gedeclareerd met var worden geheven, maar het gebruik van let of const vóór declaratie resulteert in een fout.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • In dit geval worden variabelen gedeclareerd met var geheven, en hun waarden worden weergegeven.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabelen gedeclareerd met let worden niet geheven, wat resulteert in een fout.

Samenvatting

Het volgende is een samenvatting van let, const en var.

  • let kan opnieuw toegewezen worden en heeft een blokscope.
  • const kan niet opnieuw toegewezen worden en heeft een blokscope.
  • var kan opnieuw toegewezen worden en heeft een functiescope.
  • Al deze variabelen staan expliciete typeannotatie toe om variabeltypen te specificeren.

Escape-karakters in TypeScript

Escape-karakters worden gebruikt wanneer specifieke tekens niet direct kunnen worden ingevoerd of om tekens weer te geven die een speciale betekenis hebben binnen een string. In TypeScript worden escape-karakters gebruikt om controletekens of speciale tekens weer te geven.

Gebruik bijvoorbeeld \n om een bericht weer te geven dat een nieuwe regel bevat.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Speciale tekens escapen

Escape-karakters zijn ook handig bij het opnemen van speciale tekens in een string. Bijvoorbeeld, je wilt mogelijk dubbele aanhalingstekens of enkele aanhalingstekens rechtstreeks in een string gebruiken.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Het escapen van de backslash zelf

Om een backslash in een string op te nemen, moet je het schrijven als een dubbele backslash.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode en hexadecimale escapes

In TypeScript kunnen Unicode-codepunten worden weergegeven met escape-sequenties.

Unicode escape-sequentie

Je kunt Unicode-karakters weergeven door een viercijferig hexadecimaal getal na \u op te geven.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Hexadecimale escape

Je kunt specifieke tekens weergeven door een tweecijferig hexadecimaal getal na \x op te geven.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template-literals en escapes

Template literals worden gedefinieerd door ze tussen backticks te plaatsen en bieden een gemakkelijke manier om ingesloten expressies of meerregelige strings te maken. Gewone escape-karakters kunnen direct in template-literals worden gebruikt.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Speciale gevallen

In TypeScript kan het gebruik van ongeldige escape-sequenties binnen een string resulteren in een syntaxisfout. Daarom is het belangrijk om te controleren of de escape-karakters geldig zijn.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Praktische gebruiksvoorbeelden

Hier is een voorbeeld van het construeren van een complexe string met behulp van escape-karakters.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

In dit voorbeeld wordt \n gebruikt voor een nieuwe regel en \t voor het toevoegen van inspringen. Dit maakt de JSON-structuur gemakkelijker leesbaar.

Samenvatting

Escape-tekens zijn erg belangrijk bij het werken met strings in TypeScript. Wanneer je speciale tekens of besturingstekens in een string wilt opnemen, kun je expressieve strings maken door de juiste escape-sequenties te gebruiken. Het correct begrijpen en gebruiken van escape-tekens kan de leesbaarheid en onderhoudbaarheid van de code verbeteren.

Versies van TypeScript

Laten we hier een overzicht nemen van de TypeScript-versies.

  1. TypeScript 1.0 (2014)

    De eerste stabiele versie van TypeScript. Basisfunctionaliteiten zoals types, klassen en modules werden geïntroduceerd.

  2. TypeScript 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties en het Never-type werden geïntroduceerd, wat type-inferentie verbeterde.

  3. TypeScript 3.0 (2018)

    Een flexibeler typesysteem werd geïntroduceerd, met functies zoals Project References, uitbreidingen voor Tuple Types en verbeteringen aan Rest Parameters.

  4. TypeScript 4.0 (2020)

    Functies zoals Variadic Tuple Types, verbeteringen in de editor, verbeterde type-inferentie en Labelled Tuple Elements werden toegevoegd om de ontwikkelervaring te verbeteren.

  5. TypeScript 4.1 (2020)

    Template Literal Types werden geïntroduceerd, waardoor stringtype-manipulatie krachtiger werd.

  6. TypeScript 4.3 (2021)

    De toevoeging van het Override trefwoord, verbeteringen aan toegangsmodifiers binnen constructors, en verbeterde type-ondersteuning voor WeakMap en WeakSet.

  7. TypeScript 4.5 (2021)

    Het Awaited type, ModuleSuffixes, en verbeterde compatibiliteit met ECMAScript-modules zijn toegevoegd.

  8. TypeScript 5.0 (2023)

    Standaardisatie van Decorators, verbetering van de snelheid van projectbouw, verbetering van het typesysteem, en ondersteuning voor de nieuwste ECMAScript-functies zijn doorgevoerd.

TypeScript evolueert continu, met meerdere versies die elk jaar worden uitgebracht en nieuwe functies en verbeteringen introduceren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Gegevenstypen in TypeScript