INTRODUCTION ECMAScript 6

ECMAScript 6 ou ECMAScript 2015 ou tout simplement ES6 ajoute une tonne de

fonctionnalités à JavaScript, comme les classes, les constantes, les arrow functions, les
générateurs…

Framework Angular a été conçu pour bénéficier de cette nouvelle version de JavaScript.

ES6 a atteint son état final en 2015. Il est donc supporté par les navigateurs modernes, mais
il y a encore des navigateurs qui la supportent seulement partiellement. Et bien sûr, avec une
spécification maintenant annuelle (ES2016, ES2017, etc.)

Un transpileur prend du code source ES6 en entrée et génère du code ES5, qui peut tourner
dans n’importe quel navigateur.
Déclaration
avec let
Déclaration
avec let
Déclaration
avec const
Déclaration
avec const
Simplification
 Affectations en version ES5
déstructurées

en version ES6

Or
 Affectations
déstructurées
Valable aussi avec des objets imbriques :

{ pony, position }
Ceci assigne la position retournée par la méthode à la
variable position, et le poney a la variable pony.

Et si tu n’as pas usage de la position, tu peux écrire :

Et la même chose est possible avec des tableaux :

Et tu auras seulement une variable pony.

 Paramètres optionnels et valeurs par défaut

Si on passes moins d’arguments que déclarés par la fonction, les paramètres manquants auront la valeur undefined.

Les paramètres optionnels ont la plupart du temps une valeur par défaut. L’operateur OR (||) va retourner
l’opérande de droite si celui de gauche n’est pas fourni.

Avec cette astuce, la fonction getPonies peut ainsi être invoquée :

 Paramètres optionnels et valeurs par défaut

ES6 offre désormais une façon plus formelle de déclarer des paramètres optionnels, des la déclaration de la fonction :

La valeur par défaut peut être un appel d’une fonction, voir l’exemple suivant :

ou même d’autres variables, d’autres variables globales, ou

d’autres paramètres de la même fonction :
 Paramètres optionnels et valeurs par défaut

ES6 offre désormais une façon plus formelle de déclarer des paramètres optionnels, des la déclaration de la fonction :

La valeur par défaut peut être un appel d’une fonction, voir l’exemple suivant :

ou même d’autres variables, d’autres variables globales, ou

d’autres paramètres de la même fonction :
 Opérateur Rest

ES6 propose une syntaxe bien meilleure, grâce au rest operator … ("opérateur de reste").

Le rest operator peut aussi fonctionner avec

des affectations déstructurées :
 Classes

Une des fonctionnalités les plus emblématiques, et qui va largement être utilisée dans l’écriture d’applications
Angular : ES6 introduit les classes en JavaScript !

Exemple :

Les déclarations de classes, contrairement aux déclarations de fonctions, ne sont pas hoisted ("remontées"), donc
tu dois déclarer une classe avant de l’utiliser.
 Classes

Une classe peut avoir des accesseurs (getters,

setters), si tu veux implémenter du code sur
ces opérations :
 Classes

Et bien évidemment, si tu as des classes,

l’héritage est possible en ES6.

Le mot-clé super permet d’invoquer la méthode

de la classe de base, avec
super(speed) par exemple.
 Set et Map

Avec la version ES6, nous avons une classe Map :

Avec la version ES6, nous avons une classe Set :

On peux aussi itérer sur une collection, avec la nouvelle

syntaxe for … of :
 Modules

Il a toujours manqué en JavaScript une façon standard de ranger ses fonctions dans un espace de
nommage, et de charger dynamiquement du code. Node.js a été un leader sur le sujet,

ES6 introduit une façon simple pour le faire :

le nouveau mot-clé export fait son travail et exporte les
Dans races.service.js:
deux fonctions. Maintenant, supposons qu’un composant
de notre application veuille appeler ces deux fonctions.
Dans un autre fichier :

Et si on veux importer toutes les fonctions du module,

 Introduction à TypeScript

• TypeScript a été construit par Micososft depuis 2012

• TypeScript représente un sur-ensemble de JavaScript (ES5,
ES6),
• TypeScript offre le typage et les annotations
• Compilé vers ES5 reconnu par la majorité des navigateurs
• Utilisé par les frameworks: Angular, React, IONCIC, ….

npm install -g typescript TypeScript

annotations
ES6
Classes
modules

ES5
 Les types de TypeScript

• Par convention les fichiers TypeScript ont l’extension .ts et seront compilés en
JavaScript standard.
• La syntaxe pour ajouter des informations de type en TypeScript est basique:
let variable : type;
• Les différents types sont simples à retenir :
const poneyNumber : number = 0;
const poneyName: string = ‘Rainbow Dash’;
 Les types de TypeScript

Boolean #
let isDone: boolean = false;

Number #
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String #
let color: string = "blue";
color = 'red';
 Les types de TypeScript

let fullName: string = `Bob Bobbington`;

let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

let sentence: string = "Hello, my name is " + fullName + ".\n\n" +

"I'll be " + (age + 1) + " years old next month.";

Array #
let list: number[] = [1, 2, 3]:

let list: Array<number> = [1, 2, 3];

 Les types de TypeScript

Tuple #
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
Enum #
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
Or,
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // Displays 'Green' as its value is 2 above
 Les types de TypeScript

Any #
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

let notSure: any = 4;

notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn’t check)

Un tableau peut mixer différents types:

let list: any[] = [1, true, "free"];

list[1] = 100;
 Return types

Tu peux aussi spécifier le type de retour d’une fonction :

function startRace(race: Race): Race {

race.status = RaceStatus.Started;
return race;
}

Si la fonction ne retourne rien, tu peux le declarer avec void :

function startRace(race: Race): void {

race.status = RaceStatus.Started;
}
 Interfaces

Si la fonction ne retourne rien, tu peux le declarer avec void :

interface HasScore {
score: number;
}

function addPointsToScore(player: HasScore, points: number): void {

player.score += points;
}

interface PonyModel {
name: string;
speed: number;
}
const pony: PonyModel = { name: 'Light Shoe', speed: 56 };
 Les types de TypeScript

Void #
void is a little like the opposite of any

function warnUser(): void {

console.log("This is my warning message");
}
Declaring variables of type void is not useful because you can only assign null (only if
--strictNullChecks is not specified, see next section) or undefined to them:

let unusable: void = undefined;

unusable = null; // OK if `--strictNullChecks` is not given

Null and Undefined #

In TypeScript, both undefined and null actually have their own types named undefined
and null respectively. Much like void, they’re not extremely useful on their own:

// Not much else we can assign to these variables!

let u: undefined = undefined;
let n: null = null;
By default null and undefined are subtypes of all other types. That means you can
assign null and undefined to something like number.
 Les types de TypeScript

Object #
object is a type that represents the non-primitive
type, i.e. anything that is not number, string, boolean,
bigint, symbol, null, or undefined.

declare function create(o: object | null): void;

create({ prop: 0 }); // OK

create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
TYPES DE BASES ARRAY
Notation avec les crochets ou le mot clef Array
let tableauNombres : number[];
let tableauNombres : Array<number>;

Initialisation
let tableauNombres : number[] = [];
let tableauNombres : number[] = [76, 56];

Longueur d’un tableau

tableauNombres.length
Accès aux éléments
tableauNombres[2]
tableauNombres[1] = 65
TYPES DE BASES ARRAY
Quelques fonctions de bases
○ push : ajout d’un élément à la fin
tableauNombres.push( 45 )
○ pop : retrait du dernier élément
tableauNombres.pop()
○ splice(deb, nbSuppr, …) : supprime et insère
let T=[0,1,2]; T.splice(1, 1, 6) // T vaut [0,6,2]
○ slice( [deb, [fin]] ) : renvoie une copie du tableau
○ indexOf : renvoi l'index de l’élément cherché ou -1
TYPES DE BASES MAP
● Tableau associatif
● Associe des instances d’un type T1 à des instances
d’un type T2 (avec T1 qui peut être égal à T2)
● Utilisation de la notion de générique...
● Exemple :
let colors = new Map<string, string>()
colors.set("red", "FF0000")
let red = colors.get("red")
interface LabeledValue {
label: string;
}

function printLabel(labeledObj: LabeledValue) {

console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};

printLabel(myObj);&é
interface SquareConfig {
color?: string;
width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {

let newSquare = {color: "white", area: 100};
if (config.color) { newSquare.color = config.color; }
if (config.width) { newSquare.area = config.width * config.width; }
return newSquare;
}

let mySquare = createSquare({color: "black"});

interface SquareConfig { color?: string; width?: number; }

function createSquare(config: SquareConfig): { color: string; area: number } {

let newSquare = {color: "white", area: 100};
if (config.clor) {
// Error: Property 'clor' does not exist on type 'SquareConfig’
newSquare.color = config.clor;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}

let mySquare = createSquare({color: "black"});

 Classes #
classes #
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}

let greeter = new Greeter("world");

 Classes #
Heritage # const dog = new Dog();
class Animal { dog.bark();
dog.move(10);
move(distanceInMeters: number = 0) {
dog.bark();
console.log(`Animal moved ${distanceInMeters}m.`);
}
}

class Dog extends Animal {

bark() {
console.log('Woof! Woof!');
}
}
 Classes #
class Animal {
name: string; class Horse extends Animal {
constructor(name: string) { super(name); }
constructor(theName: string) { this.name = theName; } move(distanceInMeters = 45) {
move(distanceInMeters: number = 0) { console.log("Galloping...");
console.log(`${this.name} moved super.move(distanceInMeters);
${distanceInMeters}m.`); }
}
}}
class Snake extends Animal { let sam = new Snake("Sammy the Python");
constructor(name: string) { super(name); } let tom: Animal = new Horse("Tommy the Palomino");

move(distanceInMeters = 5) { sam.move();
console.log("Slithering..."); tom.move(34);
super.move(distanceInMeters);
}
}
 Classes #
class Animal { let animal = new Animal("Goat");
private name: string; let rhino = new Rhino();
let employee = new Employee("Bob");
constructor(theName: string) { this.name = theName; }
} animal = rhino;
animal = employee; // Error: 'Animal' and 'Employee' are
not compatible
class Rhino extends Animal {
constructor() { super("Rhino"); }
}

class Employee {
private name: string;
constructor(theName: string) { this.name = theName; }
}
 Classes #
class Person { public getElevatorPitch() {
protected name: string; return `Hello, my name is ${this.name} and I work
in ${this.department}.`;
constructor(name: string) { this.name = name; } }
} }

let howard = new Employee("Howard", "Sales");

class Employee extends Person { console.log(howard.getElevatorPitch());
private department: string; console.log(howard.name); // error

constructor(name: string, department: string) {

super(name);
this.department = department;
}
 Classes #
const fullNameMaxLength = 10;
this._fullName = newName;
}
class Employee { }
private _fullName: string;
let employee = new Employee();
employee.fullName = "Bob Smith";
get fullName(): string { if (employee.fullName) {
return this._fullName; console.log(employee.fullName);
}
}

set fullName(newName: string) {

if (newName && newName.length > fullNameMaxLength) {
throw new Error("fullName has a max length of " +
fullNameMaxLength);
}