TypeScript en Bref

1/3)

Qu'est-ce que c'est que le TypeScript ?

TypeScript est un sur-ensemble de JavaScript qui ajoute un système de types au langage JavaScript. C'est à dire que tout programme écrit en JavaScript est un programme TypeScript valide.

Nous verrons que le système de types de TypeScript est très puissant. Associé à un bon IDE (vscode...), c'est assez bluffant ce que l'analyse statique arrive à faire, et surtout, en tant que développeur, on ne se sent pas du tout contraint par le langage.

Cela-dit, le système de types de TypeScript n'est pas sans failles. On peut sans difficulté écrire des programmes qui certes compilent bien, mais rencontrent des erreurs de typage lors de l'exécution. C'est un choix volontaire de la part des créateurs de TypeScript.

En effet, TypeScript cherche à préserver la souplesse de JavaScript - qui en fait tout son charme -  tout en permettant un très haut niveau de fiabilité. 

De façon générale, les types s'écrivent après le symbole concerné, avec un ":" suivi du type voulu.

Quelques exemples de déclarations typées :
let x: number;
let message: string;
let isHungry: boolean;

type binaryFn = (a: number, b: number) => number;
const add: binaryFn = (a, b) => a + b;

type FileDescription = {
  pathname: string
  sizeInBytes: number
}

const errLog: FileDescription = {
  pathname: '/var/log/apache2/error.log',
  sizeInBytes: 635,
};
Zoomez ou dé-zoomez l'exemple avec la commande ci-dessous :

Comme je le disais, l'utilisation des types en TypeScript est totalement "opt-in" :  on peut très bien ne pas typer notre code du tout et on écrit alors du JavaScript standard.

C'est bien pratique, cela permet notamment de migrer progressivement un projet vers TypeScript.

Il faut bien noter - et j'ai mis du temps à le comprendre - que  TypeScript n'ajoute pas de fonctionnalités à l'exécution. 

Le code généré par TypeScript est du JavaScript standard qui ne peut pas faire référence aux types définis dans la source en TypeScript, il n'est pas du tout ”conscient” qu'il a été écrit en TypeScript puis compilé.

Le type d'un objet restera toujours "object" :
type Giraffe = {
  height: number
}

const giraffe: Giraffe = {
  height: 4,
};

console.log(
  typeof giraffe,
);

// affiche: object
Zoomez ou dé-zoomez l'exemple avec la commande ci-dessous :

Le TypeScript est in fine du JavaScript, on peut le voir comme une sorte de linter sur-puissant.

2/3)

Pourquoi ajouter des types à JavaScript ?

Tout simplement pour détecter le plus tôt possible les erreurs  et éviter autant que possible de se tirer une balle dans le pied tout seul.

On gagne aussi énormément en productivité grâce à l'auto-complétion fournie par les IDE.

J'utilise pour ma part VSCode et je le recommande chaudement, intellisense fait vraiment des merveilles.

Franchement, quand on vient du JavaScript, c'est troublant de se rendre compte à quel point on se compliquait la vie avant TypeScript.

Le bénéfice de TypeScript devient vraiment évident sur des projets complexes.

Si ça compile, c'est que ça a de bonnes chances d'être correct.

Attention tout de même au faux sentiment de sécurité que peut parfois donner le système de types.

3/3)

Comment ça marche ?

Le code en TypeScript doit être compilé vers du JavaScript pur  pour être ensuite exécuté dans l'environnement cible comme n'importe quel code JavaScript.

On peut compiler son code vers du JavaScript avec tsc disponible dans le paquet npm typescript ou, assez pratique aussi, le faire interpréter par ts-node directement.

Exécuter un script en TypeScript avec ts-node :
# oui, je préfère yarn à npm
npm install -g yarn

mkdir hello-ts
cd hello-ts

yarn init

# utiliser yarn v2
yarn set version berry

# mettre à jour localement yarn vers la dernière v2
yarn set version latest

# j'évite pour le moment
# le Plug'n'Play qui cohabite mal
# avec pas mal d'outils
echo "nodeLinker: node-modules" >> .yarnrc.yml

yarn add typescript
yarn add ts-node

echo "console.log('hi from TS!');\n" > hello.ts

yarn ts-node hello.ts
Zoomez ou dé-zoomez l'exemple avec la commande ci-dessous :

L'environnement cible de la compilation du TypeScript peut être Node.js, un navigateur, etc.

On peut préciser vers quel standard de JavaScript  on veut compiler : ES5, ES6, ESNext...

Le choix dépend bien sûr de là où notre code va tourner et de si on maîtrise - ou ne serait-ce que connaît - l'environnement de destination.

Ce n'est malheureusement pas toujours le cas.

Pour le web, j'ai tendance à compiler vers ESNext (mais avec les modules en mode "CommonJS") et à polyfiller avec Babel.

© François-Marie de Jouvencel
fm.de.jouvencel@gmail.com