Gegevenstypen in TypeScript

Dit artikel legt gegevenstypen in TypeScript uit.

YouTube Video

Gegevenstypen in TypeScript

TypeScript biedt een verscheidenheid aan gegevenstypen. Hiermee kunt u strikte typen definiëren voor variabelen, functieargumenten en retourwaarden. Hieronder staan de belangrijkste gegevenstypen en hun gebruik.

Primitieve typen

nummer Type

1let age: number = 25;
2console.log(age);          // Outputs: 25
3console.log(typeof age);    // Outputs: number

• number is een type dat wordt gebruikt voor het omgaan met numerieke waarden, inclusief gehele getallen en zwevende-kommagetallen (decimalen). Het verwerken van waarden die bepaalde limieten overschrijden, resulteert in Infinity of NaN (Not-a-Number).

1// Decimal calculations
2console.log(0.1 + 0.2 === 0.3); // false
3console.log(0.1 + 0.2); // 0.30000000000000004
4
5// Calculations with large numbers
6console.log(9007199254740991 + 1); // correct value
7console.log(9007199254740991 + 2); // incorrect value

• In TypeScript worden getallen weergegeven als zwevende-kommagetallen. Dit kan resulteren in kleine onnauwkeurigheden in berekeningsresultaten.

• Wanneer nauwkeurige berekeningen vereist zijn, zoals bij financiële bedragen, is het noodzakelijk om afrondingsfouten zoals deze te vermijden. Bijvoorbeeld, u kunt BigInt of toFixed() gebruiken, of de decimalen aanpassen met behulp van bibliotheken zoals decimal.js.

string Type

Het string type behandelt tekstuele gegevens.

1let greeting: string = "Hello, TypeScript!";
2console.log(greeting);     // Outputs: Hello, TypeScript!
3console.log(typeof greeting);  // Outputs: string

boolean (Logisch Type)

Het boolean type heeft twee waarden: true of false.

1let isOpen: boolean = true;
2console.log(isOpen);       // Outputs: true
3console.log(typeof isOpen);    // Outputs: boolean

null en undefined

null vertegenwoordigt een 'niet-bestaande waarde', en undefined vertegenwoordigt een 'onbepaalde waarde'.

1let emptyValue: null = null;
2let notDefined: undefined = undefined;
3
4console.log(emptyValue);       // Outputs: null
5console.log(typeof emptyValue);    // Outputs: object (JavaScript specification)
6
7console.log(notDefined);       // Outputs: undefined
8console.log(typeof notDefined);    // Outputs: undefined

Array

In TypeScript kunt u het type elementen in een array specificeren. number[] is een array van nummers en string[] is een array van strings.

1let numbers: number[] = [1, 2, 3, 4];
2console.log(numbers);        // Outputs: [1, 2, 3, 4]
3console.log(typeof numbers); // Outputs: object
4
5let words: string[] = ["TypeScript", "JavaScript"];
6console.log(words);          // Outputs: ["TypeScript", "JavaScript"]
7console.log(typeof words);   // Outputs: object

Tupel

Een tupel is een array met elementen van verschillende typen.

1let person: [string, number] = ["Alice", 30];
2console.log(person);         // Outputs: ["Alice", 30]
3console.log(typeof person);  // Outputs: object

Enum

enum definieert een reeks genaamde constanten.

1enum Color {
2    Red,
3    Green,
4    Blue
5}
6
7let favoriteColor: Color = Color.Green;
8console.log(favoriteColor);  // Outputs: 1 (Defaults start from 0)
9console.log(typeof favoriteColor); // Outputs: number

any

Het any type kan elk type waarde bevatten en wordt gebruikt wanneer u typecontrole wilt uitschakelen.

1let anything: any = "Hello";
2console.log(anything);       // Outputs: Hello
3console.log(typeof anything);    // Outputs: string
4
5anything = 42;
6console.log(anything);       // Outputs: 42
7console.log(typeof anything);    // Outputs: number

Union Type

Met Union types kunt u variabelen definiëren die één van meerdere typen kunnen bevatten.

1let identifier: number | string = "ID_12345";
2console.log(identifier);     // Outputs: ID_12345
3console.log(typeof identifier);  // Outputs: string
4
5identifier = 12345;
6console.log(identifier);     // Outputs: 12345
7console.log(typeof identifier);  // Outputs: number

Samenvatting

• number, string, boolean: Primitieve typen.
• null, undefined: Speciale waarden.
• Array: Een array met typeannotaties.
• Tuple: Een array met elementen van verschillende typen.
• enum: Een enumeratietype.
• any: Elk type.
• Union: Een variabele die een van meerdere typen kan aannemen.

Door gebruik te maken van deze datatypes verbetert TypeScript de typestrictheid, waardoor fouten tijdens de ontwikkeling eenvoudiger kunnen worden voorkomen.

Wrapper-objecten

Wrapper-objecten in TypeScript zijn objecten die automatisch worden aangemaakt om primitieve datatypes als objecten te behandelen. Primitieve typen staan lichte en snelle operaties toe, terwijl objecttypen methoden en eigenschappen hebben die rijkere operaties mogelijk maken.

In JavaScript (en TypeScript) zijn er wrapper-objecten die overeenkomen met primitieve typen zoals string, number en boolean. Ze worden aangemaakt met behulp van constructorfuncties genaamd String, Number en Boolean.

Hieronder staan voorbeelden van wrapper-objecten.

String-object

Het String-object biedt eigenschappen en methoden voor strings.

1let strPrimitive: string = "Hello, World!";
2let strObject: String = new String("Hello, World!");
3
4console.log(strPrimitive);         // Outputs: Hello, World!
5console.log(typeof strPrimitive);  // Outputs: string
6
7console.log(strObject);            // Outputs: [String: 'Hello, World!']
8console.log(typeof strObject);     // Outputs: object

Kenmerken:

• In tegenstelling tot primitieve string wordt een String-object door typeof als object behandeld.
• Wrapper-objecten zijn nuttig bij het manipuleren van strings of het aanroepen van methoden ervan.

Number-object

Het Number-object biedt eigenschappen en methoden voor getallen.

1let numPrimitive: number = 42;
2let numObject: Number = new Number(42);
3
4console.log(numPrimitive);         // Outputs: 42
5console.log(typeof numPrimitive);  // Outputs: number
6
7console.log(numObject);            // Outputs: [Number: 42]
8console.log(typeof numObject);     // Outputs: object

Kenmerken:

• Het Number-object, als een wrapper voor getallen, bevat methoden voor numerieke operaties (bijv. toFixed).

Boolean-object

Het Boolean-object biedt eigenschappen en methoden voor booleaanse waarden.

1let boolPrimitive: boolean = true;
2let boolObject: Boolean = new Boolean(true);
3
4console.log(boolPrimitive);        // Outputs: true
5console.log(typeof boolPrimitive); // Outputs: boolean
6
7console.log(boolObject);           // Outputs: [Boolean: true]
8console.log(typeof boolObject);    // Outputs: object

Kenmerken:

• Het Boolean-object is een wrapper voor het primitieve type boolean en wordt behandeld als object.

Verschillen tussen wrapper-objecten en primitieve typen

Omdat wrapper-objecten als objecten worden behandeld, is er een kleine prestatieafname, maar zijn meer functionele operaties mogelijk dankzij toegevoegde eigenschappen en methoden. Bovendien zijn er verschillen in vergelijking bij gebruik van == en ===.

1let numPrimitive: number = 123;
2let numObject: Number = new Number(123);
3
4console.log('==  : ', numPrimitive == numObject);  // Outputs: true (Value comparison)
5console.log('=== : ', numPrimitive === numObject); // Outputs: false (Due to differing types)

Kenmerken:

• == vergelijkt waarden, terwijl === strikt vergelijkt, inclusief typen. === retourneert false bij het vergelijken van wrapper-objecten met primitieve typen.

Typconversie

In TypeScript is het belangrijk om impliciete en expliciete typeconversies correct te beheren.

Impliciete Typconversie

• In TypeScript moeten impliciete typeconversies zoveel mogelijk worden vermeden om typeveiligheid te garanderen.

1const result: string = 5 + "5"; // "55" (the number is converted to a string)
2
3console.log(result);

• In dit voorbeeld wordt het getal 5 impliciet geconverteerd naar een string, wat resulteert in de string "55".

Expliciete Typconversie

• In TypeScript gebruikt u typeannotaties of typeconversiefuncties om veilig typeconversies uit te voeren.

1const num: string = "123";
2const convertedNum: number = Number(num); // Converts "123" to the number 123
3
4console.log(typeof num);
5console.log(typeof convertedNum);

• In dit voorbeeld wordt de Number()-functie gebruikt om de string "123" expliciet om te zetten in het getal 123.

Typecontrole

In TypeScript kunt u de typeof-operator gebruiken om het gegevenstype van een variabele te controleren.

 1// Output: The type of 42 is: number
 2console.log('The type of 42             is:', typeof 42);
 3
 4// Output: The type of 42 is: bigint
 5console.log('The type of 42n            is:', typeof 42n);
 6
 7// Output: The type of "hello" is: string
 8console.log('The type of "hello"        is:', typeof "hello");
 9
10// Output: The type of true is: boolean
11console.log('The type of true           is:', typeof true);
12
13// Output: The type of undefined is: undefined
14console.log('The type of undefined      is:', typeof undefined);
15
16// Output: The type of null is: object
17console.log('The type of null           is:', typeof null);
18
19// Output: The type of Symbol() is: symbol
20console.log('The type of Symbol()       is:', typeof Symbol());
21
22// Output: The type of {} is: object
23console.log('The type of {}             is:', typeof {});
24
25// Output: The type of function () {} is: function
26console.log('The type of function () {} is:', typeof function () {});

• In TypeScript kunt u typeof gebruiken om types te controleren, maar voor nauwkeurigere typecontrole wordt ook aanbevolen om de instanceof- of is-operatoren te gebruiken.

Samenvatting

• Wrapper-objecten worden behandeld als objecten omdat ze extra methoden en eigenschappen bieden voor primitieve typen.
• String, Number en Boolean zijn representatieve voorbeelden van wrapper-objecten.
• In tegenstelling tot primitieve typen worden wrapper-objecten door typeof geïdentificeerd als object.

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

YouTube Video