Tutoriel TypeScript : TypeScript

Le TypeScript est un langage de programmation open-source développé par Microsoft. Le langage se présente comme un sur-ensemble du JavaScript avec notamment l'apport d'un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, la création de namespaces et de modules.

Installation

Pour commencer à expérimenter avec le TypeScript vous pouvez utiliser le playground. Si vous souhaitez utiliser TypeScript pour vos projets vous pouvez installer le transpiler via npm :

npm i -g typescript

Cette installation vous donnera accès à la commande tsc qui vous permettra de transpiler votre code en JavaScript (ES3, ES5 ou ES2015).

tsc index.ts

Si vous souhaitez transpiler pour le web il vous faudra passer par webpack ou browserify avec l'utilisation de plugin ou de loaders.

Typage

Comme son nom l'indique le TypeScript va vous permettre de définir le type de vos variables, paramètres et retours de fonctions.

let a: number

function demo(selector: string, options: {ease: string, duration: number}): Element{
    return document.querySelector(selector)
}

Ce typage peut se fait aussi de manière implicite lorsque l'on assigne une valeur à une variable.

let a = 3
a = "Salut les gens" // Type 'string' is not assignable to type 'number'

Les Classes

Avec l'ES2015 le JavaScript supporte l'utilisation du mot clef class. Le TypeScript pousse les choses plus loin en permettant de gérer la visibilité des propriétés et la gestion des méthodes statiques.

class Demo {

    private factor

    constructor (factor: number) {
        this.factor = factor
    }

    public multiplie (n: number): number {
        return n * this.factor
    }

    static salut (): string {
        return 'Salut'
    }

}

Il est aussi possible de déclarer des accesseurs et mutateurs afin de mieux controler ce qui rentre et sort de votre objet.

class Color {

    private _color: string

    public constructor (color) {
        this._color = color 
    }

    set color (color) {
        this._color
    }

    get color () {
        if (this._color === 'rouge') {
            return 'vert'
        } else {
            return this._color
        }
    }

}

let c = new Color('rouge')
console.log(c.color) // vert

Les Namespaces

Les namespaces vous permettent d'organiser les variables dans un groupe donné afin d'éviter les problèmes d'écrasement des variables.

namespace Grafikart {
    export let var1 = 3
    let var2 = 4
    export class Demo { }
}
Grafikart.var1 // 3
Grafikart var2 // Erreur, cela n'existe pas en dehors du module
let d = new Grafikart.Demo() // Objet de type Grafikart.Demo

Les modules

Les modules se présentent comme des namespaces que l'on va pouvoir isoler dans un fichier séparé. Le principe est relativement similaire.

// demo.ts
export let var1 = 3
let var2 = 4
export class Demo { }

// index.ts
import { var1, Demo } from './demo'
var1 // 3

Je n'ai ici que survolé l'ensemble de possibilités du TypeScript, n'hésitez pas à parcourir la documentation pour obtenir plus d'informations.