TypeScript - Syntaxe de base

TypeScript - Syntaxe de base

La syntaxe de TypeScript est fondamentalement basée sur la syntaxe JavaScript (spécifiquement, les standards ECMAScript modernes). Si vous connaissez JavaScript, vous connaissez déjà une grande partie de la syntaxe de TypeScript. TypeScript ajoute des annotations de type et des constructions spécifiques comme interface, enum et namespace.

Un programme TypeScript se compose de :

• Modules : Code organisé en fichiers séparés utilisant import et export (préféré).
• Espaces de noms : Une manière plus ancienne de regrouper le code (moins courante maintenant).
• Fonctions : Blocs de code réutilisables.
• Variables : Stockage nommé pour les données (utilisant let et const).
• Classes : Modèles pour créer des objets.
• Interfaces : Contrats définissant la forme des objets.
• Instructions et expressions : Instructions qui effectuent des actions.
• Commentaires : Texte explicatif ignoré par le compilateur.

Votre premier code TypeScript

Examinons un exemple simple de “Hello World” avec une annotation de type :

// Fichier : hello.ts

const message: string = "Hello, TypeScript World!";

function greet(text: string): void {
  console.log(text);
}

greet(message);

Éléments clés :

• Ligne 3 : Déclare une variable constante message avec une annotation de type explicite : string et lui affecte une valeur de chaîne de caractères.
• Ligne 5 : Définit une fonction greet qui accepte un paramètre text de type string et a un type de retour void (signifiant qu’elle ne retourne aucune valeur).
• Ligne 6 : Utilise console.log (une fonction JavaScript standard) pour afficher le texte.
• Ligne 9 : Appelle la fonction greet, en passant la variable message comme argument.

Compiler et exécuter TypeScript

Le code TypeScript doit être compilé en JavaScript avant de pouvoir être exécuté par les navigateurs ou Node.js.

1. Sauvegarder : Enregistrez votre code dans un fichier avec l’extension .ts (par exemple, hello.ts).
2. Compiler : Ouvrez votre terminal ou invite de commande, naviguez jusqu’au répertoire du fichier et exécutez le compilateur TypeScript (tsc) : tsc hello.ts. Cela générera un fichier JavaScript correspondant (par exemple, hello.js).
3. Exécuter : Exécutez le fichier JavaScript généré en utilisant Node.js : node hello.js.

JavaScript compilé (hello.js) :

var message = "Hello, TypeScript World!";
function greet(text) {
    console.log(text);
}
greet(message);
// Remarque : Le résultat exact dépend des paramètres 'target' de votre fichier tsconfig.json.
// Cet exemple suppose une cible plus ancienne comme ES3/ES5.

Pour le développement, des outils comme ts-node vous permettent d’exécuter directement les fichiers .ts sans étape de compilation séparée (ts-node hello.ts). Pour les projets, vous configurez généralement la compilation à l’aide d’un fichier tsconfig.json.

tsconfig.json et options du compilateur

Pour tout projet non trivial, vous devriez utiliser un fichier tsconfig.json dans le répertoire racine pour configurer le compilateur TypeScript. Vous pouvez en générer un par défaut en utilisant tsc --init.

Options clés souvent configurées dans tsconfig.json :

Option	Description
target	Spécifie la version ECMAScript cible pour le JavaScript de sortie (par exemple, "ES2016", "ESNext").
module	Spécifie le système de modules pour le code de sortie (par exemple, "CommonJS", "ES2020", "NodeNext").
outDir	Redirige la sortie JavaScript compilée vers un répertoire spécifié (par exemple, "./dist").
rootDir	Spécifie le répertoire racine de vos fichiers .ts source.
strict	Active un ensemble d’options de vérification de type strictes (recommandé pour les nouveaux projets).
esModuleInterop	Améliore la compatibilité lors de l’importation de modules CommonJS.
sourceMap	Génère les fichiers .map correspondants pour le débogage du code TypeScript original.
noImplicitAny	(Fait partie de strict) Génère des erreurs sur les expressions et déclarations avec un type any implicite.

L’exécution de tsc dans un répertoire contenant un tsconfig.json compilera le projet selon ces paramètres.

Identifiants

Noms donnés aux variables, fonctions, classes, etc. Suivent les règles JavaScript standard : doivent commencer par une lettre, _ ou $, peuvent contenir des lettres, des chiffres, _, $. Sensibles à la casse. Ne peuvent pas être des mots-clés réservés.

Mots-clés

Mots réservés ayant une signification spéciale (par exemple, let, const, class, interface, function, if, else, for, while, import, export, type, public, private, protected).

Espaces et sauts de ligne

TypeScript ignore les espaces, tabulations et sauts de ligne (espaces blancs) qui ne font pas partie des littéraux de chaîne. Utilisez les espaces blancs pour formater le code et améliorer sa lisibilité.

Sensibilité à la casse

TypeScript est sensible à la casse (variable et Variable sont distincts).

Points-virgules

Les points-virgules (;) sont techniquement optionnels en TypeScript (comme en JavaScript) en raison de l’Insertion Automatique de Point-virgule (ASI). Cependant, il est généralement considéré comme une bonne pratique d’inclure les points-virgules à la fin des instructions pour éviter toute ambiguïté potentielle et assurer un comportement de code cohérent.

Commentaires

// Ceci est un commentaire sur une seule ligne

/*
  Ceci est un
  commentaire sur plusieurs lignes.
*/

/**
 * Ceci est un commentaire JSDoc, souvent utilisé pour la génération de documentation.
 * @param name Le nom à saluer
 */
function greetWithDoc(name: string): void {
    console.log(`Hello, ${name}`);
}

Concepts de programmation orientée objet

TypeScript prend entièrement en charge les principes de la programmation orientée objet (POO) avec un support de première classe pour les classes, les interfaces, l’héritage (extends) et les modificateurs d’accès (public, private, protected).

class Greeter {
    private greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet(): void {
        console.log(this.greeting);
    }
}

const myGreeter = new Greeter("Welcome to OOP in TypeScript!");
myGreeter.greet();

Cette syntaxe de base constitue le fondement de l’écriture de code TypeScript. Les sections suivantes approfondiront des fonctionnalités spécifiques comme les types, les fonctions, les classes, les modules et plus encore.