Articles
Aug 27, 2024

Découvrez les Nouveautés de TypeScript 5.6

La version candidate de TypeScript 5.6 est arrivée avec de nouvelles fonctionnalités et améliorations. Explorons-les avec des exemples de code détaillés et commentés pour faciliter la compréhension.

Découvrez les Nouveautés de TypeScript 5.6

1. Vérifications Nullish et Truthy Désactivées

TypeScript 5.6 introduit des vérifications pour éviter les erreurs lorsque vous utilisez des expressions nullish (??) ou truthy (if conditions) qui sont toujours vraies.

Exemple :

/ Exemple de condition toujours vraie
if (/0x[0-9a-f]/) {
    // Cette condition est toujours vraie car la regex est toujours définie.
    // TypeScript génèrera une erreur ici pour vous alerter.
}

if (x => 0) {
    // Oups ! Ici, => crée une fonction flèche au lieu de vérifier si x >= 0.
    // TypeScript détecte cette erreur.
}

function isValid(value: string | number, options: any, strictness: "strict" | "loose") {
    if (strictness === "loose") {
        value = +value; // On convertit la valeur en nombre.
    }
    return value < options.max ?? 100;
    // TypeScript détecte ici que l'opérande droit de ?? est inutilisable
    // car l'opérande gauche n'est jamais nullish dans ce contexte.
}

2. Méthodes d'Assistance pour les Itérateurs

Les itérateurs peuvent désormais utiliser des méthodes comme map, filter, et take.

Exemple :

// Définir une fonction génératrice d'entiers positifs
function* positiveIntegers() {
    let i = 1;
    while (true) {
        yield i++;
        // Yield renvoie la valeur actuelle de i puis incrémente i
    }
}

// Créer un itérateur qui mappe les nombres positifs en nombres pairs
const evenNumbers = positiveIntegers().map(x => x * 2);

// Utiliser l'itérateur pour prendre les 5 premiers nombres pairs
for (const value of evenNumbers.take(5)) {
    console.log(value); // Affiche 2, 4, 6, 8, 10
    // La méthode take permet de limiter le nombre de valeurs itérées.
}

3. Vérifications Strictes des Itérateurs Intégrés

Le nouvel indicateur --strictBuiltinIteratorReturn introduit des vérifications plus rigoureuses pour les itérateurs intégrés, en s'assurant que les valeurs retournées sont correctement typées.

Exemple :

function* uppercase(iter: Iterator<string, BuiltinIteratorReturn>) {
    while (true) {
        const { value, done } = iter.next();
        if (done) {
            return;
        }
        yield value.toUpperCase(); // toUpperCase transforme les chaînes en majuscules
    }
}

// Ici, TypeScript vérifiera que `value` n'est pas `undefined` avant d'utiliser `toUpperCase`.

4. Support pour les Identifiants de Modules Arbitraires

Vous pouvez importer et exporter des modules avec des noms arbitraires.

Exemple :

const banana = "🍌";
export { banana as "🍌" }; // Exporter avec un nom d'identifiant arbitraire

import { "🍌" as banana } from "./foo"; // Importer en utilisant l'identifiant arbitraire
console.log(banana); // Affiche 🍌

5. Option --noUncheckedSideEffectImports

Cette option aide à détecter les imports d'effets secondaires non vérifiés, utile pour éviter les erreurs de frappe.

Exemple :

import "oops-this-module-does-not-exist";
// TypeScript générera une erreur ici car le module n'existe pas.


// Pour certains types d'import comme des fichiers CSS, vous pouvez définir des modules globaux.
Copy
// ./src/globals.d.ts

// Effectuer la reconnaissance des fichiers CSS en tant qu'importations de modules.
declare module "*.css" {}

6. Option --noCheck

Permet d'ignorer la vérification des types pour accélérer le processus de build.

Exemple :

# Générer des fichiers JS sans vérifier les types
tsc --noCheck
# Puis vérifier les types séparément
tsc --noEmit

7. Construction avec Erreurs Intermédiaires

Cette option permet à TypeScript de continuer la construction des projets même s'il y a des erreurs intermédiaires.

Exemple :

tsc --build --verbose

Utilisez --stopOnBuildErrors pour arrêter la construction à la première erreur.

8. Diagnostics Priorisés par Région dans les Éditeurs

Les diagnostics sont maintenant priorisés par la région visible, rendant la détection des erreurs plus rapide dans les gros fichiers.

Cette fonctionnalité optimise les performances de l'éditeur en rendant les diagnostics plus rapides et réactifs, surtout pour les grands fichiers.

9. Caractères de Validation Granulaires pour l’Auto-Complétion

L'auto-complétion est rendue plus intelligente en validant les suggestions avec des caractères spécifiques.

Exemple :

declare let food: { eat(): any };
let f = (foo/* Typing . will autocomplete food */)

10. Exclusion des Modèles pour les Auto-Importations

Vous pouvez exclure certaines suggestions d'auto-importation en utilisant des expressions régulières.

Exemple :

{
    "typescript.preferences.autoImportSpecifierExcludeRegexes": [
        "^lodash/.*$", // Exclure tous les importations profondes de lodash
        "^node:"      // Exclure tous les modules node
    ]
}

Conclusion

TypeScript 5.6 apporte quelques nouvelles fonctionnalités et améliorations, rendant ainsi le développement encore un peu plus agréable.

Essayez cette version et donnez-nous votre avis !