web-dev-qa-db-fra.com

Utilisation des dernières fonctionnalités JavaScript de TypeScript, telles que ES2018

J'ai essayé de chercher dans la documentation de TypeScripts sur leur configuration et je n'arrive pas à trouver la réponse à ce qui devrait être une simple question.

Simplement, comment configurer le compilateur TypeScript pour qu'il sache quels ensembles de fonctionnalités JavaScript nous utilisons?

Ainsi, par exemple, ES2019 atterrit et je pense que `` Ohh, je veux m'en procurer un peu ''. Dans cette situation, que dois-je mettre à niveau pour permettre au compilateur de transpiler et de remplir ce dont il a besoin?

L'option lib dans tsconfig m'embrouille et les documents n'expliquent pas grand-chose sur les bibliothèques disponibles. Je ne trouve rien directement sur eux non plus.

Disons donc que ES2019 sort et j'ajoute l'option lib pour cela (en supposant qu'il y en aura une). Cela signifie-t-il que je peux maintenant utiliser les fonctionnalités ES2019? Si je souhaite tout prendre en charge depuis ES2019, dois-je ajouter les bibliothèques pour toutes les autres versions en dessous? Ou est-ce que l'ajout de la bibliothèque ES2019 fournit tout ce dont j'ai besoin?

D'où viennent ces bibliothèques? Font-ils partie de la bibliothèque de base TypeScript et donc pour obtenir plus, je dois mettre à niveau, ou puis-je simplement mettre à niveau un package séparé et tout cela fonctionnera?

Enfin, ces lib fournissent tout le nécessaire pour supporter pleinement cette version de la spécification. Ou s'agit-il d'un sous-ensemble de fonctionnalités?

Dans notre projet, nous utilisons actuellement TypeScript Version 2.5.3

Je me rends compte que c'est beaucoup de questions donc toute information sur quoi que ce soit, ou des liens vers de la documentation, serait grandement appréciée.

18
ste2425

L'histoire est un peu plus complexe, et nous devrions commencer par la séparer en deux: les fonctionnalités de langage et les fonctionnalités d'exécution.

Fonctionnalités du langage ES

Lorsque nous parlons de fonctionnalités de langage, nous entendons des modifications de la syntaxe de base du langage JavaScript. Par exemple ES 2015 ajoute la prise en charge des classes, des fonctions flèches (=>), et for-of itération

TypeScript essaie d'implémenter toutes les propositions de fonctionnalités de langage stables dès que possible et les compilera à la version ES spécifiée comme l'option target du compilateur. Cela signifie donc que si vous disposez du dernier compilateur TypeScript, qui ajoute la prise en charge d'un nouveau ES 2019 fonction de langue, vous pourrez la recompiler jusqu'à ES3. TypeScript émettra le code nécessaire pour que ces fonctionnalités fonctionnent dans la version d'ES que vous ciblez.

Et vous pouvez le voir en action maintenant. Si vous ciblez ES5, les fonctions fléchées sont compilées en functions ordinaires et utilisent un _this variable locale pour capturer this. Les classes sont compilées en fonction et les champs appropriés de l'ensemble prototype.

Fonctionnalités ES Runtime

En plus des fonctionnalités du langage, nous avons certaines fonctionnalités d'exécution qui décrivent les types d'objets intégrés disponibles, ainsi que les méthodes et les champs de ces objets d'exécution. Des exemples de nouveaux types d'objets dans les versions récentes de ES seraient Promise ou Proxy.

TypeScript ne fournit pas de remplissages multiples pour ces fonctionnalités, si le runtime ne les prend pas en charge, vous devrez fournir votre propre implémentation de remplissage multiple si vous souhaitez les utiliser.

TypeScript doit cependant savoir quels objets intégrés existent au moment de l'exécution et quelles sont leurs méthodes/champs, c'est là que l'option lib entre en jeu. Elle vous permet de spécifier à quoi ressemblera l'environnement d'exécution.

Vous pouvez donc par exemple cibler es5, mais spécifiez que le runtime aura tous les objets intégrés conformément à es2015 standard (certains peuvent être implémentés par le runtime lui-même, d'autres peuvent être ajoutés par vous via des remplissages multiples)

L'intersection des deux

La division ci-dessus est une simplification, dans la mesure où certaines fonctionnalités du langage reposent sur l'existence de certains objets et méthodes intégrés.

Par exemple, le async/await la fonction du langage repose sur l'existence de promesses. Donc, si vous utilisez async/await et cible es5 vous obtiendrez une erreur indiquant que le constructeur Promise n'existe pas. Si vous ciblez es5 mais vous spécifiez lib: [ 'es2015', 'dom' ] vous n'obtiendrez plus d'erreur car vous avez dit au compilateur que même si vous souhaitez compiler en es5, lors de l'exécution, le constructeur Promise existera selon le es2015 spécification d'exécution représentée dans cette bibliothèque particulière (pas le problème du compilateur sur la façon dont cela se produira, les remplissages multiples ou le comportement d'exécution intégré).

En général, si une telle dépendance existe, le compilateur TypeScript émettra une erreur indiquant que certains types sont manquants et vous pouvez mettre à niveau votre bibliothèque ou modifier votre cible (ce qui modifiera les bibliothèques par défaut utilisées), mais vous devrez vous assurer que le runtime a le soutien nécessaire.

Les exceptions

Il n'est pas toujours possible de compiler à la baisse les fonctionnalités du langage jusqu'à es3 (soit en raison de fonctionnalités d'exécution manquantes, soit simplement en raison du coût élevé de l'implémentation de la fonctionnalité ne fait pas d'elle une priorité pour l'équipe du compilateur). Un exemple serait les accesseurs de propriété (get/set) lors du ciblage es3, qui n'est pas pris en charge. Cependant, le compilateur doit vous avertir si vous utilisez une combinaison langue/cible de langue non prise en charge.