CHAPITRE 3 : ECMASCRIPT : ES6, ES7, ES8 ET TYPESCRIPT

Video du chapitre : chaine GeniusClassrooms

Angular s'écrit en TypeScript, qui repose sur JavaScript moderne. Ce chapitre rassemble les notions que vous allez croiser dès la première ligne de code Angular. Sans elles, le code paraît illisible ; avec elles, tout devient clair.

1. ECMAScript, JavaScript : quelle différence ?

ECMAScript est la norme, JavaScript en est la mise en œuvre. La version ES6 (2015) a tout changé ; les suivantes (ES7, ES8…) ont ajouté des commodités.

2. let et const remplacent var

var ancien = "a eviter";

let compteur = 0;        // valeur qui changera
compteur = 1;            // autorise

const NOM = "PandaCodeur"; // valeur fixe
// NOM = "autre";         // erreur

Règle simple : utilisez const par défaut ; passez à let seulement si la valeur doit changer. N'utilisez plus var.

3. Les fonctions fléchées

// avant
function doubler(n) {
  return n * 2;
}

// avec une fonction flechee
const doubler = (n) => n * 2;

// tres pratique sur les tableaux
const nombres = [1, 2, 3, 4];
const doubles = nombres.map(n => n * 2);   // [2, 4, 6, 8]

Au-delà de la concision, la fonction fléchée conserve le this du contexte englobant, ce qui évite une source d'erreurs classique dans les composants Angular.

4. Les classes

Angular repose entièrement sur les classes : chaque composant en est une.

class Etudiant {
  constructor(nom, matricule) {
    this.nom = nom;
    this.matricule = matricule;
  }

  sePresenter() {
    return `Je suis ${this.nom} (${this.matricule})`;
  }
}

const awa = new Etudiant("Awa", "19A123");
console.log(awa.sePresenter());

5. Les gabarits de chaîne

const nom = "Brice";
const age = 20;

// avant
const phrase1 = "Je suis " + nom + " et j'ai " + age + " ans.";

// avec les backticks
const phrase2 = `Je suis ${nom} et j'ai ${age} ans.`;

Le caractère utilisé est l'accent grave (`), pas l'apostrophe.

6. Les modules : import et export

// fichier calcul.ts
export function additionner(a, b) {
  return a + b;
}

// fichier app.ts
import { additionner } from './calcul';
console.log(additionner(2, 3));

Chaque fichier Angular commence par des import : vous les verrez partout.

7. Les promesses et async / await

async function chargerDonnees() {
  try {
    const reponse = await fetch('https://api.exemple.com/etudiants');
    const donnees = await reponse.json();
    return donnees;
  } catch (erreur) {
    console.error("Echec du chargement :", erreur);
  }
}

8. TypeScript : le typage en plus

TypeScript, c'est JavaScript auquel on ajoute les types. L'éditeur signale alors les erreurs avant l'exécution.

let nom: string = "Awa";
let age: number = 20;
let actif: boolean = true;
let notes: number[] = [12, 15, 18];

function moyenne(notes: number[]): number {
  const total = notes.reduce((a, b) => a + b, 0);
  return total / notes.length;
}

// moyenne("bonjour");  // erreur signalee immediatement

On peut aussi décrire la forme d'un objet avec une interface :

interface Etudiant {
  nom: string;
  matricule: string;
  moyenne?: number;   // le ? signifie : facultatif
}

const awa: Etudiant = { nom: "Awa", matricule: "19A123" };

À retenir

• const par défaut, let si la valeur change, jamais var
• La fonction fléchée est concise et conserve this
• Un composant Angular est une classe
• import / export organisent le code en modules
• TypeScript = JavaScript + types, pour détecter les erreurs plus tôt