TypeScript

Plan

  • Introduction.

  • Typage statique.

  • Enregistrements.

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Introduction

Introduction

  • TypeScript est un langage de programmation ouvert et gratuit.

  • C’est un logiciel libre, fortement soutenu par Microsoft.

  • Créé par Anders Hejlsberg, le créateur de C#.

  • Basé sur les normes ECMAScript 4 et 6.

Qu’est-ce que TypeScript ?

  • C’est un surensemble de JavaScript

  • JavaScript avec quelques améliorations

  • Tout programme JavaScript est un programme TypeScript valable.

  • Pourquoi a-t-on besoin d’un «JavaScript++» ?

Pour répondre à cette question, il faut d’abord comprendre les limitations de JavaScript.

Quel est le problème ?

the good parts
  • Pourquoi les développeurs détestent JavaScript?

Quel est le problème ?

  • JavaScript a été pensé pour écrire des petits programmes.

  • Mais maintenant il est utilisé pour faire des programmes complexes.

  • JavaScript n’est pas adapté aux programmes de taille importante:

    • Plus le code devient complexe, plus il devient difficile à maintenir.

Et quelles sont les solutions apportées par TypeScript ?

  • Une meilleur lisibilité,

  • Une réutilisation de code plus simple,

    • grâce à l’introduction de concepts des langages à objets (classes et interfaces).

  • Une meilleure organisation du code source,

    • grâce aux modules et à l’exportation entre modules.

Plan

  • Introduction

  • Typage statique

  • Enregistrements.

  • Modules

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion

Qu’est-ce que le «Typage statique» ?

  • C’est le contraire du typage dynamique ! 😉

  • C’est une technique qui permet d’associer un type à une variable.

Par exemple:
Typage dynamique

i est une variable: var i;

Typage statique

i est une variable de type number: var i: number;


Lors que le typage est dynamique, le type de i n’est connu qu’à sa première affectation: i = 5;

Autres exemples

Typage dynamique

add() est une fonction:

function add(x, y) {
    return x + y;
}
Typage statique

add() est une fonction de type number et qui prend en paramètre deux arguments de type number:

function add(x : number, y : number) : number {
    return x + y;
}

Types de base

TypeMot-cléDescription

Number

number

Utilisé pour représenter les nombres entier et les fractions (à virgule flottante).

String

string

Séquence de caractères Unicode.

Boolean

Boolean

Valeurs logiques, vrai et faux.

Valeurs

TypeMot-cléValeurs

Number

number

1.5, 2, 3.14

String

string

"To be or not …".

Boolean

Boolean

true, false

Types spéciaux

TypeMot-cléDescription

Void

void

Utilisé comme type de retour d’un fonction qui ne retourne pas de valeur (une procédure).

Null

null

Représente l’absence intentionnelles de valeur d’un objet.

Undefined

undefined

Valeur des variables non initialisées.

Quelles sont les conséquences du typage statique ?

  • On écrit plus de code

  • Certaines erreurs sont détectées très tôt, pendant le codage.

  • Le code devient plus lisible.

Détection d’erreurs de typage

En JavaScript
// Adds two numbers
function add(x, y) {
    return x + y;
}

add("toto", 31) // evaluates to "toto31"
add(12,24) // evaluates to 36
// Multiplies two numbers
function mul(x, y) : number {
    return x * y;
}

mul("toto", 31) // evaluates to NaN (Not a Number)
En TypeScript
// Adds two numbers
function add(x : number, y : number) : number {
    return x + y;
}

add("toto", 31) // ERROR
add(12,24) // evaluates to 36
// Multiplies two numbers
function mul(x : number, y : number) : number {
    return x * y;
}

mul("toto", 31) // ERROR

Plan

  • Introduction

  • Typage statique.

  • Enregistrements

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Classes et Interfaces

  • TypeScript introduit explicitement deux concepts de la programmation à objets, les classes et les interfaces.

  • Ces concepts étaient déjà présents en JavaScript, bien que dissimulés.

  • Mais avant de parler des mystérieux concepts des langages à objets, nous allons nous intéresser aux enregistrements.

Enregistrements

  • En informatique, un enregistrement est une structure de données composée d’un ensemble de valeurs potentiellement de types différents.

enregistrement

Enregistrements et tableaux

  • Contrairement à un tableau, le nombre de champs (ou éléments) d’un enregistrement est fixe.

  • Et contrairement à un tableau, les champs d’un enregistrement sont dépendants les uns des autres.

tableaux

Avantages des enregistrements

  • Manipulation plus simple de données complexes: déclaration de variables, passage de paramètres, etc.

  • Les valeurs qui ont un sens ensemble, restent ensemble.

Enregistrements en TypeScript

  • On utilise le mot-clé type:

type Address = {
    street      : string
    buildNumber : number
    city        : string
}

type Point = {
    x : number
    y : number
}

Enregistrements: Variables et fonctions

let a : Address = { street: "50 Otages", buildNumber: 1, city: "Nantes" }

function formatAddress(anAddress : Address) : String {
    return anAddress.street + ", nb:" + anAddress.buildNumber +
        ". " + anAddress.city
}

Exemple

type Address = {
    street      : string
    buildNumber : number
    city        : string
}

let a : Address = { street: "50 Otages", buildNumber: 1, city: "Nantes" }

function formatAddress(anAddress : Address) : String {
    return anAddress.street + ", nb:" + anAddress.buildNumber +
    ". " + anAddress.city
}

document.body.innerHTML = formatAddress(a);

Plan

  • Introduction

  • Typage statique.

  • Enregistrements

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Modules

  • Le modules sont la réponse de TypeScript pour organiser un code trop long.

modules

Modules (cont.)

  • L’objectif est d’organiser le code dans différents modules et de l’importer au besoin.

  • En TypeScript, n’importe quel fichier source contenant les mots-clés import ou export.

Exemple d’exportation

Fichier address.ts
type Address = {
    street      : string
    buildNumber : number
    city        : string
}

export {Address}

Exemple d’importation

Fichier main.ts
import {Address} from "./address"

let myAddress : Address = {street : "Coulomiers",
                          buildNumber : 131, city : "Nantes"};

Plan

  • Introduction.

  • Typage statique.

  • Enregistrements.

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Tableaux

  • Les tableaux sont similaires à ceux de JavaScript

En JavaScript
var list = [ ];
var list = [1.12, 5.54, 6.14]
var list = new Array();
En TypeScript
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // Generic Array Type
let list: Array<number> = new Array();

Conditionnels

En Algoscript
si (age < 18)
    alors Ecrire(‘Vous êtes mineur(e)’);
    sinon Ecrire(‘Vous êtes majeur(e)’);
fin si
En Typescript
let age : number = 43;
if (age < 18) {
    Ecrire(Vous êtes mineur(e));
} else {
    Ecrire(Vous êtes majeur(e));
}
if (x < 0) {
    x = -x;
}

Boucle for

En JavaScript
for(i=1; i <= 10; i=i+1) {
    // instructions
}
En TypeScript
for(let i : number = 1; i <= 10; i=i+1) {
    // instructions
}

Boucle for..of

let list: number[] = [1, 2, 3, 4, 5];
let sum: number = 0;

for (let each of list) {
    sum = sum + each;
}

Boucle while

let num : number = 5;
let factorial : number = 1;
let i : number = num;

while(i >=1) {
   factorial = factorial * i;
   i--;
}

Plan

  • Introduction.

  • Typage statique.

  • Enregistrements.

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Environnement de développement

Cycle de développement en TypeScript:
  1. Édition de code;

  2. Traduction vers JavaScript;

  3. Exécution:

    • En ligne de commande;

    • À l’intérieur d’un fichier HTML;

    • Dans une console dédiée.

Édition de code

  • Environnement web.

  • Editeurs génériques: Emacs, VIM, ATOM, etc.

  • IDEs: Eclipse, IntelliJ IDEA, etc.

  • Visual Studio Code

Visual Studio Code

VSCode
  • Demo!

Traduction vers JavaScript

  • TypeScript Playground

  • Ligne de commande (avec NodeJS):

tsc main.ts

Exécution

node main.js

Commandes spéciales

  • Sortie de données.

Exécution en ligne de commande:
console.log("Mon message");
Exécution dans un browser:
document.body.innerHTML = "Mon message"

Plan

  • Introduction.

  • Typage statique.

  • Enregistrements.

  • Modules.

  • Structures de contrôle.

  • Environnement de développement.

  • Conclusion.

Résumé de TypeScript

  • Typage statique

  • Enregistrements (Classes et interfaces).

  • Modules

  • Compatible avec toutes les bibliothèques JavaScript.

  • Prise en main simple.

  • Environnement de développement très complet et de prise en main facile.

Inconvénients

  • Un nouveau langage à apprendre (même s’il est simple à appréhender et très proche de JavaScript).

  • Vous devez toujours apprendre JavaScript.

Comprendre la traduction TypeScript -> JavaScript vous apprendra à bien coder en JavaScript.

Conclusion

Les modules et les enregistrements améliorent:
  • Le passage à l’échelle.

  • La réutilisation.

Le typage statique améliore:
  • La détection d’erreurs

  • La lisibilité du code.