DokumentyObrazyMediaNarzędzia PDF

Konwerter TypeScript na JavaScript Online

Transpiluj TypeScript do JavaScript w Twojej przegladarce. Bez instalacji Node.js ani tsc. Idealne do nauki TS i udostepniania kodu.

function greet(user: User) {
  const greeting = "Hello, " + user.name;
  return greeting;
}

const users: User[] = [
  { name: "John", age: 30, active: true },
];
Processed in your browser

TypeScript do JavaScript: bez instalacji

Bez Node.js ani npm

Transpiluj TypeScript bezposrednio w przegladarce. Bez instalacji tsc, tsconfig.json ani zaleznosci.

Oficjalny kompilator

Uzywa kompilatora TypeScript Microsoftu skompilowanego do WebAssembly — taki sam wynik jak lokalny tsc.

Ucz sie TypeScript

Zrozum dokladnie, co kompilator generuje z Twoich typow, interfejsow i generykow.

Udostepniaj kod

Udostepniaj fragmenty JavaScript zespolom lub srodowiskom, ktore nie maja skonfigurowanego TypeScript.

Trzy kroki, żadnych komplikacji

1

Wklej swoj kod TypeScript

Wklej kod .ts: interfejsy, typy, generyki, enumy, dekoratory lub dowolna funkcje TypeScript, ktora chcesz przekonwertowac na czysty JavaScript.

2

Natychmiastowa transpilacja

Oficjalny kompilator TypeScript (skompilowany do WebAssembly) usuwa adnotacje typow i transpiluje do JavaScript ES2015+ w milisekundach.

3

Skopiuj wynikowy JavaScript

Otrzymaj rownowazdny JavaScript gotowy do uruchomienia w przegladarce, Node.js lub do udostepnienia zespolom, ktore nie uzywaja TypeScript.

Masz pytania?

Transpiler usuwa wszystkie elementy wylaczne dla TypeScript, ktore nie maja reprezentacji w JavaScript: adnotacje typow (: string, : number, : boolean, : T[]), interfejsy (interface User {}), aliasy typow (type ID = string), generyki (<T>, <T extends U>), modyfikatory dostepu (public, private, protected, readonly w klasach), enumy (enum Direction {} jest konwertowany na obiekt JavaScript), operator asercji typow as, slowo kluczowe declare dla deklaracji ambient oraz eksperymentalne dekoratory (@Component, @Injectable). Struktury sterujace, funkcje, klasy (czesc wartosciowa, nie typowa), moduly import/export oraz cala logika programu sa zachowywane bez zmian.

Transpiler online uzywa oficjalnego kompilatora TypeScript (opracowanego przez Microsoft, opublikowanego jako open source w pazdzierniku 2012 roku) z konfiguracja docelowa ES2015 lub ES2017. W prawdziwej produkcji prawidlowy przeplywy pracy to: zainstalowanie TypeScript przez npm install typescript, skonfigurowanie tsconfig.json (strict: true to zalecana praktyka od TypeScript 2.3) i uruchomienie tsc lub uzycie bundlerow takich jak Vite, esbuild, SWC lub webpack z ts-loader. Zaletam transpilera online sa szybkosc eksploracji, nauka lub udostepnianie fragmentow kodu — nie zastepuje on produkcyjnego lancucha narzedzi z sprawdzaniem typow, mapami zrodel i optymalizacjami bundlowania.

TypeScript ma dwa systemy dekoratorow: dekoratory dziedziczone (--experimentalDecorators, dostepne od TypeScript 1.5 w 2015 roku, uzywane przez Angular, NestJS i inversify) oraz dekoratory TC39 Stage 3 (zaimplementowane w TypeScript 5.0, marzec 2023, zgodne z propozycja ECMAScript). Transpiler online obsluguje oba systemy poprzez odpowiednia konfiguracje. Dekoratory dziedziczone generuja kod JavaScript z wywolaniami __decorate() i __metadata(); dekoratory TC39 Stage 3 generuja czystszy kod zgodny ze standardowa propozycja ECMAScript.

TypeScript obsluguje JSX (JavaScript XML, skladnia szablonow Reacta) przez pliki .tsx. Konfiguracja jsx kompilatora kontroluje transformacje JSX: react (przeksztalca do React.createElement()), react-jsx (uzywa nowej transformacji JSX z React 17+, importujac z react/jsx-runtime), react-native (pozostawia JSX bez transformacji) i preserve (pozostawia JSX dla innego transpilera, np. Babel). W przypadku projektow React z TypeScript zalecane jest uzycie Vite lub CRA/Next.js, ktory zawiera transpilacje TSX domyslnie.

Tak. Importy i eksporty modulow ES6 (import x from 'y', export default, export const) sa domyslnie zachowywane, gdy celem jest ES2015 lub wyzej. TypeScript rowniez usuwa importy tylko dla typow (import type { User } from './types'), poniewaz nie maja one reprezentacji w srodowisku uruchomieniowym. Gdy celem jest CommonJS (module: commonjs w tsconfig), importy/eksporty sa przeksztalcane do require()/module.exports, systemu modulow Node.js. W przypadku uzycia natywnych modulow ES w przegladarce najbardziej odpowiedni jest cel ES2015 z module: ESNext.

Tak. TypeScript zostal zaprojektowany przez Andersa Hejlsberga (takze projektanta C# i Turbo Pascal) w Microsofcie i opublikowany jako open source w pazdzierniku 2012 roku. Oficjalna definicja mowi, ze TypeScript to 'typowany JavaScript na skale duzych aplikacji'. Kazdy poprawny JavaScript jest poprawnym TypeScript — mozesz przemianowac dowolny plik .js na .ts bez zmian. TypeScript dodaje: system typow (adnotacje, interfejsy, generyki), enumy, eksperymentalne dekoratory i niektorze zaawansowane funkcje ECMAScript. Kompilator tsc byl pierwszym szeroko przyjety nowoczesnym transpilerem JavaScript, poprzednikiem dzisiejszego ekosystemu Babel, esbuild, SWC i Vite.

TypeScript do JavaScript online: transpiluj TS bez instalowania Node.js ani tsc

TypeScript jest jezykiem programowania opracowanym przez Microsoft i opublikowanym jako open source w pazdzierniku 2012 roku. Zostal zaprojektowany przez Andersa Hejlsberga — odpowiedzialnego rowniez za projektowanie C# (2000) i Turbo Pascal (1983) — z celem skalowania JavaScript dla duzych aplikacji poprzez opcjonalny statyczny system typow. TypeScript jest syntaktycznym nadzbiorem JavaScript (ECMAScript): kazdy poprawny JavaScript jest poprawnym TypeScript, a kompilator tsc generuje standardowy JavaScript. TypeScript 5.x jest jednym z najszerzej uzywanych jezykow wedlug ankiety Stack Overflow Developer Survey 2024, z masowym przyjeciem w ekosystemach takich jak Angular (ktory wymaga TypeScript od wersji 2 w 2016 roku), NestJS, Next.js i praktycznie kazdy duzy projekt frontendowy. Potrzeba transpilera online pojawia sie w kilku scenariuszach: szybka eksploracja sposobu kompilacji okreslonych funkcji TS bez konfigurowania lokalnego projektu, interaktywna nauka systemu typow, udostepnianie kodu deweloperom lub zespolom pracujacym z czystym JavaScript oraz szybkie prototypowanie fragmentow kodu.

Proces transpilacji TypeScript do JavaScript polega zasadniczo na wymazywaniu typow: kompilator analizuje kod TypeScript, weryfikuje spojnosc systemu typow i emituje JavaScript usuwajac wszystkie informacje o typach, ktore nie maja reprezentacji w srodowisku uruchomieniowym. Usuwane elementy to: adnotacje typow zmiennych, parametrow funkcji i typow zwracanych; pelne interfejsy i aliasy typow; modyfikatory dostepu w klasach (public/private/protected istnieja tylko w TypeScript); parametry typow w generykach; asercje typow (as Type, <Type>value); i deklaracje ambient (declare). Elementy przeksztalcane (a nie tylko usuwane) to: enumy (enum), konwertowane na obiekty JavaScript z dwukierunkowym mapowaniem; dekoratory dziedziczone, ktore generuja kod pomocniczy __decorate() i __metadata(); oraz zaawansowane funkcje ECMAScript, ktore TypeScript implementuje przed ich dostepnoscia we wszystkich silnikach.

Ekosystem narzedzi do transpilacji TypeScript znacznie ewoluowal. Oryginalny kompilator tsc (napisany w TypeScript, dostepny jako pakiet npm typescript od 2012 roku) jest odniesieniem behawioralnym i zapewnia pelne sprawdzanie typow. Dla szybkosci budowania w duzych projektach pojawialy sie alternatywy priorytetyzujace szybkosc transpilacji nad sprawdzaniem typow: esbuild (Evan Wallace, 2020, napisany w Go, 10-100x szybszy od tsc), SWC (2019, napisany w Rust, uzywany przez Next.js i Vercel) i transformator TypeScript Babela (@babel/plugin-transform-typescript, 2018). Te narzedzia wykonuja wymazywanie typow bez ich sprawdzania — do sprawdzania typow w CI/CD uruchamiany jest rowolegle tsc --noEmit. Vite (Evan You, 2020) uzywa esbuild do transpilacji TypeScript podczas programowania i Rollup do produkcji. Convertir.ai uzywa oficjalnego kompilatora TypeScript skompilowanego do WebAssembly, gwarantujac dokladna wiernosc zachowaniu tsc, wykonujac caly proces w Twojej przegladarce bez wysylania kodu na jakikolwiek serwer.