Online TypeScript derleyici nasıl kullanılır
- Düzenleyiciye TypeScript yazın veya yapıştırın ya da örnekten başlayın (Örneği sıfırla onu geri yükler).
- Çalıştır'a basın veya Ctrl + Enter tuşlarını kullanın (Mac'te ⌘ + Enter).
- Kodunuz JavaScript'e derlenir. Derleyici bir sözdizimi hatası bulursa hata,
TShata koduyla, satırıyla ve sütunuyla listelenir ve hiçbir şey çalışmaz. - Derleme başarılı olursa JavaScript çalışır.
console.logçıktısı Çıktı panelinde görünür ve derleyicinin tam olarak ne ürettiğini görmek için düzenleyicinin altındaki Üretilen JavaScript bölümünü açabilirsiniz. - 5, 15 veya 60 saniyelik bir süre sınırı seçin ya da bir çalıştırmayı erken bitirmek için Durdur'a basın.
İlk çalıştırmada sayfa, yaklaşık 3 MB boyutundaki resmî TypeScript derleyicisini indirir. Tarayıcınız bunu önbelleğe alır; bu yüzden sonraki çalıştırmalar hızlı başlar.
Derleme ve çalıştırma, ikisi de tarayıcınızdaki bir Web Worker'da gerçekleşir. Kodunuz yüklenmez ve sunucularımızda saklanmaz. Düzenleyici son kodunuzu yalnızca tarayıcınızın yerel depolama alanına kaydeder, başka hiçbir yere değil.
Neler destekleniyor
Bu sayfa, Microsoft'un resmî derleyicisi olan TypeScript 5.6'yı kullanır. Hedefi ES2022'dir ve sonucu tarayıcınızın JavaScript motorunda çalıştırır.
- Tüm TypeScript sözdizimi: tür açıklamaları, arayüzler, tür takma adları, jenerikler, birleşim ve kesişim türleri, enum'lar, erişim belirteçleri,
satisfies,as constve daha fazlası. - Sınıfların, async/await'in ve isteğe bağlı zincirlemenin olduğu gibi bırakıldığı modern JavaScript çıktısı.
- Üst düzey
await, zamanlayıcılar ve promise'ler; tıpkı Online JavaScript Derleyici'de olduğu gibi.
Sınırlamalar:
- Yalnızca dönüştürme (transpile). Derleyici türleri kaldırır ve sözdizimi hatalarını bildirir, ancak tam tür denetimi yapmaz.
const n: number = "text"gibi bir kod derlenir ve çalışır. Anlamsal tür hatalarına ihtiyacınız olduğundatsc --noEmitveya düzenleyicinizi kullanın. - DOM yoktur: kod bir worker'da çalıştığından
documentvewindowkullanılamaz. - İçe aktarma yoktur: npm paketleri,
importdeyimleri ve Node.js API'leri kullanılamaz.
TypeScript hızlı başvuru
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Kavram | Sözdizimi |
|---|---|
| Tür belirtilmiş değişken | let count: number = 0; |
| Arayüz | interface User { id: number; name?: string } |
| Birleşim türü | type Id = string | number; |
| Jenerik işlev | function wrap<T>(v: T): T[] { return [v]; } |
| Salt okunur dizi | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
İpuçları
- Enum'lar, parametre özellikleri ve sınıf alanları gibi özelliklerin nasıl derlendiğini öğrenmek için Üretilen JavaScript bölümünü açın. TypeScript'in çalışma zamanında ne yaptığını anlamanın hızlı bir yoludur.
- Türlerin çalışma zamanında kaybolduğunu unutmayın. Dışarıdan gelen verileri (ayrıştırılmış JSON gibi) doğrulamak için çalışma zamanı denetimleri veya
function isUser(x: unknown): x is Usergibi tür koruyucuları yazın. - Çıktıyı bir projeye kopyalamadan önce düzenlemeniz mi gerekiyor? Onu JavaScript Biçimlendirici ve Küçültücü'ye yapıştırın.
TS1005: ';' expected gibi bir hata, kodun ayrıştırılamadığı anlamına gelir. Çıktıda gösterilen satırı ve sütunu düzeltin, sonra yeniden çalıştırın.Sıkça sorulan sorular
Bu araç türlerimi denetliyor mu?
Hayır. Derleyicinin dönüştürme kipini kullanır; bu kip yalnızca sözdizimi hatalarını bildirir. Bu onu hızlı ve hafif tutar ama tür uyuşmazlıkları bildirilmez. Tam denetim için tsc'yi yerelde çalıştırın veya TypeScript dil hizmetine sahip bir düzenleyici kullanın.
TypeScript ile JavaScript arasındaki fark nedir?
TypeScript, isteğe bağlı statik türleri olan JavaScript'tir. Tarayıcılar TypeScript'i doğrudan çalıştıramaz; bu yüzden önce türler kaldırılarak ve enum gibi yalnızca TypeScript'e özgü birkaç özellik basitleştirilerek düz JavaScript'e derlenir. Bu adımın sonucunu bu sayfada görebilirsiniz.
Hangi TypeScript sürümü kullanılıyor?
TypeScript 5.6; çıktı hedefi olarak ES2022.
Kütüphaneleri içe aktarabilir miyim?
Hayır. Her çalıştırma, modül çözümlemesi olmadan tek bir dosyayı derler ve yürütür; bu yüzden import deyimleri ve npm paketleri desteklenmez. İlgili yardımcı araçlar için tüm geliştirici araçlarımıza bakın.
Güncellendi