Optional Chaining : différences entre JS et TS

L’Optional Chaining, ou chaînage optionnel, est une fonctionnalité introduite dans ECMAScript 2020 (ES11) qui permet de simplifier l’accès aux propriétés imbriquées d’un objet sans avoir à vérifier manuellement si chaque niveau de la chaîne est défini. TypeScript, qui est un surensemble de JavaScript avec typage statique, inclut également cette fonctionnalité tout en apportant des garanties supplémentaires grâce à son système de typage. Bien que cette fonctionnalité soit présente dans les deux langages, il existe des différences importantes dans leur implémentation et utilisation. Cet article explore ces distinctions en abordant des concepts tels que l’inférence de type et les polyfills.

Qu’est-ce que l’Optional Chaining en JavaScript (ECMAScript 2020) ?

JavaScript est un langage dynamiquement typé, ce qui signifie que les types des variables sont déterminés à l’exécution plutôt qu’à la compilation. Avant l’introduction de l’Optional Chaining, accéder à des propriétés profondément imbriquées nécessitait souvent des vérifications fastidieuses pour éviter des erreurs de type TypeError.

const user = {
    profile: {
        address: {
            city: 'Paris'
        }
    }
};

// Sans Optional Chaining
const city = user && user.profile && user.profile.address && user.profile.address.city;

// Avec Optional Chaining
const city = user?.profile?.address?.city;

L’Optional Chaining permet de réduire la complexité en utilisant l’opérateur ?.. Si l'une des propriétés de la chaîne est null ou undefined, l'expression s'arrête et retourne undefined sans lever d'erreur. Cela simplifie grandement le code et améliore sa lisibilité.

Qu’est-ce que l’Optional Chaining en TypeScript ?

TypeScript est un langage qui étend JavaScript en ajoutant un système de typage statique. L’Optional Chaining en TypeScript fonctionne de manière similaire à celui de JavaScript, mais avec l’avantage supplémentaire d’être vérifié par le compilateur grâce au typage statique.

interface Address {
    city: string;
}

interface Profile {
    address?: Address;
}

interface User {
    profile?: Profile;
}

const user: User = {
    profile: {
        address: {
            city: 'Paris'
        }
    }
};

// Accès avec Optional Chaining
const city = user?.profile?.address?.city;

Principales différences entre JavaScript et TypeScript

Typage statique vs dynamique :

• JavaScript est un langage dynamiquement typé, ce qui signifie que les types de variables ne sont pas vérifiés avant l’exécution. L’Optional Chaining est donc purement dynamique, et les vérifications sont effectuées uniquement lors de l’exécution du code.
• TypeScript, en revanche, est statiquement typé. Cela signifie que les types des variables sont vérifiés à la compilation. Le compilateur TypeScript peut détecter des erreurs potentielles avant même que le code ne soit exécuté. Par exemple, si address est une propriété obligatoire dans l'interface Profile, le compilateur signalera une erreur si l'Optional Chaining est utilisé de manière incorrecte, empêchant ainsi certains bugs avant qu'ils ne se produisent.

Inférence de type :

• JavaScript n’a pas de système d’inférence de type avancé. L’inférence de type se réfère à la capacité du langage ou du compilateur à déduire automatiquement le type d’une expression basée sur son contexte. Par exemple, si vous affectez un nombre à une variable, l’inférence de type déduit que la variable est de type number. En JavaScript, l'Optional Chaining retourne simplement undefined si une propriété dans la chaîne est absente, sans aucune information supplémentaire sur le type de la valeur retournée.
• TypeScript utilise l’inférence de type pour déterminer automatiquement les types des valeurs retournées, ce qui aide à prévenir les erreurs. Par exemple, TypeScript sait que la valeur retournée par user?.profile?.address?.city peut être soit string, soit undefined, en fonction de la définition de l'interface. Cela permet au développeur de gérer correctement les cas où une propriété pourrait être indéfinie.

Compatibilité et support des outils :

• JavaScript: L’Optional Chaining est une fonctionnalité native des navigateurs modernes et des environnements compatibles avec ECMAScript 2020. Pour les environnements plus anciens qui ne supportent pas cette fonctionnalité, un polyfill peut être nécessaire. Un polyfill est un morceau de code qui émule une fonctionnalité moderne dans des environnements plus anciens qui ne la supportent pas nativement. Il permet d’utiliser des fonctionnalités récentes tout en assurant la compatibilité avec des versions de JavaScript plus anciennes.
• TypeScript: L’Optional Chaining est supporté nativement depuis TypeScript 3.7. De plus, les IDEs comme Visual Studio Code offrent des fonctionnalités avancées telles que l’autocomplétion et la vérification de types, qui sont renforcées par TypeScript. Ces outils exploitent pleinement le système de typage statique de TypeScript pour offrir une meilleure expérience de développement.

Conclusion

L’Optional Chaining est une fonctionnalité puissante qui simplifie l’accès aux propriétés profondément imbriquées. En JavaScript, il améliore la lisibilité et réduit la complexité du code, mais reste entièrement dynamique. En TypeScript, cette fonctionnalité est enrichie par un système de typage statique qui permet de détecter des erreurs potentielles dès la compilation, offrant une plus grande sécurité et une meilleure maintenabilité du code. Pour les développeurs travaillant avec des structures d’objets complexes, TypeScript offre des avantages significatifs grâce à son inférence de type et à la sécurité supplémentaire apportée par le typage statique.