7.12.0 rilasciato: TypeScript 4.1, stringhe come nomi di import/export e blocchi statici per classi

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 una nuova versione minore di Babel!

Questa release include supporto per le nuove funzionalità beta di TypeScript 4.1: tipi letterali template e rimappatura chiavi nei tipi mappati.

Inoltre, abbiamo implementato due nuove proposte ECMAScript: blocchi statici per classi e import/export con nomi stringa.

Infine, abbiamo rinominato @babel/plugin-syntax-module-attributes (e il corrispondente plugin parser moduleAttributes) in @babel/plugin-syntax-import-assertions (e importAssertions), per allinearci agli aggiornamenti recenti della proposta. Il vecchio plugin continuerà a funzionare fino a Babel 8, ma è ora deprecato.

Puoi consultare l'intero changelog su GitHub.

Se tu o la tua azienda volete supportare Babel e l'evoluzione di JavaScript, potete donare sul nostro Open Collective o, meglio ancora, collaborare direttamente all'implementazione di nuove proposte ECMAScript! Come progetto guidato da volontari, dipendiamo dal supporto della comunità per finanziare il nostro lavoro a beneficio degli utenti JavaScript. Contattateci a team@babeljs.io per discutere!

Novità principali

TypeScript 4.1 (#12129, #12131)

La beta di TypeScript 4.1 è stata annunciata alcune settimane fa e include nuove funzionalità sintattiche per i tipi.

I tipi letterali template consentono di concatenare stringhe a livello di tipi, utilizzando la sintassi dei template literal:

type Events = "Click" | "Focus";

type Handler = {
  [K in `on${Events}`]: Function
};

const handler: Handler = {
    onClick() {}, // Ok
    onFocus() {}, // Ok
    onHover() {}, // Error!
};

Insieme alla rimappatura chiavi nei tipi mappati, possono essere utilizzati per rappresentare trasformazioni complesse di oggetti:

type Getters<T> = {
    [K in keyof T as `get${Capitalize<K>}`]: () => T[K]
};

interface Dog { name: string; age: number; }

const lazyDog: Getters<Dog> = /* ... */;
lazyDog.getName(); // string
lazyDog.age; // error!

Puoi approfondire TypeScript 4.1 nell'annuncio di rilascio o consultare altri esempi delle capacità abilitate da queste nuove funzionalità. Tuttavia, ricorda che TypeScript 4.1 è ancora sperimentale!

Blocchi statici per classi (#12079, #12143)

Esempio su Babel REPL

JavaScript

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

Questa proposta di stage 2 consente di applicare inizializzazioni statiche aggiuntive durante la valutazione della definizione di classe. Non è pensata per sostituire i campi statici, ma per abilitare nuovi casi d'uso prima impossibili. Nell'esempio precedente, la proprietà statica y viene inizializzata utilizzando #x. Se doSomethingWith(this.#x) genera un errore, a y verrà assegnato il valore predefinito "unknown".

Ulteriori dettagli sono disponibili nella descrizione della proposta.

Grazie a Jùnliàng, potete testare questa proposta installando il plugin @babel/plugin-proposal-class-static-block e aggiungendolo alla vostra configurazione Babel. Considerando che probabilmente state già utilizzando altri plugin per funzionalità delle classi, assicuratevi di posizionare questo plugin prima degli altri:

babel.config.json

{
  "plugins": [
    "@babel/plugin-proposal-class-static-block",
    "@babel/plugin-proposal-class-properties"
  ]
}

Babel implementa una versione aggiornata della specifica, che incorpora i feedback forniti basandoci sull'attuale specifica.

Importazioni ed esportazioni con nomi stringa (#12091)

Durante l'ultimo meeting TC39 è stato raggiunto il consenso con una PR che consente stringhe come nomi per variabili importate ed esportate:

JavaScript

// emojis.js
let happy = "wooo!";
export { happy as "😃" };

// main.js
import { "😃" as smile } from "./emojis.js";
console.log(smile); // wooo!

Ciò permette di utilizzare qualsiasi nome UTF-16 valido tra i moduli, rendendo JavaScript pienamente compatibile con altri linguaggi come WebAssembly.

Potete abilitare il supporto per il parsing di questa funzionalità aggiungendo @babel/plugin-syntax-module-string-names alla vostra configurazione:

babel.config.json

{
  "presets:" ["@babel/preset-env"],
  "plugins": [
    "@babel/syntax-module-string-names"
  ]
}

Questa funzionalità verrà abilitata di default non appena la sintassi verrà integrata nella specifica principale di ECMAScript.

Si noti che non è possibile transpilare stringhe arbitrarie in importazioni/esportazioni di tipo ES2015: verranno transpilate solo quando si utilizza un sistema di moduli diverso come CommonJS.

Parsing delle asserzioni di importazione (#12139)

La proposta "module attributes" è stata significativamente modificata e rinominata in "import assertions".

Abbiamo implementato il supporto al parsing per questa nuova versione della proposta, abilitabile tramite il plugin @babel/plugin-syntax-import-assertions (o, se si utilizza direttamente @babel/parser, con importAssertions):

 {
   "plugins": [
-    ["@babel/syntax-module-attributes", { "version": "may-2020" }]
+    "@babel/syntax-import-assertions"
   ]
 }

Le modifiche sintattiche più rilevanti sono la sostituzione della keyword with con assert e l'utilizzo di parentesi graffe per racchiudere le asserzioni:

JavaScript

import json from "./foo.json" assert { type: "json" };

import("foo.json", { assert: { type: "json" } });

Maggiori dettagli su queste modifiche sono disponibili nel README della proposta.

@babel/plugin-syntax-module-attributes continuerà a funzionare fino al rilascio di Babel 8.0.0, ma non sarà più mantenuto. Si raccomanda pertanto di migrare al nuovo plugin.