Types de données dans TypeScript

Articles

Cet article explique les types de données dans TypeScript.

YouTube Video

Types de données dans TypeScript

TypeScript propose une variété de types de données. Cela permet de définir des types stricts pour les variables, les arguments de fonctions et les valeurs de retour. Voici les principaux types de données et leur utilisation.

Types Primitifs

Type number

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

number est un type utilisé pour gérer des valeurs numériques, y compris les entiers et les nombres à virgule flottante (décimaux). La gestion des valeurs qui dépassent certaines limites donne Infinity ou 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

En TypeScript, les nombres sont représentés sous forme de nombres à virgule flottante. Cela peut entraîner de légères inexactitudes dans les résultats des calculs.
Lorsque des calculs précis sont nécessaires, comme pour des montants financiers, il est important d'éviter des erreurs d'arrondi de ce type. Par exemple, vous pouvez utiliser BigInt ou toFixed(), ou ajuster les décimales en utilisant des bibliothèques comme decimal.js.

Type string

Le type string gère les données textuelles.

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

booléen (Type logique)

Le type booléen a deux valeurs : true ou false.

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

null et undefined

null représente une 'valeur inexistante', et undefined représente une 'valeur indéfinie'.

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

Dans TypeScript, vous pouvez spécifier le type des éléments d’un tableau. number[] est un tableau de nombres, et string[] est un tableau de chaînes de caractères.

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

Tuple

Un tuple est un tableau avec des éléments de types différents.

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

Enum

enum définit un ensemble de constantes nommées.

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

Le type any peut contenir n’importe quel type de valeur et est utilisé lorsque vous souhaitez désactiver la vérification de type.

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

Type Union

En utilisant des types Union, vous pouvez définir des variables qui peuvent contenir un des types multiples.

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

Résumé

number, string, boolean : Types primitifs.
null, undefined : Valeurs spéciales.
Array : Un tableau avec des annotations de type.
Tuple: Un tableau avec des éléments de différents types.
enum : Un type énuméré.
any: Tout type.
Union : Une variable qui peut prendre un de plusieurs types.

En utilisant ces types de données, TypeScript améliore la sécurité des types, ce qui facilite la prévention des erreurs pendant le développement.

Objets enveloppants

Objets Wrapper dans TypeScript sont des objets créés automatiquement pour traiter les types de données primitifs comme des objets. Les types primitifs permettent des opérations légères et rapides, tandis que les types d'objet ont des méthodes et des propriétés, permettant des opérations plus riches.

En JavaScript (et TypeScript), il existe des objets wrapper correspondant aux types primitifs comme string, number et boolean. Ils sont créés à l'aide de fonctions constructrices appelées respectivement String, Number et Boolean.

Voici des exemples d'objets wrapper.

Objet String

L'objet String fournit des propriétés et des méthodes pour les chaînes.

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

Caractéristiques :

Contrairement à une primitive string, un objet String est traité comme un object par typeof.
Les objets wrapper sont utiles pour manipuler des chaînes ou appeler des méthodes sur elles.

Objet Number

L'objet Number fournit des propriétés et des méthodes pour les nombres.

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

Caractéristiques :

L'objet Number, en tant que wrapper pour les nombres, inclut des méthodes pour des opérations numériques (par ex., toFixed).

Objet Boolean

L'objet Boolean fournit des propriétés et des méthodes pour les valeurs booléennes.

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

Caractéristiques :

L'objet Boolean est un wrapper pour le type primitif boolean et est traité comme un object.

Différences entre les Objets Wrapper et les Types Primitifs

Étant donné que les objets wrapper sont traités comme des objets, il y a une légère baisse de performance, mais davantage d'opérations fonctionnelles sont possibles grâce aux propriétés et méthodes ajoutées. De plus, il existe des différences dans les comparaisons utilisant == et ===.

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)

Caractéristiques :

== compare les valeurs, tandis que === compare strictement en incluant les types. === retourne false lorsqu'on compare des objets encapsulateurs avec des types primitifs.

Conversion de Type

En TypeScript, il est important de gérer correctement les conversions de type implicites et explicites.

Conversion de Type Implicite

En TypeScript, il convient d'éviter autant que possible les conversions de type implicites pour garantir la sécurité des types.

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

Dans cet exemple, le nombre 5 est implicitement converti en chaîne, donnant la chaîne "55".

Conversion de Type Explicite

En TypeScript, utilisez des annotations de type ou des fonctions de conversion de type pour effectuer des conversions en toute sécurité.

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

Dans cet exemple, la fonction Number() est utilisée pour convertir explicitement la chaîne "123" en le nombre 123.

Vérification de Type

En TypeScript, vous pouvez utiliser l'opérateur typeof pour vérifier le type de données d'une variable.

 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 () {});

En TypeScript, vous pouvez utiliser typeof pour vérifier les types, mais pour une vérification de type plus précise, il est également recommandé d'utiliser les opérateurs instanceof ou is.

Résumé

Les objets encapsulateurs sont traités comme des objets car ils offrent des méthodes et des propriétés supplémentaires pour les types primitifs.
String, Number et Boolean sont des exemples représentatifs d'objets encapsulateurs.
Contrairement aux types primitifs, les objets encapsulateurs sont identifiés comme des object par typeof.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Notions de base de TypeScript Opérateurs en TypeScript