TypeScript Harita dosyası nedir?

Gördüğüm .maptypescript için dosyaları. Bilmek istediğim, bu dosyaların ne için olduğu. .Ts dosyasında referans verilen diğer dosyalara referans içeriyorlar mı?

.map dosyaları, araçların yayılan JavaScript kodu ile onu oluşturan TypeScript kaynak dosyaları arasında eşlemesini sağlayan kaynak eşleme dosyalarıdır. Birçok hata ayıklayıcı (örneğin, Visual Studio veya Chrome'un geliştirme araçları) bu dosyaları kullanabilir, böylece JavaScript dosyası yerine TypeScript dosyasında hata ayıklayabilirsiniz.

Bu gibi bazı minifiers ve diğer derlenmiş-to-JS dilleri tarafından üretilen aynı kaynak haritası biçimi varlıktır CoffeeScript .

Bir kaynak haritası temelde söylediği gibi, bir dilden diğerine bir haritadır, bu nedenle hata ayıklayıcı JavaScript kodunu çalıştırabilir, ancak size onu gerçekten oluşturan satırı gösterebilir.

Pratik hata ayıklama amaçları için:

Kaynak eşlemenin yapmanıza izin verdiği, TypeScript dosyasında bir kesme noktası ayarlamak ve ardından kodda hata ayıklamaktır. Bu, Chrome ve Firefox'ta yapılabilir. Biraz kafa karıştırıcı bir şekilde, Chrome'daki hata ayıklayıcı davranışı, kesme noktasına ulaşıldığında ".js" dosyasının gerçekten gösterilmesidir (kesme noktasında durdurulur).

Bugün itibariyle, Firefox hata ayıklayıcı, bozulduğunda gerçek TypeScript dosyasını görüntüleyecektir. Aşağıdaki referansa bakın:

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

(bu ayrıca Visual Studio'nun kaynak eşlemeyi oluşturmak için nasıl yapılandırılabileceğini gösterir)

Bir kaynak haritanın nasıl çalıştığını anlamak için, 'Bir kaynak haritanın anatomisi' bölümünü buradan okuyabilirsiniz:

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

.mapTypescript'te en yaygın olan iki tür dosya vardır. Biri Kaynak Haritası ( .js.map) ve diğeri Beyan Haritası ( .d.ts.map). Her ikisini de tek tek ayrıntılı olarak anlatacağım.

Kaynak Haritaları: .js.map

Kaynak eşleme ( .js.map) dosyaları, oluşturulan Javascript kodunuzun her bir parçasını karşılık gelen Typescript dosyasının belirli satırına ve sütununa geri bağlayan eşleme tanımlarını içerir. Bu dosyalardaki eşleme tanımları JSON formatındadır.

Kaynak eşlemeleri etkinleştirildiğinde, hata ayıklama sırasında Visual Studio Code ve Chrome DevTools, oluşturulan karmaşık Javascript kodu yerine Typescript kodunuzu gösterecektir.

Neden kaynak haritaları kullanmalı?

Örneğin üretim uygulamalarında, ölü kodu kaldırmak için Rollup, kodu ortadan kaldırmak ve çalışma zamanı yerine derleme zamanında değerlendirilebilen hesaplamalarla değiştirmek için Hazır Paket gibi derleme araçlarını kullanıyoruz, ardından Uglify ile kodu küçültiyoruz. Ve zaten aktarılan Javascript kodunun karmaşıklığından bahsetmiyorum bile. Dolayısıyla, ortaya çıkan kod, gerçekte yazdığınız koddan çok farklı olabilir. Bu nedenle, kaynak haritalarını kullanmanız önerilir, hata ayıklamayı çok kolaylaştırır çünkü orijinal kaynak kodunuzdan geçersiniz.

Sentry, Bugsnag, PM2, Winston gibi süreç izleme, hata izleme, günlüğe kaydetme ve yığın izleme araçları, Javascript istisna yığın izlerinde Typescript'e geri dönen satırları ve sütunları eşlemek için kaynak haritalarını da kullanır.

Kaynak haritaları nasıl kullanılır?

Sen kullanarak ya kaynak haritalar etkinleştirebilirsiniz --sourceMapderlenirken seçeneği veya bunu belirterek compilerOptionsyılında tsconfig.jsonaşağıdaki gibi projenizin dosyası:

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

Kaynak haritaları için güvenlik notu:

Tarayıcı kodunuzu karıştırarak bir miktar güvenlik elde etmek istiyorsanız, üretim uygulamanızda kaynak haritalarını tarayıcı kodundan hariç tutmak isteyebilirsiniz.

Beyanname Haritaları: .d.ts.map

Bildirim .d.ts.mapkaynak eşlemeleri olarak da bilinen bildirim eşleme ( ) dosyaları, .d.tsdosyalarda oluşturulan her tür bildirimini orijinal kaynak dosyanıza ( .ts) bağlayan eşleme tanımlarını içerir . Bu dosyalardaki eşleme tanımı JSON biçimindedir.

Bu, kod gezintisinde yardımcı olur. Proje referanslarını kullanarak büyük bir projeyi küçük çok sayıda projeye böldüğünüzde, alt projeler arasında şeffaf bir şekilde gezinmek ve kodu düzenlemek için "Tanıma Git" ve Yeniden Adlandır gibi editör özelliklerini kullanabilirsiniz.

Beyan haritalarını etkinleştirmek tsconfig.jsoniçin, projenizin dosyasında aşağıdaki iki seçeneği belirtin :

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

Bu kadar! Umarım yardımcı olur.