Cara menggunakan compiler TypeScript online
- Tulis atau tempel TypeScript ke editor, atau mulai dari contoh (Reset contoh mengembalikannya).
- Tekan Jalankan atau gunakan Ctrl + Enter (⌘ + Enter di Mac).
- Kode Anda dikompilasi menjadi JavaScript. Jika compiler menemukan error sintaks, error itu ditampilkan beserta kode error
TS, baris, dan kolomnya, dan tidak ada yang dijalankan. - Jika kompilasi berhasil, JavaScript dijalankan. Output
console.logmuncul di panel Output, dan Anda bisa membuka JavaScript yang dihasilkan di bawah editor untuk melihat persis apa yang dihasilkan compiler. - Pilih batas waktu 5, 15, atau 60 detik, atau tekan Hentikan untuk mengakhiri proses lebih awal.
Pada proses pertama, halaman mengunduh compiler TypeScript resmi, sekitar 3 MB. Browser Anda menyimpannya di cache, jadi proses berikutnya dimulai dengan cepat.
Kompilasi dan eksekusi sama-sama berlangsung di Web Worker di browser Anda. Kode Anda tidak diunggah dan tidak disimpan di server kami. Editor menyimpan kode terakhir Anda di local storage browser Anda, dan tidak di tempat lain.
Apa saja yang didukung
Halaman ini memakai TypeScript 5.6, compiler resmi dari Microsoft. Targetnya ES2022 dan hasilnya dijalankan di mesin JavaScript browser Anda.
- Semua sintaks TypeScript: anotasi tipe, interface, type alias, generic, union dan intersection type, enum, access modifier,
satisfies,as const, dan lainnya. - Output JavaScript modern dengan class, async/await, dan optional chaining yang dibiarkan utuh.
awaittingkat atas, timer, dan promise, sama seperti Compiler JavaScript Online.
Keterbatasan:
- Hanya transpile. Compiler menghapus tipe dan melaporkan error sintaks, tetapi tidak melakukan type-checking penuh. Kode seperti
const n: number = "text"tetap dikompilasi dan dijalankan. Gunakantsc --noEmitatau editor Anda bila membutuhkan error tipe semantik. - Tanpa DOM: kode berjalan di worker, jadi
documentdanwindowtidak tersedia. - Tanpa import: paket npm, pernyataan
import, dan API Node.js tidak dapat dipakai.
Referensi singkat TypeScript
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);| Konsep | Sintaks |
|---|---|
| Variabel bertipe | let count: number = 0; |
| Interface | interface User { id: number; name?: string } |
| Union type | type Id = string | number; |
| Fungsi generic | function wrap<T>(v: T): T[] { return [v]; } |
| Array readonly | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
Tips
- Buka JavaScript yang dihasilkan untuk mempelajari bagaimana fitur seperti enum, parameter property, dan class field dikompilasi. Ini cara cepat untuk memahami apa yang dilakukan TypeScript saat runtime.
- Ingatlah bahwa tipe menghilang saat runtime. Untuk memvalidasi data dari luar (seperti JSON hasil parse), tulis pemeriksaan runtime atau type guard seperti
function isUser(x: unknown): x is User. - Perlu merapikan output sebelum menyalinnya ke proyek? Tempel ke JavaScript Formatter & Minifier.
TS1005: ';' expected berarti kode tidak bisa di-parse. Perbaiki baris dan kolom yang ditampilkan di output, lalu jalankan lagi.Pertanyaan yang sering diajukan
Apakah ini memeriksa tipe saya?
Tidak. Compiler memakai mode transpile, yang hanya melaporkan error sintaks. Itu membuatnya cepat dan ringan, tetapi ketidakcocokan tipe tidak dilaporkan. Untuk pemeriksaan penuh, jalankan tsc secara lokal atau pakai editor dengan TypeScript language service.
Apa perbedaan TypeScript dan JavaScript?
TypeScript adalah JavaScript dengan tipe statis yang opsional. Browser tidak bisa menjalankan TypeScript secara langsung, jadi TypeScript lebih dulu dikompilasi menjadi JavaScript biasa dengan menghapus tipe dan menurunkan beberapa fitur khusus TypeScript, seperti enum. Anda bisa melihat hasil langkah itu di halaman ini.
Versi TypeScript apa yang dipakai?
TypeScript 5.6, dengan ES2022 sebagai target output.
Bisakah saya mengimpor library?
Tidak. Setiap proses mengompilasi dan mengeksekusi satu file tanpa module resolution, jadi pernyataan import dan paket npm tidak didukung. Lihat semua tool developer kami untuk utilitas terkait.
Diperbarui