Qu'est-ce qu'un fichier de carte TypeScript?

J'ai vu des .mapfichiers pour TypeScript. Ce que je veux savoir, c'est à quoi servent ces fichiers. Contiennent-ils des références à d'autres fichiers référencés dans le fichier .ts?

Les fichiers .map sont des fichiers de mappage source qui permettent aux outils de mapper entre le code JavaScript émis et les fichiers source TypeScript qui les ont créés. De nombreux débogueurs (par exemple Visual Studio ou les outils de développement de Chrome) peuvent consommer ces fichiers afin que vous puissiez déboguer le fichier TypeScript au lieu du fichier JavaScript.

Il s'agit du même format de carte source produit par certains minificateurs et d'autres langages compilés vers JS comme CoffeeScript .

Une carte source est essentiellement ce qu'elle dit, une carte d'une langue à une autre, de sorte que le débogueur peut exécuter le code JavaScript mais vous montrer la ligne qui l'a réellement généré.

À des fins de débogage pratiques:

La carte source vous permet de définir un point d'arrêt sur le fichier TypeScript , puis de déboguer le code. Cela peut être fait dans Chrome et Firefox. De manière quelque peu déroutante, le comportement du débogueur dans Chrome est que lorsque le point d'arrêt est atteint, le fichier '.js' est réellement affiché (arrêté au point d'arrêt).

À partir d'aujourd'hui, le débogueur Firefox affichera le fichier TypeScript réel lorsqu'il se cassera. Voir la référence ci-dessous:

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx )

(cela montre également comment Visual Studio peut être configuré pour créer la carte source)

Pour comprendre le fonctionnement d'une carte source, vous pouvez lire la section 'L'anatomie d'une carte source' ici:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Il existe deux types de .mapfichiers les plus courants dans Typescript. L'un est Source Map ( .js.map) et l'autre est Declaration Map ( .d.ts.map). Je vais vous expliquer les deux en détail un par un.

Cartes sources: .js.map

Les .js.mapfichiers de mappage source ( ) contiennent des définitions de mappage qui relient chaque élément de votre code Javascript généré à la ligne et à la colonne spécifiques du fichier Typescript correspondant. Les définitions de mappage dans ces fichiers sont au format JSON.

Lorsque les mappages sources sont activés, lors du débogage, Visual Studio Code et Chrome DevTools afficheront votre code Typescript au lieu du code Javascript complexe généré.

Pourquoi utiliser des cartes sources?

Dans les applications de production, par exemple, nous utilisons des outils de construction tels que Rollup pour supprimer le code mort, Prepack pour éliminer et remplacer le code par des calculs qui peuvent être évalués au moment de la compilation au lieu de l'exécution, puis minimiser le code avec Uglify. Et sans parler de la complexité du code Javascript déjà transpilé. Ainsi, le code résultant peut être très différent du code que vous avez réellement écrit. Par conséquent, il est recommandé d'utiliser des cartes sources, cela rend le débogage très facile car vous pouvez parcourir votre code source d'origine.

Les outils de surveillance des processus, de surveillance des erreurs, de journalisation et de traçage de pile tels que Sentry, Bugsnag, PM2, Winston utilisent également des cartes sources pour mapper des lignes et des colonnes dans les traces de pile d'exceptions Javascript vers Typescript.

Comment utiliser les cartes sources?

Vous pouvez activer les cartes source soit en utilisant l' --sourceMapoption lors de la compilation, soit en la spécifiant compilerOptionsdans le tsconfig.jsonfichier de votre projet, comme suit:

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "./out"
  }
}

Note de sécurité pour les cartes sources:

Si vous souhaitez obtenir une certaine sécurité en masquant le code de votre navigateur, vous souhaiterez peut-être exclure les cartes source du code du navigateur dans votre application de production.

Cartes de déclaration: .d.ts.map

Les .d.ts.mapfichiers de mappage de déclaration ( ), également appelés mappages de source de déclaration, contiennent des définitions de mappage qui relient chaque déclaration de type générée dans les .d.tsfichiers à votre fichier source d'origine ( .ts). La définition de mappage dans ces fichiers est au format JSON.

Ceci est utile pour la navigation dans le code. Vous pourrez utiliser les fonctionnalités de l'éditeur telles que "Accéder à la définition" et Renommer pour naviguer et modifier le code de manière transparente dans les sous-projets lorsque vous avez divisé un grand projet en plusieurs petits projets à l'aide de références de projet.

Pour activer les mappages de déclaration, spécifiez les deux options suivantes dans le tsconfig.jsonfichier de votre projet:

{
  "compilerOptions": {
    ...
    "declaration": true,
    "declarationMap": true
  }
}

C'est ça! J'espère que ça t'as aidé.