(Dev) – TypeScript 4.5 est disponible

Chez TFTLabs, on développe des applications en TypeScript ! Si vous n’êtes pas encore familiarisé avec TypeScript, il s’agit d’un langage qui s’appuie sur JavaScript en ajoutant des types vérifiés statiquement. Lorsque vous utilisez des types statiques, vous pouvez exécuter le compilateur TypeScript pour rechercher les bogues tels que les fautes de frappe et les incohérences dans les formes de vos données, et obtenir des suggestions pratiques. Ces types ne changent pas votre programme, et vous pouvez les supprimer pour vous conserver un JavaScript propre et lisible. Au-delà de la détection de bogues dans votre code, TypeScript vous aide également à écrire du code, car les types peuvent alimenter des outils utiles tels que la saisie semi-automatique, la définition et le renommage dans votre éditeur.

💡 Les améliorations apportées au type Awaited et Promise

TypeScript 4.5 introduit un nouveau type d’utilitaire appelé type Awaited. Ce type est destiné à modéliser des opérations telles que les fonctions await et async, ou la méthode .then() sur les Promise (en particulier la manière dont elles déballent de manière récursive les Promise).

// A = string
type A = Awaited<Promise<string>>;
 
// B = number
type B = Awaited<Promise<Promise<number>>>;
 
// C = boolean | number
type C = Awaited<boolean | Promise<number>>;

Le type Awaited peut être utile pour modéliser les API existantes, y compris les composants JavaScript intégrés comme Promise.all, Promise.race, etc. En fait, certains des problèmes liés à l’inférence avec Promise.all ont motivé Awaited. Voici un exemple qui échoue dans TypeScript 4.4 ainsi que dans les versions antérieures :

declare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;
 
async function doSomething(): Promise<[number, number]> {
    const result = await Promise.all([
        MaybePromise(100),
        MaybePromise(200)
    ]);
 
    // Error!
    //
    //    [number | Promise<100>, number | Promise<200>]
    //
    // is not assignable to type
    //
    //    [number, number]
    return result;
}

Désormais, Promise.all combine certaines fonctionnalités avec Awaited pour donner de bien meilleurs résultats d’inférence, et l’exemple ci-dessus fonctionne.

📦 Prise en charge de lib à partir de node_modules

Pour garantir que la prise en charge de TypeScript et JavaScript fonctionne correctement, TypeScript regroupe une série de fichiers de déclaration (fichiers .d.ts). Ces fichiers de déclaration représentent les API disponibles dans le langage JavaScript et les API DOM de navigateur standard. Bien qu’il existe des valeurs par défaut raisonnables en fonction de votre cible, vous pouvez choisir les fichiers de déclaration que votre programme utilise en configurant le paramètre lib dans le fichier tsconfig.json.

Il y a cependant deux inconvénients occasionnels à inclure ces fichiers de déclaration avec TypeScript :

• Lorsque vous mettez à niveau TypeScript, vous êtes également obligé de gérer les modifications apportées aux fichiers de déclaration intégrés de TypeScript, ce qui peut être un défi lorsque les API DOM changent aussi fréquemment qu’elles le font.
• Il est difficile de personnaliser ces fichiers pour qu’ils correspondent à vos besoins avec les besoins des dépendances de votre projet (par exemple, si vos dépendances déclarent qu’elles utilisent les API DOM, vous pourriez également être obligé d’utiliser les API DOM).

TypeScript 4.5 introduit un moyen de remplacer une bibliothèque intégrée spécifique d’une manière similaire au fonctionnement du support de @types/. Au moment de décider quels fichiers lib TypeScript doit inclure, il recherchera d’abord un package @typescript/lib-* étendu dans node_modules. Par exemple, lors de l’inclusion de dom en tant qu’option dans lib, TypeScript utilisera les types dans node_modules/@typescript/lib-dom s’ils sont disponibles.

{
 "dependencies": {
    "@typescript/lib-dom": "npm:@types/web"
  }
}

Ensuite, à partir de la version 4.5, vous pouvez mettre à jour TypeScript et le fichier de verrouillage de votre gestionnaire de dépendances garantira qu’il utilise exactement la même version des types DOM. Cela signifie que vous pouvez mettre à jour vos types selon vos propres conditions.

Source: Microsoft