❓ La question du jour…
Il y a déjà JavaScript… alors pourquoi TypeScript ? 😅
Je vous montre ça tout de suite 😉
Slide 3
Slide 3 text
🏷 Les avantages du typage
• Trouver les erreurs à la compilation plutôt qu’à l'exécution
• Améliorer la lisibilité du code
• Moins de bugs (15% en moyenne)
• Améliorer les fonctionnalités des éditeurs de code :
■ Auto-complétion
■ Inspecter / Rechercher du code
■ Refactoring
Slide 4
Slide 4 text
🖖 Hello!
@spontoreau
Sylvain Pontoreau
🎪 Orga
📕 Auteur
Microsoft
Je travaille avec
Slide 5
Slide 5 text
🐦 @ParisTypeScript http://typescript.paris 🌐
Slide 6
Slide 6 text
📖 Le moment “auto promotion”
Slide 7
Slide 7 text
$ tsc
⚙Comment ça marche ?
ts
📜
js
📜
config
🛠
Transpilation
ℹ Transpiler : Convertir un code A en un code B ayant le même niveau d'abstraction
Slide 8
Slide 8 text
Démo
Comment démarrer un projet
Slide 9
Slide 9 text
$ tsc --init
🧬 Compatible avec JavaScript ?
ts
📜
js
📜
Une ligne de JavaScript = Une ligne de TypeScript
config
🛠 Renommer
⚠ Cette solution est un peu radicale si le code JavaScript contient beaucoup d’erreurs de typage
Slide 10
Slide 10 text
🥤 Transition soft !
• // @ts-check
Vérifier du code JavaScript avec TypeScript
function sum(numbers) {
return numbers
.reduce(function(previous, next) {
return previous + next;
});
}
var result = sum([true, 2, "3"]);
console.log(result); // 33 ...
// @ts-check
/**
* @param {number[]} numbers
*/
function sum(numbers) {
return numbers
.reduce(function(previous, next) {
return previous + next;
});
}
var result = sum([true, 2, "3"]);
console.log(result); // 33 ...
• checkJs: true (tsconfig.json)
Slide 11
Slide 11 text
🏗 Architecture du compilateur
Editors
tsserver
server.ts
Language Service
service.ts
TS standalone compiler
tsc.ts
Core TypeScript Compiler
core.ts, emitter.ts, checker.ts, parser.ts, …
Slide 12
Slide 12 text
📥 Installation
• Node.js & NPM sont requis !
TypeScript est disponible via un package NPM
$ npm install typescript -D
$ npm exec tsc -- --version
$ npm install -g typescript
$ tsc --version
■ Globalement
• Deux possibilités pour l’installation :
■ Localement (recommandé)
Slide 13
Slide 13 text
🛠 Configuration
tsconfig.json
• Un fichier qui contient les options de compilation
$ npm exec tsc -- --init
• Exemple :
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
]
}
• Initialisé par la commande suivante :
Slide 14
Slide 14 text
🏷 Fichier de définition
• Package NPM et TypeScript :
Décrit le typage des fichiers JavaScript
■ Écrit en TS -> 👌
■ Écrit en JS et fichier de définition inclut -> 👌
■ Écrit en JS sans fichier de définition inclut -> ✋
● Le fichier de définition doit être installé via npm (@types)
• DefinitelyTyped (https://github.com/DefinitelyTyped)
• lib.d.ts
Slide 15
Slide 15 text
Démo
Installer des fichiers de définition
Slide 16
Slide 16 text
⌨ Style de programmation
TypeScript est un langage multi-paradigme
• Impératif (type de base & fonction)
• Orienté objet (classe, interface, abstraction, générique, décorateur, …)
• Fonctionnel (type avancé & fonction)
• Mix
Slide 17
Slide 17 text
🦕 Type primitif
boolean, number, string, array, null, undefined, object
let str: string;
let array: number[] = [1, 2, 3];
function fn(param: boolean): void {
// Do something
}
Slide 18
Slide 18 text
👽 Type spéciaux et alias
• any
• unknown
type Name = string;
const name: Name = 'Sylvain Pontoreau';
type Person = {
name: Name;
age: number;
};
const sylvain: Person = {
name: 'Sylvain Pontoreau',
age: 40,
};
• alias
Slide 19
Slide 19 text
Démo
Programmation impérative
Slide 20
Slide 20 text
🗺 Programmation orienté objet
Slide 21
Slide 21 text
Démo
Programmation orienté objet
Slide 22
Slide 22 text
⚠ Typage et POO
class Car {
name: string;
brand: string;
engine: Engine = new Engine();
run(): void {
engine.start();
};
}
class Person {
name: string;
}
function sayHelloToAPerson(person: Person) {
console.log(`Hello ${ person.name }`);
}
const car = new Car();
car.name = '308';
car.brand = 'Peugeot';
const person = new Person();
person.name = 'Sylvain Pontoreau';
sayHelloToAPerson(person);
sayHelloToAPerson(car); // Ça marche... 😅
TypeScript n’est pas un langage avec un typage nominal
Slide 23
Slide 23 text
📚 Les différents système de type
Type === contrainte statique
• Systéme de typage :
■ Dynamique
■ Nominal
■ Structurel
• TypeScript -> Structurel
Slide 24
Slide 24 text
✋ Autres points d’attention sur les types
• Attention au type spécial any
• Les types sont uniquements viable à la compilation
• Le compilateur peut inférer les types
• Typage structurel !== Typage nominale
Slide 25
Slide 25 text
🤿 En profondeur dans le système de type
Discriminated
Union
Intersection
Union Type Guards
Mapped Conditional Infer Immutability