() translation by (you can also view the original English article)
Mari kita mulai tutorial ini dengan pertanyaan: "Apa itu TypeScript?"
TypeScript adalah superset dari JavaScript yang dikompilasi ke plain JavaScript. Sebagai analogi, jika JavaScript adalah CSS, maka TypeScript adalah SCSS.
Semua kode JavaScript valid yang Anda tulis juga merupakan kode TypeScript yang valid. Namun, dengan TypeScript, Anda bisa menggunakan pengetikan statis dan fitur-fitur terbaru yang bisa dikompilasi ke plain JavaScript, yang didukung oleh semua browser. TypeScript ditujukan untuk memecahkan masalah membuat JavaScript dapat diskalakan, dan itu melakukan pekerjaan yang cukup baik.
Dalam tutorial ini, Anda akan mulai dengan membaca tentang fitur-fitur berbeda dari TypeScript dan mengapa belajar itu ide yang bagus. Sisa dari bagian dalam artikel akan mencakup instalasi dan kompilasi dari TypeScript bersama dengan beberapa editor teks populer yang menawarkan dukungan untuk sintaks TypeScript dan fitur penting lainnya.
Mengapa Belajar TypeScript?
Jika Anda belum pernah menggunakan TypeScript sebelumnya, Anda mungkin bertanya-tanya mengapa Anda harus repot-repot belajar sama sekali ketika dilakukan kompilasi ke JavaScript pada akhirnya.
Biarkan saya meyakinkan Anda bahwa Anda tidak perlu menghabiskan banyak waktu untuk mempelajari TypeScript. Baik TypeScript dan JavaScript memiliki sintaks yang sangat mirip, dan Anda tinggal mengganti nama file .js menjadi .ts dan mulai menulis kode TypeScript. Berikut beberapa fitur yang harus meyakinkan Anda untuk mulai belajar TypeScript:
- Tidak seperti JavaScript, yang diketik secara dinamis, TypeScript memungkinkan Anda untuk menggunakan pengetikan statis. Fitur ini sendiri membuat kode lebih mudah dipelihara dan sangat mengurangi kemungkinan bug yang mungkin disebabkan karena asumsi yang salah tentang jenis variabel tertentu. Sebagai bonus tambahan, TypeScript dapat menentukan jenis variabel berdasarkan penggunaannya tanpa Anda secara eksplisit menentukan jenisnya. Namun, Anda harus selalu menentukan jenis untuk variabel secara eksplisit untuk kejelasan.
- Jujur saja, JavaScript tidak dirancang untuk melayani sebagai bahasa pengembangan skala besar. TypeScript menambahkan semua fitur yang hilang ini ke JavaScript yang membuatnya benar-benar dapat diskalakan. Dengan pengetikan statis, IDE yang Anda gunakan sekarang dapat memahami kode yang Anda tulis dengan cara yang lebih baik. Ini memberi IDE kemampuan untuk menyediakan fitur seperti penyelesaian kode dan refactoring yang aman. Semua ini menghasilkan pengalaman pengembangan yang lebih baik.
- TypeScript juga memungkinkan Anda untuk menggunakan semua fitur JavaScript terbaru dalam kode Anda tanpa mengkhawatirkan dukungan browser. Setelah Anda menulis kode, Anda dapat meng-compile-nya ke JavaScript lama yang didukung oleh semua browser dengan mudah.
- Banyak kerangka populer seperti Angular dan Ionic sekarang menggunakan TypeScript. Ini berarti bahwa jika Anda memutuskan untuk menggunakan salah satu kerangka di masa depan, belajar TypeScript sekarang adalah ide yang bagus.
Pemasangan
Sebelum Anda mulai menulis beberapa kode TypeScript yang mengagumkan, Anda perlu menginstal TypeScript terlebih dahulu. Ini bisa dilakukan dengan bantuan npm. Jika tidak menginstal npm, Anda harus menginstal npm terlebih dahulu sebelum menginstal TypeScript. Untuk menginstal TypeScript, Anda perlu memulai terminal dan menjalankan perintah berikut:
1 |
npm install -g typescript |
Setelah instalasi selesai, Anda dapat memeriksa versi TypeScript yang diinstal dengan menjalankan perintah tsc -v di terminal Anda. Jika semuanya sudah terpasang dengan benar, Anda akan melihat nomor versi TypeScript yang diinstal di terminal.
IDE dan Editor Teks Dengan Dukungan TypeScript
TypeScript dibuat oleh Microsoft. Jadi fakta bahwa Visual Studio adalah IDE pertama yang mendukung TypeScript seharusnya tidak mengejutkan. Setelah TypeScript mulai mendapatkan popularitas, semakin banyak editor dan IDE menambahkan dukungan untuk bahasa ini baik di luar kotak atau melalui plugin. Editor ringan dan sumber terbuka lain yang disebut Visual Studio Code, yang dibuat oleh Microsoft, memiliki dukungan bawaan untuk TypeScript. Demikian pula, WebStorm juga memiliki dukungan out-of-the-box untuk TypeScript.
Microsoft juga telah membuat Plugin Sublime TypeScript gratis. NetBeans memiliki plugin TypeScript yang menyediakan berbagai fitur untuk kemudahan pengembangan. Penyorotan sintaks tersedia di Vim dan Notepad++ dengan bantuan plugin typescript-vim dan notepadplus-typescript.
Anda dapat melihat daftar lengkap semua editor teks dan IDE yang mendukung TypeScript di GitHub. Untuk contoh dalam seri ini, saya akan menggunakan Kode Visual Studio untuk menulis semua kode.
Mengompilasi TypeScript ke JavaScript
Katakanlah Anda telah menulis beberapa kode TypeScript dalam file .ts. Browser tidak akan dapat menjalankan kode ini sendiri. Anda harus mengkompilasi TypeScript ke dalam plain JavaScript yang dapat dimengerti oleh browser.
Jika menggunakan IDE, kode dapat dikompilasi ke JavaScript dalam IDE itu sendiri. Sebagai contoh, Visual Studio memungkinkan Anda untuk langsung mengkompilasi kode TypeScript ke JavaScript. Anda harus membuat file tsconfig.json di mana Anda menentukan semua opsi konfigurasi untuk mengkompilasi file TypeScript Anda ke JavaScript.
Pendekatan paling ramah-pemula saat Anda tidak mengerjakan proyek besar adalah menggunakan terminal itu sendiri. Pertama, Anda harus pindah ke lokasi file TypeScript di terminal dan kemudian jalankan perintah berikut.
1 |
tsc first.ts |
Ini akan membuat file baru bernama first.js di lokasi yang sama. Perlu diingat bahwa jika Anda sudah memiliki file bernama first.js, itu akan ditimpa.
Jika Anda ingin mengkompilasi semua file di dalam direktori saat ini, Anda dapat melakukannya dengan bantuan wildcard. Ingat bahwa ini tidak akan bekerja secara rekursif.
1 |
tsc *.ts |
Akhirnya, Anda hanya dapat mengkompilasi beberapa file tertentu dengan secara eksplisit memberikan nama mereka dalam satu baris. Dalam kasus seperti itu, file JavaScript akan dibuat dengan nama file yang sesuai.
1 |
tsc first.ts product.ts bot.ts |
Mari kita lihat program berikut, yang mengalikan dua angka dalam TypeScript.
1 |
let a: number = 12; |
2 |
let b: number = 17; |
3 |
|
4 |
function showProduct(first: number, second: number): void { |
5 |
console.log("The product is: " + first * second); |
6 |
}
|
7 |
|
8 |
showProduct(a, b); |
Kode TypeScript di atas mengkompilasi ke kode JavaScript berikut ketika versi yang ditargetkan diatur ke ES6. Perhatikan bagaimana semua jenis informasi yang Anda berikan dalam TypeScript sekarang hilang setelah kompilasi. Dengan kata lain, kode tersebut dikompilasi ke JavaScript yang dapat dipahami oleh browser, tetapi Anda bisa melakukan pengembangan di lingkungan yang jauh lebih baik yang dapat membantu Anda dalam menangkap banyak bug.
1 |
let a = 12; |
2 |
let b = 17; |
3 |
function showProduct(first, second) { |
4 |
console.log("The product is: " + first * second); |
5 |
}
|
6 |
showProduct(a, b); |
Dalam kode di atas, kami telah menetapkan tipe variabel a dan b sebagai angka. Ini berarti bahwa jika nanti Anda mencoba untuk menetapkan nilai b ke string seperti "apple", TypeScript akan menunjukkan kepada Anda kesalahan bahwa "apel" tidak dapat dialihkan ke number jenis. Kode Anda akan tetap dikompilasi ke JavaScript, tetapi pesan kesalahan ini akan memberi tahu Anda bahwa Anda melakukan kesalahan dan membantu Anda menghindari masalah selama waktu proses.
Berikut adalah screenshot yang menunjukkan pesan kesalahan dalam Visual Studio Code:
Contoh di atas menunjukkan bagaimana TypeScript terus memberi Anda petunjuk tentang kemungkinan kesalahan dalam kode. Ini adalah contoh yang sangat mendasar, tetapi ketika Anda membuat program yang sangat besar, pesan seperti ini sangat membantu Anda menulis kode yang kuat dengan sedikit kemungkinan kesalahan.
Kesimpulan
Tutorial memulai dalam seri ini dimaksudkan untuk memberi Anda ikhtisar yang sangat singkat tentang fitur-fitur TypeScript yang berbeda dan membantu Anda menginstal bahasa bersama dengan beberapa saran untuk IDE dan editor teks yang dapat Anda gunakan untuk pengembangan. Bagian selanjutnya membahas cara-cara yang berbeda untuk menyusun kode TypeScript Anda ke JavaScript dan menunjukkan kepada Anda bagaimana TypeScript dapat membantu Anda menghindari beberapa kesalahan umum.
Saya harap Anda menyukai tutorial ini. Jika Anda memiliki pertanyaan, tolong beri tahu saya di komentar. Tutorial berikutnya dari seri ini akan membahas berbagai jenis variabel yang tersedia di TypeScript.
