Apa itu file Peta TypeScript?

Saya telah melihat .mapfile untuk TypeScript. Yang ingin saya ketahui adalah untuk apa file-file ini. Apakah mereka berisi referensi ke file lain yang dirujuk dalam file .ts?

File .map adalah file peta sumber yang memungkinkan alat memetakan antara kode JavaScript yang dipancarkan dan file sumber TypeScript yang membuatnya. Banyak debugger (mis. Visual Studio atau alat dev Chrome) dapat menggunakan file ini sehingga Anda dapat men-debug file TypeScript sebagai ganti file JavaScript.

Ini adalah format peta sumber yang sama yang diproduksi oleh beberapa minifier dan bahasa compiled-to-JS lainnya seperti CoffeeScript .

Peta sumber pada dasarnya adalah apa yang dikatakannya, peta dari satu bahasa ke bahasa lain, sehingga debugger dapat menjalankan kode JavaScript tetapi menunjukkan kepada Anda baris yang benar-benar membuatnya.

Untuk tujuan debugging praktis:

Apa yang memungkinkan Anda lakukan peta sumber adalah menyetel breakpoint pada file TypeScript dan kemudian men-debug kodenya. Ini dapat dilakukan di Chrome dan Firefox. Agak membingungkan, perilaku debugger di Chrome adalah saat breakpoint tercapai, file '.js' benar-benar ditampilkan (berhenti di breakpoint).

Mulai hari ini, debugger Firefox akan menampilkan file TypeScript yang sebenarnya ketika rusak. Lihat referensi di bawah ini:

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

(ini juga menunjukkan bagaimana Visual Studio dapat dikonfigurasi untuk membuat peta sumber)

Untuk memahami cara kerja peta sumber, Anda dapat membaca bagian 'Anatomi peta sumber' di sini:

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

Ada dua jenis .mapfile yang paling umum di Ketik. Salah satunya adalah Source Map ( .js.map) dan yang lainnya adalah Declaration Map ( .d.ts.map). Saya akan menjelaskan keduanya secara detail satu per satu.

Peta Sumber: .js.map

.js.mapFile source map ( ) berisi definisi pemetaan yang menautkan setiap bagian kode Javascript yang Anda buat kembali ke baris dan kolom tertentu dari file Typecript yang sesuai. Definisi pemetaan di file ini dalam format JSON.

Saat peta sumber diaktifkan, saat debugging, Visual Studio Code dan Chrome DevTools akan menampilkan kode Ketikan Anda alih-alih kode Javascript kompleks yang dihasilkan.

Mengapa menggunakan peta sumber?

Dalam aplikasi produksi, misalnya, kami menggunakan fitur build seperti Rollup untuk menghapus kode mati, Prepack untuk menghilangkan dan mengganti kode dengan komputasi yang dapat dievaluasi pada waktu kompilasi alih-alih waktu proses, lalu mengecilkan kode dengan Uglify. Dan belum lagi kerumitan kode Javascript yang sudah ditranspilasi. Jadi, kode yang dihasilkan bisa jauh berbeda dari kode yang sebenarnya Anda tulis. Oleh karena itu, disarankan untuk menggunakan peta sumber, ini membuat proses debug menjadi sangat mudah karena Anda dapat menelusuri kode sumber asli Anda.

Pemantauan proses, pemantauan kesalahan, pencatatan dan alat pelacakan tumpukan seperti Sentry, Bugsnag, PM2, Winston juga menggunakan peta sumber untuk memetakan garis dan kolom dalam jejak tumpukan pengecualian Javascript kembali ke Typecript.

Bagaimana cara menggunakan peta sumber?

Anda dapat mengaktifkan peta sumber baik dengan menggunakan --sourceMapopsi saat mengompilasi atau dengan menentukannya compilerOptionsdalam tsconfig.jsonfile proyek Anda, seperti berikut:

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

Catatan keamanan untuk peta sumber:

Jika Anda ingin mendapatkan keamanan dengan mengaburkan kode browser Anda, Anda mungkin ingin mengecualikan peta sumber dari kode browser di aplikasi produksi Anda.

Peta Deklarasi: .d.ts.map

.d.ts.mapFile peta deklarasi ( ) juga dikenal sebagai peta sumber deklarasi, berisi definisi pemetaan yang menautkan setiap deklarasi jenis yang dihasilkan dalam .d.tsfile kembali ke file sumber asli Anda ( .ts). Definisi pemetaan dalam file-file ini dalam format JSON.

Ini berguna dalam navigasi kode. Anda akan dapat menggunakan fitur editor seperti "Pergi ke Definisi" dan Ubah nama untuk menavigasi dan mengedit kode secara transparan di seluruh sub proyek ketika Anda telah membagi proyek besar menjadi beberapa proyek kecil menggunakan referensi proyek.

Untuk mengaktifkan peta deklarasi, tentukan dua opsi berikut dalam tsconfig.jsonfile proyek Anda:

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

Itu dia! Semoga membantu.