Çevrimiçi TypeScript'ten JavaScript'e Dönüştürücü — TS/TSX'ten JS/JSX'e
TypeScript türlerini — tür açıklamaları, arayüzler, tür takma adları ve jenerikler — kaldırarak düz JavaScript elde edin. .ts ve .tsx ile çalışır: JSX olduğu gibi korunur, dolayısıyla TSX bileşeni JSX olur. Kod tarayıcınızda yerel olarak dönüştürülür; tür denetimi, paketleme veya çalıştırma yapılmaz.
TypeScript kod parçasını JS projesinde kullanmadan önce düz JavaScript olarak nasıl göründüğünü görmek.
Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.
TypeScript
JavaScript
Ne zaman kullanılır?
- TypeScript kod parçasını JS projesinde kullanmadan önce düz JavaScript olarak nasıl göründüğünü görmek.
- JSX'i koruyup prop türlerini kaldırarak React .tsx bileşenini .jsx'e dönüştürmek.
Nasıl kullanılır?
- TypeScript veya TSX yapıştırın ya da örnek yükleyin (arayüz ve işlev, jenerikler, JSX). Örnek yüklemek girdinizi değiştirir.
- Sağdaki JavaScript'i okuyun. Tür açıklamaları ve arayüzler kaldırılır; enum gibi çalışma zamanında var olan yapılar JavaScript koduna dönüşür.
- Sonucu kopyalayın. Tür güvenliği gerekiyorsa özgün TypeScript'i tsc --noEmit ile ayrıca denetleyin.
TypeScript girdisi
interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;JavaScript çıktısı
const greet = user => "Hello, " + user.name;
Ayrıntılar ve sınırlamalar
Kodunuz tarayıcınızda yerel olarak dönüştürülür ve yüklenmez. Ortak bir cihaz kullandıktan sonra girdiyi temizleyin.
Türleri kaldırmak tür denetimi değildir: const count: number = "text" hata vermeden dönüştürülür. Türleri TypeScript derleyicisiyle kontrol edin.
JSX, JSX olarak kalır. React bileşenlerini tarayıcıda çalıştırmak için projenizin JSX derleme adımı yine gerekir.
enum gibi çalışma zamanı değeri olan yapılar kaybolmak yerine JavaScript kodu üretir.
Yalnızca yapıştırılan kod dönüştürülür: içe aktarımlar çözümlenmez, dosyalar paketlenmez ve modern söz dizimi eski tarayıcılara göre dönüştürülmez.
FAQ
TSX'i JSX'e dönüştürebilir miyim?
.tsx bileşenini yapıştırın: prop türleri ve arayüzler kaldırılır, JSX değişmeden kalır; sonucu .jsx olarak kaydedebilirsiniz. JSX'i React.createElement çağrılarına derlemek bu aracın kapsamı dışındadır.
tsc çalıştırmaktan farkı nedir?
tsc tüm projede tür denetimi yapar ve seçilen hedef için JavaScript üretebilir. Bu sayfa Babel'ın TypeScript dönüşümüyle yalnızca yapıştırdığınız koddan türleri kaldırır, modern söz dizimini korur ve tür hatası bildirmez. Bütün projeler için tsc veya esbuild gibi bir paketleyiciyi yerel olarak çalıştırın.
Tür hatası olan kodu neden dönüştürdü?
Dönüştürme söz dizimseldir. Atamaları veya işlev çağrılarını türlerine göre kontrol etmez. Tür hatalarını bulmak için projenizde TypeScript derleyicisini çalıştırın.
Söz dizimi hatasında neyi kontrol etmeliyim?
Bildirilen satır ve sütuna, çevresindeki parantezlere ve tür açıklamalarına bakın. Kodu küçük bir parçaya indirmek sorunu bulmayı kolaylaştırır; bağlantı hatasında Yeniden dene seçeneğini kullanın.