Retour d'expérience

Qui sommes-nous ?

Logo de Makina Corpus

SSLL
Développement métier - CMS - Frontend
Mobile - Cartographie

Typescript c'est quoi ?

Un typage statique au-dessus de JavaScript

You don't say ?!
  • Les fonctionalités des langages typés
  • Les nouveautés ECMAScript
  • Du pur JavaScript en sortie
  • Des outils très puissants
  • Open Source
Créé et maintenu par
Logo Microsoft

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

          

Démo

gif d'un casse tête impossible en bois'

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;
}

          

Démo - DTS

gif de poupée russes infini

La transcompilation

Intégration en avance des nouveautées ECMAScript

Une alternative à BabelJS ?


Non !


Pas le même objectif
(Un peu moins de fonctionnalités supportées de base)

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

Capture d'écran des sorties tsc avec erreurs

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 {
...
}

          
ou...

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

          

Ca fait moins peur aux vrais développeurs !

Scared cat

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

Pouvoir faire tout ça progressivement

Les outils

Editeurs intégrant Typescript

Editeurs compatibles avec plugins

Typings logo
Un CLI pour gérer ses types
  • 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

Démo - Typings

gif de Kermit la grenouille tappant frénétiquement sur une machine à écrire

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


Faux débat

Utiliser Babel si les toutes dernières fonctionnalités sont indispensables et que le typage ne vous semble pas nécessaire

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, …)

Des questions ?

Merci

Merci