Qui sommes-nous ?

Typescript c'est quoi ?

Un typage statique au-dessus de JavaScript

• Les fonctionalités des langages typés
• Les nouveautés ECMAScript
• Du pur JavaScript en sortie
• Des outils très puissants
• Open Source

Les apports du typage

• Prédictabilité du code executé
• Vérification à la transcompilation
• Des informations précieuses sur le code
• Une auto-completion plus rapide et précise

Les Interfaces

interface Image {
  url: string;
  title: string;
  likes?: number;
}

class Picture implements Image {
  url: string;
  title: string;
  constructor(mySweetTitle: string) {...}
}
          

Le Casting

fetch(url, {method: 'GET'})
.then((response) => {
   let myPicture = response.json() as Picture;
   ...
});
          

Les Génériques

function getElementHash<T>(element: T): string {
  return element.title.getHash + element.url.getHash;
}

let myPicture = new Picture(name, url);
let myvideo = new Video(name, url);

let pictureHash = getElementHash(myPicture); // Type: Picture

let videoHash = getElementHash(myVideo); // Type: Video
          

Le typage sans Typescript

JSDOC

/**
 * Creates a Picture object
 * @constructor
 * @param {string} url Url of the image
 * @param {string} title Title of the image
 * @param {number} [likes=0] Number of likes given by the community
 */
function Picture(url, title, likes) {
  if (likes === undefined) {
    likes = 0;
  }
  this.url = url;
  this.title = title;
  this.likes = likes;
}

          

Les fichiers .d.ts

declare namespace MyNamespace {
  export interface Picture {
    /**
     * Url of the picture.
     */
    url: string;

    /**
     * Number of likes given by the community.
     *
     * Default value: '0'
     */
    likes?: number;
}

          

La transcompilation

Intégration en avance des nouveautées ECMAScript

Une alternative à BabelJS ?

Non !

La configuration via tsconfig.json

"compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "noImplicitAny": true,
  "removeComments": true,
  "preserveConstEnums": true,
  "outFile": "./build/tsc.js",
  "sourceMap": true
},
"exclude": [
  "node_modules",
  "build"
]
          

Les messages d'erreur

Retours personnels

Penser typé, c'est coder plus précis

Pouvoir faire des déclarations kilométriques

export class UserModel extends Models.Model implements IModels.IModel {
...
}
          

myWonderfullMethod(param1: string, param2: any): Array<number> {
...
}
          

Ca fait moins peur aux vrais développeurs !

Améliorer la maintenabilité et (parfois) la lisibilité du code

Pouvoir faire tout ça progressivement

Les outils

Editeurs intégrant Typescript

• Visual Studio(2013 - 2015)
• Visual StudioCode
• Webstorm

Editeurs compatibles avec plugins

• Atom
• Eclipse
• Emacs
• SublimeText
• Vim

• Une banque énorme de descripteurs de types
• Contribuable facilement
• Un CLI et un .json pour les gouverner tous
• S'adapte aux besoins du projet
• Apporte une auto-completion modulaire

Bilan et conclusions

Typescript c'est bien pour…

• S'initier au typage ;
• Amener une rigueur de code ;
• Profiter d'outils puissants ;
• Améliorer son JS progressivement ;
• Intéresser des développeurs venant de langages tels que JAVA, C# ou .Net.

Typescript vs BabelJS

Une communauté

• 10 000 stars sur github + 8 000 questions stackoverflow
• des gros projets : angular2, ionic2, aurelia, babylonjs, …
• plus si affinités… avec TypeScript 2.0 (non-nullable types, control flow based type analysis, async/await, …)