Articles
Introduction à TypeScript
Notions de base de TypeScript

Notions de base de TypeScript

Cet article explique les notions de base de TypeScript.

YouTube Video

Exécution de "Hello World!"

Tout d'abord, nous allons exécuter l'exemple classique "Hello World!" en TypeScript à l'aide de Visual Studio Code.

npm install -g typescript

Installez typescript en utilisant la commande npm.

Créez un fichier tsconfig.json.

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

Créez un fichier .vscode/launch.json pour activer l'exécution du fichier main.ts dans Visual Studio Code.

 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}

Créez un fichier main.ts qui affiche "Hello World!". Vous pouvez l'exécuter dans Visual Studio Code en appuyant sur la touche F5.

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

En configurant de cette manière, vous pouvez exécuter des fichiers TypeScript dans VSCode.

Aperçu de TypeScript

TypeScript (TS) est un surensemble de JavaScript développé par Microsoft. TypeScript prend en charge la typage statique, permettant un code plus robuste et maintenable.

Typage Statique

  • TypeScript ajoute des types à JavaScript et effectue des vérifications de type lors de la compilation. Cela permet de prévenir les bogues liés aux types à l'avance.
1let message: string = "Hello, TypeScript";
2console.log(message);

Compilation

  • Étant donné que TypeScript ne peut pas être exécuté directement dans un navigateur, il doit être transpilé (compilé) en JavaScript. Utilisez tsc (TypeScript Compiler) pour convertir les fichiers TS en fichiers JS.

Annotations de Type Optionnelles

  • TypeScript effectue également une inférence de type mais vous permet de spécifier explicitement les types lorsque c'est nécessaire. Cela améliore la lisibilité et la fiabilité du code.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • TypeScript propose des interfaces pour définir la structure des objets. Cela permet une gestion stricte de la structure des objets.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Classes

  • TypeScript propose des extensions à la syntaxe des classes de JavaScript et prend en charge l'héritage, les modificateurs d'accès (public, private, protected) et les classes abstraites.
 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();

Génériques

  • En TypeScript, vous pouvez écrire du code réutilisable et sûr grâce aux génériques.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Écosystème

  • TypeScript est entièrement compatible avec l'écosystème JavaScript et peut utiliser directement le code JavaScript existant. De plus, il est intégré à des bibliothèques populaires comme React et Node.js.

Outils puissants pour les développeurs

  • TypeScript propose des fonctionnalités avancées telles que l'autocomplétion, le support du refactoring et la vérification des erreurs dans des éditeurs comme VSCode.

TypeScript est particulièrement utile pour améliorer la fiabilité et augmenter la productivité des développeurs dans les grands projets.

Variables en TypeScript

Cela explique les concepts de base et l'utilisation des variables en TypeScript.

Déclaration de variables

En TypeScript, les variables sont déclarées à l'aide de trois mots-clés : let, const et var. Chaque mot-clé a des caractéristiques différentes.

Exemple de let :

let a une portée de bloc (valable uniquement à l'intérieur des accolades {}). Les valeurs peuvent être réassignées ultérieurement.

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

Exemple de const :

const ne peut pas être réaffecté, donc la valeur assignée une fois ne peut pas être modifiée. Cependant, le contenu des objets et tableaux peut être modifié.

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"]

Exemple de var :

var a une portée de fonction et peut être réassigné. Cependant, en ignorant la portée de bloc, cela peut entraîner un comportement inattendu par rapport à let ou 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!"

Annotations de type

En TypeScript, vous pouvez annoter explicitement les types pour les variables. L'inférence de type est également prise en charge, mais les annotations de type sont utiles dans les scénarios complexes.

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

Variables non initialisées

Si une variable est déclarée sans initialisation, undefined est attribué par défaut. Une variable déclarée avec let doit être explicitement assignée à undefined ou inclure undefined dans son type si elle n'est pas initialisée.

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

Portée des variables

let et const ont une portée de bloc, donc ils ne sont valables que dans le même bloc.

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

Remontée des Variables

Étant donné que TypeScript est un sur-ensemble de JavaScript, il hérite de la fonctionnalité de remontée de JavaScript. La remontée fait référence au comportement où les déclarations de variables et de fonctions sont traitées comme si elles étaient remontées au sommet de leur portée. Cependant, seule la déclaration est remontée, tandis que l'initialisation reste en place. Les variables déclarées avec var sont remontées, mais l'utilisation de let ou const avant leur déclaration entraîne une erreur.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Dans ce cas, les variables déclarées avec var sont remontées, et leurs valeurs sont affichées.
1console.log(b); // ReferenceError
2let b = 20;
  • Les variables déclarées avec let ne sont pas remontées, ce qui entraîne une erreur.

Résumé

Ce qui suit est un résumé de let, const et var.

  • let est réaffectable et a une portée de bloc.
  • const n'est pas réaffectable et a une portée de bloc.
  • var est réaffectable et a une portée de fonction.
  • Tous permettent l'annotation de type explicite pour spécifier les types de variables.

Caractères d'échappement en TypeScript

Les caractères d'échappement sont utilisés lorsque certains caractères ne peuvent pas être saisis directement ou pour représenter des caractères ayant une signification spéciale dans une chaîne. En TypeScript, les caractères d'échappement sont utilisés pour représenter des caractères de contrôle ou des caractères spéciaux.

Par exemple, utilisez \n pour afficher un message comportant un saut de ligne.

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

Échapper les caractères spéciaux

Les caractères d'échappement sont également utiles pour inclure des caractères spéciaux dans une chaîne. Par exemple, vous pourriez vouloir utiliser des guillemets doubles ou simples directement dans une chaîne.

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!"

Échapper le caractère de barre oblique inverse

Pour inclure une barre oblique inverse (\) dans une chaîne, vous devez la saisir en double barre oblique inverse.

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

Échappements Unicode et hexadécimaux

En TypeScript, les points de code Unicode peuvent être représentés à l'aide de séquences d'échappement.

Séquence d'échappement Unicode

Vous pouvez représenter des caractères Unicode en spécifiant un nombre hexadécimal à quatre chiffres après \u.

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

Échappement hexadécimal

Vous pouvez représenter des caractères spécifiques en utilisant un nombre hexadécimal à deux chiffres après \x.

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

Littéraux de gabarit et échappements

Les littéraux de modèles sont définis en les encadrant avec des accents graves et offrent un moyen simple de créer des expressions intégrées ou des chaînes multilignes. Les caractères d'échappement ordinaires peuvent être utilisés directement dans les littéraux de gabarit.

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

Cas particuliers

En TypeScript, l'utilisation de séquences d'échappement invalides dans une chaîne peut entraîner une erreur de syntaxe. Par conséquent, il est important de vérifier si les caractères d'échappement sont valides.

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

Exemples d'utilisation pratique

Voici un exemple de construction d'une chaîne complexe en utilisant des caractères d'échappement.

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// }

Dans cet exemple, \n est utilisé pour un saut de ligne et \t est utilisé pour ajouter une indentation. Cela rend la structure JSON plus facile à lire.

Résumé

Les caractères d'échappement sont très importants lorsque vous travaillez avec des chaînes de caractères en TypeScript. Lorsque vous souhaitez inclure des caractères spéciaux ou des caractères de contrôle dans une chaîne, vous pouvez créer des chaînes expressives en utilisant des séquences d'échappement appropriées. Comprendre et utiliser correctement les caractères d'échappement peut améliorer la lisibilité et la maintenabilité du code.

Versions de TypeScript

Passons en revue les versions de TypeScript ici.

  1. TypeScript 1.0 (2014)

    La première version stable de TypeScript. Des fonctionnalités de base telles que le typage, les classes et les modules ont été introduites.

  2. TypeScript 2.0 (2016)

    Les types Non-nullable, l'analyse de flux de contrôle, les propriétés en lecture seule et le type Never ont été introduits, améliorant l'inférence de type.

  3. TypeScript 3.0 (2018)

    Un système de typage plus flexible a été introduit, avec des fonctionnalités telles que les références de projet, les extensions pour les types de tuples, et les améliorations des paramètres restants.

  4. TypeScript 4.0 (2020)

    Des fonctionnalités comme les types de tuples à longueur variable, les améliorations de l’éditeur, l’inférence de type améliorée, et les éléments de tuple étiquetés ont été ajoutées pour améliorer l'expérience de développement.

  5. TypeScript 4.1 (2020)

    Les types littéraux de template ont été introduits, rendant la manipulation des types de chaînes plus puissante.

  6. TypeScript 4.3 (2021)

    L'ajout du mot-clé Override, les améliorations des modificateurs d'accès dans les constructeurs, et le support amélioré des types pour WeakMap et WeakSet.

  7. TypeScript 4.5 (2021)

    Le type Awaited, les ModuleSuffixes, et une compatibilité améliorée avec les modules ECMAScript ont été ajoutés.

  8. TypeScript 5.0 (2023)

    La standardisation des Decorators, l'amélioration de la vitesse de construction des projets, le renforcement du système de type, et le support des dernières fonctionnalités d'ECMAScript ont été réalisés.

TypeScript évolue constamment, avec de multiples versions publiées chaque année introduisant de nouvelles fonctionnalités et améliorations.

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

Types de données dans TypeScript