`sourceMap` în TypeScript

tsconfig: fișierele generate (emit) TypeScript 1.0

Generează fișiere .js.map care leagă JavaScript-ul generat de rândurile din sursa .ts (pentru depanare și erori).

Sintaxă

"compilerOptions": { "sourceMap": true }

tsc --sourceMap

Ce face `sourceMap`

Codul care rulează este JavaScript-ul generat, nu sursa TypeScript. Fără ajutor, erorile și depanatorul arată rânduri din fișierul .js. Cu sourceMap, tsc scrie lângă fiecare .js o hartă .js.map și adaugă la final rândul //# sourceMappingURL=....

Browserele și editoarele (VS Code) folosesc hărțile automat. Node.js le folosește cu node --enable-source-maps: urmele erorilor (stack trace) arată atunci fișierul și rândul din sursa .ts. Implicit: false. tsc --init din 5.9 o pornește.

Parametri

Parametru	Descriere
`true`	Se generează `.js.map` pentru fiecare `.js`.
`false`	Valoarea implicită.

Exemple

Exemplul 1: O eroare, cu și fără hartă

Fără --enable-source-maps, Node.js arată rândul 3 din dist/index.js. Cu el, arată rândul 2 din src/index.ts, unde este de fapt throw. Harta este JSON: sources spune fișierul sursă, iar mappings codifică legătura dintre rânduri.

// tsconfig.json
{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2022",
    "sourceMap": true,
    "outDir": "dist"
  }
}

// src/index.ts
function imparte(a: number, b: number): number {
  if (b === 0) throw new Error("Împărțire la zero");
  return a / b;
}

console.log(imparte(10, 2));
console.log(imparte(1, 0));

Rezultat (tsc 5.9)

$ npx tsc && find dist -type f | sort
dist/index.js
dist/index.js.map

$ node dist/index.js 2>&1 | grep -m1 'at imparte'
    at imparte (file:///proiect/dist/index.js:3:15)

$ node --enable-source-maps dist/index.js 2>&1 | grep -m1 'at imparte'
    at imparte (/proiect/src/index.ts:2:22)

$ tail -1 dist/index.js
//# sourceMappingURL=index.js.map

$ cat dist/index.js.map
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS,OAAO,CAAC,CAAS,EAAE,CAAS;IACnC,IAAI,CAAC,KAAK,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAClD,OAAO,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAC5B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}

Greșeli frecvente

Să pornești sourceMap și inlineSourceMap împreună: tsc dă eroarea TS5053.
Să publici hărțile pe un site public fără să vrei. Ele dezvăluie structura surselor; cu inlineSources, chiar codul sursă.

Comenzi înrudite

inlineSourceMap: Pune harta sursă direct în fișierul .js (base64), nu într-un .js.map separat; inlineSources include și codul .ts.
sourceRoot: Schimbă locul unde depanatorul caută sursele .ts (sourceRoot) și hărțile .map (mapRoot), dacă nu sunt lângă fișierele .js.
declarationMap: Generează hărți .d.ts.map, ca „Go to Definition” din editor să ducă la sursa .ts, nu la fișierul .d.ts.
outDir: Directorul în care tsc scrie fișierele generate, cu aceeași structură de subdirectoare ca sursele.

Ce face sourceMap