Introduction à TypeScript
Jean Martineau-Figuette
Simplon, Labège
12 janvier 2017
## Sommaire
* à propos de moi
* Qui suis-je ? Que fais-je ?
* Mon rapport au métier de développeur
* TypeScript
* les apports de typescript
* how to
* travaux pratiques
Note:
Ceci est un sommaire :)
## Qui suis-je ? Que fais-je ?
Développeur Java depuis 2004, mais aussi
* chef de projet
* enseignant
* développeur web et mobile pour des projets persos
artware (SSII), MiPih (éditeur), année sabbatique, Celad (SSII)
expliquer le fonctionnement des SSII (missions / régie)
Angular: framework Google, dev d'applis web / mobiles
## mon rapport au métier de développeur
* mon métier par choix
* de l'importance de se tenir à jour
* dépasser le syndrome de l'imposteur
Note:
- ++ au quotidien : le défi intellectuel quotidien
- l'esprit de groupe
- approfondissement des méthodos de développement
- veille techno
- projets persos pour explorer ce qu'on n'aborde pas professionnellement
- meetups pour se tenir au courant et développer un réseau
##TypeScript : qu'est-ce ?
* surensemble de javascript
* fortement typé
* le langage de prédilection pour faire de l'Angular
* utilisable en front-end comme en back-end
Note:
surensemble : du code purement JS fonctionne en TypeScript
##Comment ça marche ?
vérification de type à la compilation. Exemple:
```
function sayHello(person: String) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = sayHello(user);
```
```
sayHello.ts(7,26): Supplied parameters do not match any signature of call target
```
bénéfice : erreurs détectées à l'écriture du code, pas à l'exécution
##Qu'apporte TypeScript ?
##les types primitifs
```
let isDone: boolean = false;
let decimal: number = 6;
const hex: number = 0xf00d;
let binary: number = 0b1010;
let name: string = "Niobé";
const list: Array<number> = [1, 2, 42];
```
Notes : Bannissez ~~var~~ !!
Préférez __const__, ou __let__ quand c'est nécessaire.
##les enums
une liste finie de valeurs possibles :
```
enum EtatCommande {
EN_ATTENTE_FACTURATION,
EN_PREPARATION,
PREPAREE,
REMISE_AU_TRANSPORTEUR,
DISPONIBLE_EN_RELAIS_COLIS,
RECUPEREE_PAR_LE_CLIENT
}
let etatCommandeCourante = EN_PREPARATION;
```
##et aussi ...
```
// any
let list: any[] = [1, true, "free"];
// le typage de retour de fonction
function warnUser(): void { // returns nothing
alert("This is my warning message");
}
function getGreatest(number a, number b): number { // returns a number
return a > b ? a : b;
}
```
Note: any correspond à une variable javascript, qui peut avoir n'importe quel type (et pouvant varier au cours de son cycle de vie)
##les classes
(en fait, proposé par ES6)
Structure un ensemble cohérent de données. Exemple :
* Client (nom, prénom, âge ...)
* Sujet stackoverflow (question, réponses)
* Elément de catalogue de produits (désignation, référence, dimensions, prix unitaire ...)
Note: en POO, tout est objet
## un peu de vocabulaire
```
class Personne { // classe
nom: String; // attribut
prenom: String;
// constructeur avec paramètres ; permet d'instancier la classe
constructor(public prenom:String, public nom:String) {
this.prenom = prenom;
this.nom = nom;
}
getFullName() : String {
// accès à un attribut à l'intérieur de la classe en utilisant this.
// sinon le compilateur cherche une variable locale ou globale
return this.prenom + " " + this.nom;
}
}
const navigateur = new Personne("Titouan", "Lamazou"); // instance
```
Note:
classe : sorte de contrat ; tous les objets de cette classe disposeront des mêmes attributs et méthodes
```
import {Question} from './question';
import {Answer} from './answer';
export class Topic {
question: Question;
answers: Answer[];
constructor() {
this.answers = [];
}
setBest(bestAnswer: Answer) {
this.answers.forEach(this.markAsBest, bestAnswer);
}
private markAsBest(anyAnswer: any) {
anyAnswer.isBest = anyAnswer === this;
}
getBestAnswer(): Answer {
const bestAnswers = this.answers.filter(answer => answer.isBest);
return bestAnswers.length > 0 ? bestAnswers[0] : null;
}
}
```
Note:
Notez bien l'utilisation du mot-clé this pour les attributs de classe
##How to
* installer nodeJS
* installer typescript
```
npm install -g typescript
```
* compiler
```
tsc monFichier.ts
```
##Quel IDE ?
* Sublime / Atom / VS Code / WebStorm (payant) ... proposent des plugins pour javascript / typescript (auto-comlétion, voire auto-import)
* ma configuration :
* VSCde
* plugin TypeScript Hero
* chrome
Note:
IDE = Integrated Development Environment
## Exemple d'assistance proposée par les IDE
Note: identification d'erreurs à la compilation
## Assistant à la saisie
Note:
content assist
## TP : préparation
* cloner le projet starter
* git clone https://github.com/euZebe/typescript-webpack-starter
* npm install
* vous positionner sur la branche nombreMystere_begin
* git checkout nombreMystere_begin
Note:
* présenter rapidement le projet.
* Rappeler la notion d'objet et expliquer Game / GameComponent
## TP : implémentation
* index.ts: point d'entrée
* séparation modèle (game.ts) / composant (game-component.ts)
* webpack + .ts (+ .css) => dist/bundle.js, importé dans index.html
## liens utiles
* cette présentation : https://euzebe.github.io/talks/
* exemple de projet TypeScript + HTML : https://github.com/euZebe/typescript-webpack-starter
* Site officiel de TypeScript : https://www.typescriptlang.org/docs/tutorial.html
* Le bac à sable : https://www.typescriptlang.org/play/index.html