Saltar al contenido principal

@babel/preset-typescript

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Este preset se recomienda si utilizas TypeScript, un superconjunto tipado de JavaScript. Incluye los siguientes plugins:

Deberás especificar --extensions ".ts" para que las CLI de @babel/cli y @babel/node manejen archivos .ts.

Ejemplo​

Entrada

const x: number = 0;

Salida

JavaScript
const x = 0;

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

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

Mediante la CLI​

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

Mediante la API de Node​

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

Opciones​

isTSX​

boolean, valor predeterminado: false

Habilita forzosamente el análisis de jsx. De lo contrario, los corchetes angulares se tratarán como la aserción de tipo heredada de TypeScript var foo = <string>bar;. Además, isTSX: true requiere allExtensions: true.

jsxPragma​

string, valor predeterminado: React

Reemplaza la función utilizada al compilar expresiones JSX. Esto permite identificar que la importación no es de tipo y no debe eliminarse.

jsxPragmaFrag​

string, valor predeterminado: React.Fragment

Reemplaza la función utilizada al compilar expresiones de fragmentos JSX. Esto permite identificar que la importación no es de tipo y no debe eliminarse.

allExtensions​

boolean, valor predeterminado: false

Indica que cada archivo debe analizarse como TS, TSX o como TS sin ambigüedades de JSX (según las opciones isTSX y disallowAmbiguousJSXLike).

allowNamespaces​

boolean, utiliza el valor predeterminado establecido por @babel/plugin-transform-typescript.

Añadido en: v7.6.0

Habilita la compilación de espacios de nombres (namespaces) de TypeScript.

allowDeclareFields​

boolean, valor predeterminado: false

Añadido en: v7.7.0

NOTA: Esto estará habilitado por defecto en Babel 8

Cuando está habilitado, los campos de clase exclusivamente de tipo solo se eliminan si están prefijados con el modificador declare:

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

disallowAmbiguousJSXLike​

boolean, valor predeterminado: true para archivos .mts y .cts, y false en caso contrario.

Añadido en: v7.16.0

Incluso cuando el análisis de JSX no está activado, esta opción prohíbe el uso de sintaxis que sería ambigua con JSX (afirmaciones de tipo <X> y y argumentos de tipo <X>() => {}). Coincide con el comportamiento de tsc al analizar archivos .mts y .mjs.

ignoreExtensions​

boolean, valor predeterminado: false

Añadido en: v7.21.4

Cuando se establece en false, Babel proporcionará automáticamente los plugins necesarios para archivos *.ts, *.tsx, *.mts y *.cts.

Cuando se establece en true, Babel proporcionará un plugin general de TS. Si deseas transpilar código como si fuera *.tsx, habilita el preset @babel/preset-react y este plugin funcionará con la transformación JSX sin problemas. Por ejemplo:

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

onlyRemoveTypeImports​

boolean, valor predeterminado: false

Añadido en: v7.9.0

Cuando se establece en true, la transformación solo eliminará importaciones solo de tipo (introducidas en TypeScript 3.8). Solo debe usarse si utilizas TypeScript >= 3.8.

optimizeConstEnums​

boolean, valor predeterminado: false

Añadido en: v7.15.0

Cuando se establece en true, Babel insertará en línea los valores de la enumeración en lugar de usar la salida enum habitual:

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

Esta opción difiere del comportamiento de --isolatedModules de TypeScript, que ignora el modificador const y los compila como enumeraciones normales, alineando el comportamiento de Babel con el funcionamiento predeterminado de TypeScript.

Sin embargo, al exportar un const enum, Babel lo compilará como un objeto literal simple para evitar depender de análisis entre archivos:

// Input
export const enum Animals {
  Fish,
}

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

Puedes leer más sobre cómo configurar opciones de presets aquí.

rewriteImportExtensions​

boolean, valor predeterminado: false

Añadido en: v7.23.0

Cuando se establece en true, Babel reescribirá las extensiones .ts/.mts/.cts en declaraciones de importación a .js/.mjs/.cjs. Esta opción refleja la opción rewriteRelativeImportExtensions de TypeScript.

Esta opción, al usarse junto con la opción allowImportingTsExtension de TypeScript, permite escribir especificadores relativos completos en declaraciones de importación usando la misma extensión que los archivos fuente.

Por ejemplo, dada esta estructura de proyecto (donde src contiene los archivos fuente y dist los archivos compilados):

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

y con los siguientes archivos de configuración:

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

podrás escribir import x from "./dep.ts" en main.ts, y Babel lo transformará a import x from "./dep.js" al compilar main.ts a main.js.