Aller au contenu principal

7.18.0 : Déstructuration des éléments privés et TypeScript 4.7

· 4 min de lecture
Babel Team
Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Nous venons de publier Babel 7.18.0 !

Cette version ajoute le support de la proposition private destructuring et de TypeScript 4.7.

Vous pouvez consulter le changelog complet sur GitHub.

Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript sans savoir comment contribuer, vous pouvez nous faire un don via notre Open Collective ou, mieux encore, collaborer directement avec nous à l'implémentation de nouvelles propositions ECMAScript ! En tant que projet géré par des bénévoles, nous dépendons du soutien communautaire pour financer nos efforts visant à accompagner la diversité des utilisateurs JavaScript. Contactez-nous à team@babeljs.io pour en discuter !

Principales fonctionnalités​

Déstructuration des éléments privés (#14304)​

Babel prend désormais en charge la transformation de la proposition private destructuring. Vous pouvez maintenant utiliser des champs ou méthodes privés dans des motifs de déstructuration :

InputOutput
JavaScript
class Foo {
  #x = 0;
  y = 0;

  equals(obj) {
    const { #x: x, y: y } = this;

    return (
      x === obj.#x && y === obj.y
    );
  }
}

JavaScript
class Foo {
  #x = 0;
  y = 0;

  equals(obj) {
    const x = this.#x,
      { y } = this;

    return (
      x === obj.#x && y === obj.y
    );
  }
}

Activez cette fonctionnalité en ajoutant le plugin @babel/plugin-proposal-destructuring-private à votre configuration.

Pour minimiser l'empreinte de transpilation, le code généré par ce plugin nécessitera toujours le support natif de la déstructuration non privée et des éléments privés. Si vous devez les compiler davantage, activez les plugins correspondants (ou utilisez @babel/preset-env).

Support de TypeScript 4.7 (#14359, #14457, #14476)​

TypeScript 4.7 introduit plusieurs nouvelles fonctionnalités syntaxiques :

  • Les expressions d'instanciation, qui permettent de spécifier des arguments de type pour des fonctions sans les invoquer :

    const identity = <T>(val: T) => val;

    const stringIdentity = identity<string>; // (val: string) => string;

  • Les annotations de variance explicites pour les arguments de type, guidant le vérificateur de types TypeScript lors du calcul de compatibilité entre différents types :

    type Provider<out T> = () => T;
    type Consumer<in T> = (x: T) => void;
    type Mapper<in T, out U> = (x: T) => U;
    type Processor<in out T> = (x: T) => T;

    Dans cet exemple, Provide<string> est un sous-type de Provider<string | number> tandis que Consumer<string | number> est un sous-type de Consumer<string>.

  • Les contraintes pour l'opérateur infer dans les types conditionnels :

    type GetColor<T> =
      T extends { color: infer C extends "red" | "pink" }
        ? C
        : "unknown color";

Lisez l'annonce complète de TypeScript 4.7 sur leur blog.

Intégration de l'helper regenerator-runtime (#14538)​

À partir de Babel 7.18.0, regenerator-runtime est automatiquement injecté de la même manière que Babel injecte les autres helpers d'exécution, sans dépendre d'une variable globale implicite regeneratorRuntime. Lorsque vous n'utilisez pas @babel/plugin-transform-runtime, Babel intégrera automatiquement le helper regeneratorRuntime en ligne :

  • vous pouvez arrêter de charger manuellement regenerator-runtime (via import, require ou <script>) ;

  • vous pouvez supprimer "regenerator-runtime" de vos dépendances dans package.json.

Par exemple, voici la différence de sortie entre les anciennes et nouvelles versions de Babel lors de la compilation de var f = function*() {}; :

+function _regeneratorRuntime() { /* ... */ }

-var f = /*#__PURE__*/regeneratorRuntime.mark(function f() {
+var f = /*#__PURE__*/_regeneratorRuntime().mark(function f() {
-  return regeneratorRuntime.wrap(function f$(_context) {
+  return _regeneratorRuntime().wrap(function f$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
         case "end":
           return _context.stop();
       }
     }
   }, f);
 });