TypeScript çalıştırıcısı nedir?

TypeScript, türlerle birlikte JavaScript'tir. Verilerinizin yapısını arayüzler ve tür açıklamalarıyla tanımlarsınız; TypeScript derleyicisi de kod çalışmadan önce onu düz JavaScript'e dönüştürür. Birkaç satır kodu denemek genellikle bir proje, derleyici ve yapılandırma dosyası oluşturmayı gerektirir. TypeScript çalıştırıcısı bunların hepsini ortadan kaldırır. Kodu yazarsınız, çalıştırırsınız ve console.log ile yazdırdıklarını okursunuz.

Araç açıklaması

Bu araç, TypeScript kodunuzu tarayıcınızda çalıştırır ve kodun konsola yazdığı her şeyi gösterir. Soldaki alana kod yazın veya yapıştırın ve Çalıştır'a basın ya da Ctrl+Enter tuşlarına (Mac'te Cmd+Enter) basın. Çıktı sağda görünür; her console çağrısı için bir satır gösterilir ve uyarılarla hatalar renklerle işaretlenir. Siz istemeden hiçbir şey çalıştırılmaz; bu nedenle kodu özgürce düzenleyebilirsiniz.

Kod, resmi TypeScript derleyicisi tarafından derlenir ve tarayıcınızın arka plan iş parçacığı olan bir Web Worker'da çalıştırılır. Bu nedenle hiç bitmeyen bir script sayfayı dondurmaz: Durdur'a basın, script hemen sonlandırılsın. Kodunuz bir sunucuya gönderilmez.

Örnekler

Bir arayüzle verileri tanımlayın ve bunlarla çalışın:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Book", price: 12 },
  { name: "Pen", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Total: ${total}`);
TypeScript

Çıktı:

Total: 13.5

Bir enum ve parametre özelliklerine sahip bir sınıf kullanın:

enum Level {
  Low = "low",
  High = "high",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Write tests", Level.High).describe());
TypeScript

Çıktı:

Write tests (high)

Özellikler

  • Resmi derleyiciyle TypeScript çalıştırır; bu nedenle tüm TypeScript söz dizimi desteklenir
  • Enum'ları, namespace'leri, decorator'ları, generic'leri ve parametre özelliklerini destekler
  • Söz dizimi hatalarını, tsc ile aynı biçimde satır ve sütun bilgileriyle gösterir
  • console.log, info, debug, warn ve error çıktısını gösterir; uyarılar ve hatalar renklerle işaretlenir
  • Nesneleri, dizileri, map'leri, set'leri, sınıfları, tarihleri ve hataları biçimlendirir; döngüsel başvuruları işler
  • console.group, count, time, assert, dir ve clear komutlarını destekler
  • Üst düzey await, zamanlayıcılar ve promise'ler dahil olmak üzere asenkron kodu çalıştırır
  • Yakalanmamış hataları ve işlenmemiş promise reddetmelerini çıktıda bildirir
  • Sonsuz döngüde takılmış olsa bile scripti anında sonlandıran Durdur düğmesi sunar
  • Varsayılan olarak açık olan Günlükleri koru seçeneği, sonuçları karşılaştırabilmeniz için önceki çalıştırmaların çıktısını saklar
  • Günlük kaydının tarihini ve saatini görmek için çıktıda bir satırın üzerine gelin
  • Tüm çıktıyı kopyalayın, Temizle düğmesiyle temizleyin veya kodunuzu dosya olarak indirin

Nasıl çalışır?

Çalıştır'a bastığınızda TypeScript derleyicisi kodunuzdaki türleri kaldırır ve kodu JavaScript'e dönüştürür. Derleyici sayfa açıldığında bir kez yüklenir; bu nedenle yavaş bir bağlantıda ilk çalıştırma biraz zaman alabilir. Kodda bir söz dizimi hatası varsa hata gösterilir ve kod çalıştırılmaz.

Ardından JavaScript yeni bir Web Worker'a gönderilir. Worker içinde console yöntemleri değiştirilir; böylece her çağrı metne dönüştürülür ve sayfaya geri gönderilir. Kodunuz, üst düzeyde await kullanımına olanak sağlayan bir async işlevi içine alınır.

Çıktının altındaki durum çubuğu, kodunuz derlenirken, çalıştırılırken veya başlattığı bir zamanlayıcıyı beklerken Çalışıyor durumunu gösterir. Bir setInterval, siz onu temizleyene veya Durdur'a basana kadar çalıştırmayı sürdürür. Her çalıştırma yeni bir worker ile başlar; böylece önceki çalıştırmadaki değişkenler geride kalmaz.

İpuçları

  • Tür denetimi yapılmaz. tsx ve esbuild gibi bu araç da türleri kaldırıp kodu çalıştırır; bu nedenle const count: number = "three" bir hata olmadan çalışır
  • Son ifade yerine console.log kullanın: Son satırın değeri yazdırılmaz; bu nedenle tek başına 1 + 2 hiçbir şey göstermez
  • Kodunuzda export ifadelerini ve yalnızca tür içeren import'ları tutabilirsiniz. Bir paketi içe aktarmak çalışmaz ve "Cannot find module" hatasıyla başarısız olur
  • Bir worker'da sayfa bulunmaz; bu nedenle document, window ve diğer DOM nesneleri kullanılamaz. Global kapsam için self kullanın
  • Çıktıda en yeni 1000 satır tutulur ve tek bir satır 10000 karakterden sonra kesilir
  • Tarayıcı konsolunda yapacağınız gibi yalnızca güvendiğiniz kodları çalıştırın