Konwerter TypeScript na JavaScript online — TS/TSX na JS/JSX — Numio
Usuń typy TypeScript — adnotacje, interfejsy, aliasy typów i parametry generyczne — aby otrzymać zwykły JavaScript. Narzędzie obsługuje .ts i .tsx: JSX pozostaje bez zmian, więc komponent TSX staje się JSX. Konwersja odbywa się lokalnie w przeglądarce; kod nie jest sprawdzany pod kątem typów, łączony w pakiet ani uruchamiany.
Sprawdź, jak fragment TypeScript wygląda w zwykłym JavaScript, zanim użyjesz go w projekcie JS.
Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.
TypeScript
JavaScript
Kiedy go używać
- Sprawdź, jak fragment TypeScript wygląda w zwykłym JavaScript, zanim użyjesz go w projekcie JS.
- Zamień komponent React .tsx na .jsx, usuwając typy właściwości i zachowując JSX.
Jak używać
- Wklej TypeScript lub TSX albo wczytaj przykład (interfejs i funkcja, typy generyczne, JSX). Wczytanie przykładu zastępuje dane wejściowe.
- Sprawdź JavaScript po prawej. Adnotacje typów i interfejsy znikają; konstrukcje istniejące podczas wykonywania, np. enum, są emitowane jako JavaScript.
- Skopiuj wynik. Jeśli potrzebujesz kontroli typów, osobno sprawdź oryginalny TypeScript poleceniem tsc --noEmit.
Kod TypeScript
interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;Wynik JavaScript
const greet = (user) => "Hello, " + user.name
Szczegóły i ograniczenia
Kod jest konwertowany lokalnie w przeglądarce i nie jest przesyłany. Po użyciu wspólnego urządzenia wyczyść dane wejściowe.
Usuwanie typów nie jest ich sprawdzaniem: const count: number = "text" zostanie przekonwertowane bez błędu. Sprawdź typy kompilatorem TypeScript.
JSX pozostaje JSX. Aby uruchamiać komponenty React w przeglądarce, nadal potrzebujesz etapu kompilacji JSX w swoim projekcie.
Konstrukcje z wartościami dostępnymi podczas wykonywania, np. enum, generują kod JavaScript zamiast znikać.
Konwertowany jest wyłącznie wklejony kod: importy nie są rozwiązywane, pliki nie są łączone w pakiet, a nowoczesna składnia nie jest dostosowywana do starszych przeglądarek.
FAQ
Czy można przekonwertować TSX na JSX?
Tak. Wklej komponent .tsx: typy właściwości i interfejsy zostaną usunięte, a JSX pozostanie bez zmian, więc wynik można zapisać jako .jsx. Narzędzie nie kompiluje JSX do wywołań React.createElement.
Czym to się różni od uruchomienia tsc?
tsc sprawdza typy całego projektu i może emitować JavaScript dla wybranej wersji docelowej. Ta strona jedynie usuwa typy z wklejonego kodu za pomocą transformacji TypeScript w Babel, zachowuje nowoczesną składnię i nie zgłasza błędów typów. W przypadku całych projektów uruchom lokalnie tsc lub bundler, np. esbuild.
Dlaczego kod z błędami typów został przekonwertowany?
Konwersja dotyczy składni. Nie sprawdza zgodności przypisań ani wywołań funkcji z ich typami, dlatego uruchom kompilator TypeScript w projekcie, aby znaleźć błędy typów.
Co sprawdzić po otrzymaniu błędu składni?
Sprawdź wskazany wiersz i kolumnę, otaczające nawiasy oraz adnotację typu w tym miejscu. Ograniczenie kodu do małego fragmentu ułatwia znalezienie problemu; przy błędzie połączenia użyj opcji ponowienia.