Vai al contenuto principale

7.18.0 Rilasciato: Destrutturazione di elementi privati e TypeScript 4.7

· Lettura di 4 min
Babel Team
Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Abbiamo appena pubblicato Babel 7.18.0!

Questa release include supporto per la proposta di destrutturazione privata e per TypeScript 4.7.

Puoi consultare l'intero changelog su GitHub.

Se tu o la tua azienda volete supportare Babel e l'evoluzione di JavaScript, ma non sapete come, potete donare sul nostro Open Collective e, ancora meglio, collaborare direttamente con noi all'implementazione di nuove proposte ECMAScript! Essendo un progetto gestito da volontari, dipendiamo dal supporto della comunità per finanziare i nostri sforzi nel supportare la vasta gamma di utenti JavaScript. Contattaci a team@babeljs.io per discutere insieme!

Novità principali​

Destrutturazione privata (#14304)​

Babel supporta la trasformazione della proposta di destrutturazione privata. Ora è possibile utilizzare campi o metodi privati nei pattern di destrutturazione:

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

Puoi abilitarla aggiungendo il plugin @babel/plugin-proposal-destructuring-private alla tua configurazione.

Per minimizzare l'impronta della transpilazione, il codice generato da questo plugin continuerà a richiedere supporto per la destrutturazione non privata e gli elementi privati. Se è necessario compilarli ulteriormente, puoi abilitare i plugin rilevanti (oppure utilizzare @babel/preset-env).

Supporto per TypeScript 4.7 (#14359, #14457, #14476)​

TypeScript 4.7 introduce diverse nuove caratteristiche sintattiche:

  • espressioni di istanziazione, che consentono di specificare gli argomenti di tipo delle funzioni senza invocarle:

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

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

  • annotazioni di varianza esplicite per gli argomenti di tipo, per guidare il type checker di TypeScript nel calcolare la compatibilità tra tipi diversi:

    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 questo esempio, Provide<string> è un sottotipo di Provider<string | number> mentre Consumer<string | number> è un sottotipo di Consumer<string>.

  • vincoli per l'operatore infer nei tipi condizionali:

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

Puoi leggere l'annuncio completo di TypeScript 4.7 sul loro blog.

Helper regenerator-runtime inline (#14538)​

A partire da Babel 7.18.0, regenerator-runtime viene iniettato automaticamente nello stesso modo in cui Babel inietta gli altri helper di runtime, senza fare affidamento su un globale implicito regeneratorRuntime. Quando non si utilizza @babel/plugin-transform-runtime, Babel includerà automaticamente l'helper regeneratorRuntime direttamente nel codice:

  • non sarà più necessario caricare manualmente regenerator-runtime (con import, require o <script>);

  • puoi rimuovere "regenerator-runtime" dalle dipendenze nel tuo package.json.

Ad esempio, questa è la differenza di output tra le vecchie e le nuove versioni di Babel durante la compilazione di 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);
 });