Skip to main content

7.18.0 Released: Destructuring private elements and TypeScript 4.7

· 3 min read
Babel Team

We just published Babel 7.18.0!

This release includes support for the private destructuring proposal and for TypeScript 4.7.

You can read the whole changelog on GitHub.

If you or your company want to support Babel and the evolution of JavaScript, but aren't sure how, you can donate to us on our Open Collective and, better yet, work with us on the implementation of new ECMAScript proposals directly! As a volunteer-driven project, we rely on the community's support to fund our efforts in supporting the wide range of JavaScript users. Reach out at team@babeljs.io if you'd like to discuss more!

Highlights​

Private destructuring (#14304)​

Babel supports transforming the private destructuring proposal. Now you can use private fields or methods in destructuring patterns:

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
    );
  }
}

You can enable it by adding the @babel/plugin-proposal-destructuring-private plugin to your configuration.

To minimize the transpiling footprint, the code generated by this plugin will still expect non-private destructuring and private elements support. If you need to compile them further, you can enable the relevant plugins (or you can use @babel/preset-env).

TypeScript 4.7 support (#14359, #14457, #14476)​

TypeScript 4.7 supports different new syntactic features:

  • instantiation expressions, which allow specifying type arguments of functions without invoking them:

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

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

  • explicit variance annotations for type arguments, to guide the TypeScript type checker when computing compatibility between different 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;

    In this example, Provide<string> is a subtype of Provider<string | number> while Consumer<string | number> is a subtype of Consumer<string>.

  • constraints for the infer operator in conditional types:

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

You can read the full TypeScript 4.7 release announcement on their blog.

Inline regenerator-runtime helper (#14538)​

Starting from Babel 7.18.0, regenerator-runtime is automatically injected in the same way that Babel injects the other runtime helpers, without relying on an implicit regeneratorRuntime global. When not using @babel/plugin-transform-runtime, Babel will automatically inline the regeneratorRuntime helper:

  • you can stop manually loading regenerator-runtime (with import, require or <script>);
  • you can delete "regenerator-runtime" from your dependencies in package.json.

For example this is the output difference between old and new Babel versions when compiling 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);
 });