TYPESCRIPT

Présentation du typescript

Typescript est un language de programmation Open source développé par Microsoft.

C'est un sur-ensemble de javascript, comprendre qu'il ne fait que rajouté des fonctionnalité par dessus javascript. Il permet en effet de disposer de fonctionnalité de EcmaScript 6 et 7 non disponible à l'heure actuel. Si on suit cette logique on pourrait voir typescript comme un language "temporaire" car une fois toutes les fonctionnalité implémentées il devrait à terme disparaitre.

Typescript, intègre ES6 (EcmaScript 2015) qui apporte pas mal de sucre syntaxique à ES5.

Il est possible de tester typescript sur le playground.

Pour  utiliser TypeScript pour vos projets vous pouvez installer le transpiler via npm :

npm i -g typescript

Ce qui nous donnera accès à la commande tsc permettant de transpiler notre code en JavaScript (ES3, ES5 ou ES6). Mais pour les projets, il est encore mieux de regarder du coté de webpack.

Editeur

L'éditeur "recommandé est Visual Studio Code. Cet éditeur de code basé sur Atom existe sur Windows, linux et mac
Il intègre un gestionnaire de paquets et de dépôts et peut communiquer avec Git et des outils de diff.

TS palie aux limites de Javascript ES5 / ES6

Le type

Javascript n'est pas fortement typé. L'instruction type of existe en javascript, ce qui nous laisserait penser que le language est typé mais il est en fait dynamiquement typé : c'est à dire  que c'est seulement lors de l'exécution du code qu'il va déterminer le type d'une variable à partir de la valeur d'initialisation de cette variable (ce qui peut provoquer des erreurs).

Le typage permet d'éviter d'attendre la compilation pour connaitre les erreur. TS va nous permettre de définir le type de nos variables, paramètres et retour de fonctions

[++doc++]

// Boolean
let isDone: boolean = false;
 
// Number
let decimal: number = 6;
 
// String
let phrase:string = `Mon nom est ${ nomDeFamille }`;
 
// Array (2 manières de l'écrire)
let list: number[] = [1,2,3];
let list: Array<number> = [1,2,3];
 
// Enum
/*
Les enum permettent de donner un identifiant plus facile à retenir à une liste de valeurs numérique.
par défaut les enum commence à 0 mais il possible de redéfinir la valeur du 1er élément ou même de redéfinir tous les valeurs manuellement. 
*/
enum Color {Red = 1, green, Blue}
let c:Color = Color.green
let colorName: string = Color[2]; // Green

//Any
// lorsqu'on ne connait pas  la valeur de la variable créer car elle peut être crée dynamiquement par un utilisateur ou appli tierce.  
let notSure: any = 1;
let ListNotSure: any = [1, true, "boom"];
 
// Void
// est un peu l'opposé de Any : abscence de type. Souvent uilisé pour les functions qui ne retourne rien.
function warnUser(): void{
	alert('Okay');
}
// attention déclarer une variable avec le type void ne lui permettra d'avoir que comme valeur null ou undefined
var unitilisable: void = null;
 
//

Le typage peut aussi se faire de manière implicite lorsqu'on assigne une valuer à une variable.

let isDone = true;
 
// si on tente
isDone = "false"; 
// on a cette erreur
// Type '"false"' is not assignable to type 'boolean'.
// let isDone: boolean

La portée

Avec le mot clé var, la portée d'une variable est défini par la function dans laquelle elle a été définit ( elle à donc une porté définit par rapport à la fonction ou globale). Avec ES6 elle est maintenant définit par le mot clé Let ou const qui définit la portée par rapport aux accolades.

Fonctions

// function nommé
function add(x:number, y:number):number {
    return x + y;
}
// ou anonyme
let myAdd = function(x:number, y:number):number {
    return x + y;
}
function fullname( firstName: string, lastName?:string, ...restOfName: string[]):any {
    return firstName + ' ' + lastName;
}
let employeeName = fullname("Stephen", "Mia", "Madi", "Harvest");

Les classes

Avec ES6 est arrivé le mot clef class. On définit le constructeur par le mot réservé constructor et on ajoute this pour référencer un attribut dans la classe.

TS permet de gérer la visibilité des propriétés et la gestion des méthodes statiques dans les class

Les attributs du constructeur étant public par défaut , on a besoin seulement du mot clé private pour déclarer un membre comme privé.

Le mot clé static peut s'appliquer aux membre d'une classe afin de partager les valeurs assignées entre toutes les classes héritées.

[++doc++]

class User {
 
	private power:number;
 
	constructor( stamania: number, speed: number) {
		this.power = stamania * speed;
	}
 
	function kameamea( n: number):number {
		return n * this.power;
	}
 
	static hello(): string {
		return 'Kombawa';	
	}
	
}

On peut aussi déclarer des acesseurs et mutateur afin de controller les modifications faites sur notre objet.

class Movie {
 
	private _tite: string;
 
	constructor( title: string) {
		this._title = title;	
	}
 
	set title(title) {
		this._title = title;
	}
 
	get title() {
		return this._title;
	}
 
}
let flipper = new Movie('tarzan');
console.log(flipper.title) // tarzan

L'héritage se fait avec le mot clé extends, le constructeur peut appelé le constructeur de la classe hérité avec la méthode super();

class farari extends car {
	// 
	super();
}

MIXIN : En remplaçant le mot clé extends par implements , on remplace l'héritage par la composition : on implémente ainsi une ou plusieurs classes et elles sont traitées comme des interfaces. Les méthodes des classes hérités ne sont pas implémentées, elles doivent être redéfinie dans la lasse qui les intègre. [++doc++]

Les interfaces

Les classes peuvent être associées à des interfaces, on disposera à la fois de l'héritage et de la composition. [++doc++]

class gear extends car { 
	power: number;
}
interface car {
	seat: number;
	color: string;
}
 
var batMobile : car = {
	power: 800,
	seat: 2,
	color: 'black'
}

Les namespaces

Les namespaces permettent d'organiser les variables dans un groupe donné afin d'éviter les problèmes d'écrasement de variables [++doc++]

namespace User {
	export let user1 = 'Tony';
	let info = 'lorem';
}
 
User.user1 // Tony
 
User info // n'existe pas en dehors du module

Les modules

Les modules sont sont un ensemble de fonctions, variables et classes : un moyen d'organiser notre code en fin de compte. Les modules permettent d'isoler du code dans un fichier séparer qui pourra être ensuite utilisé (import) dans un autre fichier. Le mot clé export permettant de rendre une fonction utilisable hors du module).

En ce qui concerne l'import les formats CommonJs et AMD sont reconnus [++doc++]

// user.ts
export class User {} 
 
// index.ts
import { User } from './user';