TypeScript - Syntaxe de Base

Salut à toi, futurs mage de TypeScript ! ? Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde de TypeScript. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux te dire que TypeScript est comme une version suralimentée de JavaScript, et il va rendre ta vie de codage bien plus facile. C'est parti !

Ton Premier Code TypeScript

Bien, imagine que tu vas écrire ta première ligne dans un nouveau langage. Excitant, n'est-ce pas ? Commençons avec le programme classique "Hello, World!" en TypeScript.

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

Maintenant, tu peux penser, "Attends un moment, ça ressemble beaucoup à JavaScript !" Et tu aurais raison ! TypeScript est un supra-ensemble de JavaScript, ce qui signifie que tout JavaScript valide est également TypeScript valide. Mais ne t'inquiète pas, on va bientôt aborder les fonctionnalités spécifiques à TypeScript.

Essayons quelque chose de plus typé TypeScript :

let message: string = "Hello, TypeScript!";
console.log(message);

Voici ce qui se passe :

• Nous déclarons une variable appelée message
• La partie : string indique à TypeScript que cette variable ne doit contenir que des valeurs de type chaîne de caractères
• Nous affectons la chaîne "Hello, TypeScript!" à cette variable
• Enfin, nous l'affichons dans la console

C'est juste un avant-goût du système de types de TypeScript, qui est l'une de ses fonctionnalités les plus puissantes. C'est comme avoir un assistant robot friendly qui attrape tes erreurs avant même que tu exécutes ton code !

Compiler et Exécuter un Programme TypeScript

Maintenant que nous avons écrit du TypeScript, comment le faisons-nous réellement fonctionner ? Les navigateurs et Node.js ne comprennent pas directement TypeScript, donc nous devons le compiler en JavaScript d'abord. C'est comme traduire le TypeScript dans un langage que les ordinateurs savent déjà.

Voici comment tu fais :

1. Enregistre ton code TypeScript dans un fichier avec une extension .ts, disons hello.ts
2. Ouvre ton terminal ou invite de commande
3. Navigue vers le répertoire contenant ton fichier
4. Exécute le compilateur TypeScript :

tsc hello.ts

Cela créera un nouveau fichier appelé hello.js dans le même répertoire. C'est ton code TypeScript traduit en JavaScript !

Pour l'exécuter, tu peux utiliser Node.js :

node hello.js

Et voilà ! Tu devrais voir ton message affiché dans la console.

Options du Compilateur

Le compilateur TypeScript est plutôt intelligent, mais parfois tu veux lui donner des instructions spécifiques. C'est là que les options de compilation entrent en jeu. Ce sont comme des commandes spéciales que tu peux donner au compilateur pour modifier son comportement.

Voici un tableau de quelques options de compilation courantes :

Option	Description
--outDir	Spécifie un répertoire de sortie pour tous les fichiers émis
--target	Spécifie la version cible ECMAScript
--watch	Surveille les fichiers d'entrée
--strict	Active toutes les options de vérification de type strict

Par exemple, si tu veux compiler ton TypeScript vers une version plus ancienne de JavaScript pour des raisons de compatibilité, tu pourrais utiliser :

tsc --target ES5 hello.ts

Cela indique au compilateur de générer du JavaScript compatible avec ECMAScript 5, qui est pris en charge par les anciens navigateurs.

Identifiants en TypeScript

En programmation, nous utilisons des identifiants pour nommer des choses comme des variables, des fonctions et des classes. Pense à eux comme des étiquettes pour les différentes parties de ton code. En TypeScript, il y a certaines règles pour ces noms :

• Ils peuvent contenir des lettres, des chiffres, des tirets bas et des signes de dollar
• Ils doivent commencer par une lettre, un tiret bas ou un signe de dollar
• Ils sont sensibles à la casse (donc myVariable et MyVariable sont différents)
• Ils ne peuvent pas être un mot-clé réservé (nous en parlerons bientôt !)

Voici quelques identifiants valides :

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

Et quelques-uns invalides :

let 123abc: string = "Invalid"; // Ne peut pas commencer par un nombre
let my-variable: number = 10; // Ne peut pas utiliser des tirets
let class: string = "Mot-clé réservé"; // Ne peut pas utiliser des mots-clés réservés

TypeScript ─ Mots-clés

Les mots-clés sont des mots spéciaux qui ont des significations spécifiques en TypeScript. Ils sont comme le vocabulaire du langage. Tu ne peux pas les utiliser comme identifiants parce que TypeScript leur a déjà affecté une tâche.

Voici un tableau de quelques mots-clés courants :

Mot-clé	Description
let	Déclare une variable de portée de bloc
const	Déclare une constante de portée de bloc
if	Commence une instruction if
for	Commence une boucle for
function	Déclare une fonction
class	Déclare une classe
interface	Déclare une interface
type	Déclare un alias de type

Par exemple :

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x est positif");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

function greet(name: string): void {
console.log(`Hello, ${name}!`);
}

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

Chacun de ces mots-clés a un objectif spécifique dans la structuration et la définition de ton code.

Commentaires en TypeScript

Les commentaires sont comme de petites notes que tu laisses pour toi-même (ou pour d'autres développeurs) dans ton code. Ils sont ignorés par le compilateur, donc tu peux les utiliser pour expliquer ce que fait ton code sans affecter son exécution.

TypeScript prend en charge trois types de commentaires :

1. Commentaires à une ligne :

   // C'est un commentaire à une ligne
   let x: number = 5; // Tu peux aussi les mettre à la fin d'une ligne

2. Commentaires multilignes :

   /* C'est un commentaire multiligne
   Il peut s'étendre sur plusieurs lignes
   Utile pour des explications plus longues */
   let y: number = 10;

3. Commentaires de documentation :

   
   /**

• C'est un commentaire de documentation
• Il est souvent utilisé pour générer de la documentation pour des fonctions ou des classes
• @param name Le nom à saluer
• @returns Un message de salutation */ function greet(name: string): string { return Hello, ${name}!; }

souviens-toi, de bons commentaires expliquent pourquoi tu fais quelque chose, pas seulement ce que tu fais. Le code lui-même devrait être suffisamment clair pour montrer ce qui se passe.

TypeScript et Programmation Orientée Objet

Une des grandes choses à propos de TypeScript est son support pour la programmation orientée objet (POO). Si tu es nouveau dans la programmation, pense à la POO comme une façon d'organiser ton code autour d' "objets" qui ont des propriétés et des comportements.

Créons une simple classe Car pour illustrer :

class Car {
// Propriétés
make: string;
model: string;
year: number;

// Constructeur
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// Méthode
describe(): string {
return `This is a ${this.year} ${this.make} ${this.model}.`;
}
}

// Création d'une instance de Car
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // Affiche : This is a 2022 Toyota Corolla.

Reprenons cela :

• Nous définissons une classe Car avec des propriétés pour make, model, et year
• Le constructor est une méthode spéciale qui est appelée lorsque nous créons une nouvelle Car
• La méthode describe retourne une chaîne décrivant la voiture
• Nous créons un nouvel objet Car et appelons sa méthode describe

Le système de types de TypeScript brille vraiment en POO. Il peut attraper des erreurs comme tenter d'affecter une chaîne de caractères à la propriété year, ou appeler une méthode qui n'existe pas.

Et voilà ! Tu viens de faire tes premiers pas dans le monde de TypeScript. Souviens-toi, apprendre à coder est un voyage, pas une destination. Ne t'inquiète pas si tout ne devient pas clair immédiatement - continue de pratiquer, continue d'expérimenter, et surtout, continue de t'amuser ! Avant de t'en rendre compte, tu seras en train d'écrire des applications TypeScript complexes et de te demander comment tu as vécu sans typage statique. Bon codage ! ?

Credits: Image by storyset