Búsqueda de sitios web

javascript - Aclaración sobre la funcionalidad de las configuraciones target y lib de Typescript


Cuando tsconfig.json tiene lo siguiente

"target": "es5",
"lib": [ "es6", "dom", "es2017" ]

no parece convertir construcciones de es2017 a es5. Por ejemplo, lo siguiente fallará en IE11:

var foo = [1, 2, 3].includes(1);

¿Esto es intencionado o me está faltando una configuración en tsconfig.json?

Respuesta #1

Aclaración sobre la funcionalidad de las configuraciones target y lib de Typescript

La manera simplificada en que lo pienso es que target indica qué sintaxis tendrá el JavaScript de salida, y lib indica qué miembros de API puede usar tu código fuente de TypeScript. Hay más detalles en las respuestas a estas dos preguntas:

  • TypeScript: ¿Qué es target en tsconfig?
  • ¿Qué hace la opción "lib" de tsconfig?

...no parece convertir construcciones de es2017 a es5... ¿Es esto por diseño o me falta alguna configuración en tsconfig.json?

Tienes razón. Esto es intencionado. TypeScript se transpila a la sintaxis target; no incluye polyfills de los miembros de la API que faltan en el target. Aquí hay una cita de un miembro principal del equipo de TypeScript:

Creo que estás confundiendo la transpilación con el auto-polyfilling. TypeScript no incluye automáticamente polyfills como lo hace Babel, pero sí realiza un descenso sintáctico (por ejemplo, para funciones flecha). Si quieres usar los métodos de prototipo del runtime de ES6, simplemente incluiría un polyfill de ES6 adecuado y su archivo de definiciones correspondiente.

Si tu lib incluye miembros de la API (como Array.prototype.include) que no están presentes en el tiempo de ejecución target, entonces necesitas instalar polyfills que proporcionen esos miembros de la API.

Respuesta #2

Puedes ver la lista de compatibilidad del navegador para el método includes aquí.

En esto, no era compatible con IE.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/includes