Vai al contenuto principale

@babel/preset-typescript

Traduzione Beta Non Ufficiale

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

Questo preset è consigliato se utilizzi TypeScript, un superset tipizzato di JavaScript. Include i seguenti plugin:

Dovrai specificare --extensions ".ts" per le CLI @babel/cli e @babel/node per gestire i file .ts.

Esempio​

In

const x: number = 0;

Out

JavaScript
const x = 0;

Installazione​

npm install --save-dev @babel/preset-typescript

Utilizzo​

Con un file di configurazione (Consigliato)​

babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

Tramite CLI​

Shell
babel --presets @babel/preset-typescript script.ts

Tramite Node API​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-typescript"],
  filename: 'script.ts',
});

Opzioni​

isTSX​

boolean, predefinito false

Abilita forzatamente il parsing jsx. Altrimenti le parentesi angolari saranno interpretate come l'asserzione di tipo legacy di TypeScript var foo = <string>bar;. Inoltre, isTSX: true richiede allExtensions: true.

jsxPragma​

string, predefinito React

Sostituisce la funzione utilizzata durante la compilazione delle espressioni JSX. Questo ci permette di sapere che l'import non è di tipo e non dovrebbe essere rimosso.

jsxPragmaFrag​

string, predefinito React.Fragment

Sostituisce la funzione utilizzata durante la compilazione delle espressioni JSX per i frammenti. Questo ci permette di sapere che l'import non è di tipo e non dovrebbe essere rimosso.

allExtensions​

boolean, predefinito false

Indica che ogni file deve essere analizzato come TS, TSX o come TS senza ambiguità JSX (a seconda delle opzioni isTSX e disallowAmbiguousJSXLike).

allowNamespaces​

boolean, utilizza il valore predefinito impostato da @babel/plugin-transform-typescript.

Aggiunto in: v7.6.0

Abilita la compilazione dei namespace TypeScript.

allowDeclareFields​

boolean, predefinito false

Aggiunto in: v7.7.0

NOTA: Questa opzione sarà abilitata per impostazione predefinita in Babel 8

Quando abilitata, i campi classe di solo tipo vengono rimossi solo se prefissati dal modificatore declare:

class A {
  declare foo: string; // Removed
  bar: string; // Initialized to undefined
  prop?: string; // Initialized to undefined
  prop1!: string // Initialized to undefined
}

disallowAmbiguousJSXLike​

boolean, predefinito true per file .mts e .cts, false altrimenti.

Aggiunto in: v7.16.0

Anche quando il parsing JSX non è abilitato, questa opzione vieta l'utilizzo di sintassi ambigua con JSX (asserzioni di tipo <X> y e argomenti di tipo <X>() => {}). Corrisponde al comportamento di tsc durante l'analisi di file .mts e .mjs.

ignoreExtensions​

boolean, predefinito false

Aggiunto in: v7.21.4

Quando impostato a false, Babel fornirà automaticamente i plugin necessari per file *.ts, *.tsx, *.mts e *.cts.

Quando impostato a true, Babel fornirà un plugin TS generico. Per compilare il sorgente come se fosse *.tsx, abilita il preset @babel/preset-react e questo plugin funzionerà perfettamente con la trasformazione JSX. Ad esempio:

babel.config.json
{
  "presets": ["@babel/preset-react"],
  "overrides": [{
    "test": "*.vue",
    "presets": [
      ["@babel/preset-typescript"], { "ignoreExtensions": true }
    ]
  }]
}

onlyRemoveTypeImports​

boolean, predefinito false

Aggiunto in: v7.9.0

Quando impostato a true, la trasformazione rimuoverà solo gli type-only imports (introdotti in TypeScript 3.8). Dovrebbe essere utilizzato solo se stai usando TypeScript >= 3.8.

optimizeConstEnums​

boolean, predefinito false

Aggiunto in: v7.15.0

Quando impostato a true, Babel inserirà i valori enum inline invece di utilizzare l'output enum standard:

// Input
const enum Animals {
  Fish
}
console.log(Animals.Fish);

// Default output
var Animals;

(function (Animals) {
  Animals[Animals["Fish"] = 0] = "Fish";
})(Animals || (Animals = {}));

console.log(Animals.Fish);

// `optimizeConstEnums` output
console.log(0);

Questa opzione differisce dal comportamento --isolatedModules di TypeScript, che ignora il modificatore const e li compila come normali enum, allineando invece il comportamento di Babel a quello predefinito di TypeScript.

Tuttavia, quando si esporta un const enum Babel lo compilerà come un semplice object literal per non dover dipendere dall'analisi incrociata tra file durante la compilazione:

// Input
export const enum Animals {
  Fish,
}

// `optimizeConstEnums` output
export var Animals = {
  Fish: 0,
};

Puoi leggere ulteriori informazioni sulla configurazione delle opzioni dei preset qui.

rewriteImportExtensions​

boolean, predefinito false

Aggiunto in: v7.23.0

Quando impostato a true, Babel riscriverà le estensioni .ts/.mts/.cts nelle dichiarazioni di import in .js/.mjs/.cjs. Questa opzione rispecchia l'opzione di TypeScript rewriteRelativeImportExtensions.

Questa opzione, combinata con l'opzione allowImportingTsExtension di TypeScript, consente di scrivere specificatori relativi completi nelle dichiarazioni di import mantenendo la stessa estensione dei file sorgente.

Ad esempio, data questa struttura del progetto (dove src contiene i file sorgente e dist i file compilati):

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

e con i seguenti file di configurazione:

babel.config.jsontsconfig.json
{
  "presets": [
    ["@babel/preset-typescript", {
      "rewriteImportExtensions": true
    }]
  ]
}
{
  "compilerOptions": {
    "lib": ["esnext"],
    "noEmit": true,
    "isolatedModules": true,
    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true
  }
}

potrai scrivere import x from "./dep.ts" in main.ts, e Babel lo trasformerà in import x from "./dep.js" durante la compilazione di main.ts in main.js.