À quoi sert la cible dans tsconfig.json?

93

Que signifie targetin tsconfig.json?

{
  "compilerOptions": 
  {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "classic",
    "lib": [ "es2015", "dom",  "es2017" ]
  }
}
typescript tsconfig transpiler Ankit Raonka
la source

Réponses:

107

Je suis assez nouveau dans Typescript. Que signifie Target dans tsconfig.json?

targetsignifie quelle cible de JavaScript doit être émise à partir du TypeScript donné . Exemples:

target:es5

()=>nulldeviendra function(){return null}comme ES5 n'a pas de fonctions fléchées.

target:es6

()=>nulldeviendra ()=>nullcomme ES6 a des fonctions fléchées.

basarat
la source
5
ai-je toujours besoin de babel si je cible es5 également mon code dactylographié contient async et attend, est-ce que cela se compilera si je donne la cible comme es5?
Ankit Raonka
4
Je n'ai pas besoin de Babel pour ça 🌹
basarat
J'utilisais es5mais il interprète la déstructuration [...arr].mapcomme arr.slice().map, ce qui casse pour les objets de type tableau qui n'ont pas slice. Lorsque je cible es6, cela commence à fonctionner dans mon navigateur, mais cela fonctionnera-t-il pour tout le monde?
Qwerty
@Qwerty Non, ce ne sera pas le cas. Par exemple, cela ne fonctionnera pas dans Internet Explorer 11, car cela ne prend pas en charge es6 et n'a pas la fonction .map. Même si vous ciblez es5, il ne fonctionnera TOUJOURS pas dans Internet Explorer, car ce n'est pas le travail du transpileur d'ajouter des polyfills. Vous devrez toujours ajouter un polyfill si vous souhaitez prendre en charge les navigateurs non-es6.
pabrams
@pabrams donc IE11 ne prend même pas en charge la totalité de ES5?
Qwerty
10

Target modifie la version JavaScript dans laquelle vous compilez.

Les options sont disponibles sur https://www.typescriptlang.org/docs/handbook/compiler-options.html

Dans l'esprit d'essayer de mieux comprendre comment l'indicateur cible modifie mon code, j'ai compilé du code de test pour chacune des différentes versions afin d'avoir une meilleure compréhension des différences.

https://github.com/aizatto/typescript-playground/tree/master/dist/test-async-main

Je garde également des notes sur ce que je devrais cibler en fonction de l'environnement que je regarde

https://www.aizatto.com/notes/typescript

aizatto
la source