Apa itu TypeScript? JavaScript yang diketik dengan kuat

Apa itu TypeScript? TypeScript ditentukan

TypeScript adalah variasi dari bahasa pemrograman JavaScript populer yang menambahkan beberapa fitur utama yang penting untuk pengembangan perusahaan. Secara khusus, TypeScript sangat diketik - yaitu, variabel dan struktur data lain dapat dideklarasikan sebagai jenis tertentu, seperti string atau boolean, oleh programmer, dan TypeScript akan memeriksa validitas nilainya. Ini tidak mungkin dalam JavaScript, yang diketik secara longgar .

Pengetikan yang kuat TypeScript memungkinkan sejumlah fitur yang membantu membuat pengembang lebih efisien, terutama saat menangani basis kode skala perusahaan yang besar. TypeScript dikompilasi, bukan diinterpretasikan seperti JavaScript, yang berarti kesalahan dapat ditangkap sebelum eksekusi; IDE yang melakukan kompilasi inkremental latar belakang dapat menemukan kesalahan seperti itu selama proses pengkodean.

Terlepas dari perbedaan utama dengan JavaScript, TypeScript masih dapat dieksekusi di mana pun JavaScript dapat berjalan. Itu karena TypeScript mengkompilasi bukan ke biner yang dapat dieksekusi, tetapi ke JavaScript standar. Mari selami untuk mengetahui lebih lanjut.

TypeScript vs. JavaScript 

TypeScript adalah superset dari JavaScript. Meskipun kode JavaScript yang benar juga merupakan kode TypeScript yang benar, TypeScript juga memiliki fitur bahasa yang bukan bagian dari JavaScript. Fitur paling menonjol yang unik untuk TypeScript — yang memberi TypeScript namanya — adalah, seperti disebutkan, pengetikan yang kuat: variabel TypeScript dikaitkan dengan suatu jenis, seperti string, angka, atau boolean, yang memberi tahu compiler jenis data apa itu bisa menahan. Selain itu, TypeScript mendukung jenis inferensi, dan menyertakan semua jenis penampung semua, yang berarti bahwa variabel tidak harus memiliki jenis yang ditetapkan secara eksplisit oleh pemrogram; lebih dari itu sebentar lagi. 

TypeScript juga dirancang untuk pemrograman berorientasi objek — JavaScript, tidak terlalu banyak. Konsep seperti pewarisan dan kontrol akses yang tidak intuitif dalam JavaScript mudah diterapkan di TypeScript. Selain itu, TypeScript memungkinkan Anda untuk mengimplementasikan antarmuka, konsep yang sebagian besar tidak berarti di dunia JavaScript.

Meskipun demikian, tidak ada fungsionalitas yang dapat Anda kodekan dalam TypeScript yang juga tidak dapat Anda kodekan dalam JavaScript. Itu karena TypeScript tidak dikompilasi dalam pengertian konvensional — cara, misalnya, C ++ dikompilasi menjadi biner yang dapat dieksekusi yang dapat berjalan pada perangkat keras yang ditentukan. Sebaliknya, compiler TypeScript mentranskode kode TypeScript menjadi JavaScript yang setara secara fungsional. Artikel dari Sean Maxwell di GitConnected ini memiliki beberapa contoh bagus cuplikan kode TypeScript berorientasi objek dan JavaScript yang setara. JavaScript yang dihasilkan kemudian dapat dijalankan di mana saja kode JavaScript dapat dijalankan, dari browser web ke server yang dilengkapi dengan Node.js.

Jadi jika TypeScript, pada akhirnya, hanyalah cara yang bagus untuk menghasilkan kode JavaScript, mengapa repot-repot melakukannya? Untuk menjawab pertanyaan itu, kita perlu melihat dari mana TypeScript berasal dan untuk apa digunakan.

Untuk apa TypeScript digunakan?

TypeScript dirilis sebagai open source pada tahun 2012 setelah dikembangkan dalam Microsoft. (Raksasa perangkat lunak tetap menjadi pengurus proyek dan pengembang utama.) Artikel ZDNet ini sejak saat itu menawarkan pandangan yang menarik tentang mengapa hal itu terjadi: “Ternyata salah satu motivasi terbesar adalah pengalaman tim lain di Microsoft yang mencoba untuk mengembangkan dan memelihara produk Microsoft dalam JavaScript. ”

Pada saat itu, Microsoft sedang mencoba untuk meningkatkan Bing Maps sebagai pesaing Google Maps, serta menawarkan versi web dari Office suite-nya — dan JavaScript adalah bahasa pengembangan utama untuk tugas tersebut. Tetapi para pengembang, pada dasarnya, merasa kesulitan untuk menulis aplikasi pada skala penawaran andalan Microsoft menggunakan JavaScript. Jadi, mereka mengembangkan TypeScript agar lebih mudah membangun aplikasi tingkat perusahaan untuk dijalankan di lingkungan JavaScript. Inilah semangat di balik semboyan untuk bahasa di situs resmi proyek TypeScript: "JavaScript that scale".

Mengapa TypeScript lebih baik untuk jenis pekerjaan ini daripada vanilla JavaScript? Yah, kita dapat berdebat selamanya tentang manfaat pemrograman berorientasi objek, tetapi kenyataannya adalah banyak pengembang perangkat lunak yang bekerja pada proyek perusahaan besar terbiasa dengannya, dan ini membantu dengan penggunaan ulang kode karena proyek berukuran besar. Anda juga tidak boleh mengabaikan sejauh mana perkakas dapat meningkatkan produktivitas pengembang. Seperti disebutkan, sebagian besar IDE perusahaan mendukung kompilasi inkremental latar belakang, yang dapat melihat kesalahan saat Anda bekerja. (Selama kode Anda benar secara sintaksis, kode tersebut akan tetap transparan, tetapi JavaScript yang dihasilkan mungkin tidak berfungsi dengan baik; anggaplah pemeriksaan kesalahan sama dengan pemeriksa ejaan.) IDE ini juga dapat membantu Anda memfaktor ulang kode saat Anda mempelajari lebih dalam. proyek.

Singkatnya, TypeScript digunakan ketika Anda menginginkan fitur dan alat perusahaan dari bahasa seperti Java, tetapi Anda memerlukan kode Anda untuk dieksekusi di lingkungan JavaScript. Secara teori, Anda dapat menulis JavaScript standar yang dibuat sendiri oleh compiler TypeScript, tetapi akan memakan waktu lebih lama dan basis kode akan lebih sulit bagi tim besar untuk secara kolektif memahami dan men-debug.

Oh, dan TypeScript memiliki trik rapi lainnya: Anda dapat mengatur kompiler untuk menargetkan lingkungan runtime JavaScript tertentu, browser, atau bahkan versi bahasa. Karena kode JavaScript yang terbentuk dengan baik juga merupakan kode TypeScript, Anda dapat, misalnya, mengambil kode yang ditulis ke spesifikasi ECMAScript 2015, yang menyertakan sejumlah fitur sintaksis baru, dan mengompilasinya ke dalam kode JavaScript yang akan sesuai dengan versi lama dari bahasa.

Pasang TypeScript

Siap untuk mulai bermain dengan TypeScript? Menginstal bahasa itu mudah. Jika Anda sudah menggunakan Node.js di mesin pengembangan, Anda dapat menggunakan NPM, pengelola paket Node.js, untuk menginstalnya. TypeScript resmi dalam tutorial 5 menit akan memandu Anda melalui prosesnya.

TypeScript juga dapat diinstal sebagai plug-in ke IDE pilihan Anda, yang akan memberi Anda keuntungan perkakas yang telah kita bicarakan di atas dan juga mengurus proses kompilasi TypeScript ke JavaScript. Sejak TypeScript dikembangkan oleh Microsoft, tidak mengherankan bahwa ada plug-in berkualitas tinggi yang tersedia untuk Visual Studio dan Visual Studio Code. Tetapi sebagai proyek sumber terbuka, TypeScript telah diadaptasi di mana-mana, mulai dari IDE sumber terbuka seperti Eclipse hingga editor teks terkemuka seperti Vim. Dan keseluruhan proyek dapat dilihat dan diunduh dari GitHub.

Sintaks TypeScript

Setelah TypeScript diinstal, Anda siap untuk mulai menjelajah, dan itu berarti memahami dasar-dasar sintaks TypeScript. Karena JavaScript adalah dasar dari TypeScript, Anda harus terbiasa dengan JavaScript sebelum Anda mulai. Tidak diragukan lagi, minat utama Anda adalah fitur khusus TypeScript yang membuat bahasanya unik; kami akan menyentuh poin-poin tinggi di sini.

Jenis TypeScript

Jelas fitur sintaksis yang paling penting dalam TypeScript adalah sistem tipe. Bahasa ini mendukung beberapa tipe dasar:

  • Boolean: Nilai benar / salah sederhana.
  • Angka: Dalam TypeScript, seperti dalam JavaScript, semua angka adalah nilai titik mengambang — tidak ada bilangan bulat yang terpisah. TypeScript mendukung literal desimal, heksadesimal, biner, dan oktal.
  • String: String data tekstual. Anda dapat menggunakan tanda kutip tunggal atau ganda untuk mengapit string Anda saat mengatur data. Anda juga dapat menggunakan backticks ( `) untuk mengelilingi string dengan beberapa baris, dan Anda dapat menyematkan ekspresi dalam string dengan sintaks ${ expr }.
  • Array dan tupel: Jenis ini memungkinkan Anda menyimpan banyak nilai dalam urutan tertentu. Dalam sebuah array, nilai-nilai individu semuanya dari tipe data yang sama, sedangkan dalam tupel bisa jadi heterogen. forEach()Metode TypeScript digunakan untuk memanggil fungsi pada setiap elemen dalam larik.
  • Enum: Seperti jenis nama yang sama di C #, enum TypeScript memungkinkan Anda menetapkan nama yang dapat dibaca manusia ke urutan nilai numerik.
  • Any: Ini adalah tipe untuk variabel di mana Anda tidak perlu tahu nilai apa yang akan dihasilkan sebelumnya — ini mungkin mengambil nilainya dari input pengguna atau pustaka pihak ketiga, misalnya.
  • Objek: Ini adalah tipe yang mewakili apapun yang bukan tipe primitif; itu penting untuk sifat berorientasi objek dari TypeScript.

Ada dua cara berbeda untuk menetapkan tipe secara eksplisit ke variabel. Yang pertama adalah sintaks kurung sudut:

let someValue: any;

biarkan strLength: number = (someValue) .length;

Dan yang kedua adalah assintaks:

let someValue: any = "ini adalah string";

let strLength: number = (someValue as string) .length;

Potongan kode ini, yang diambil dari dokumentasi TypeScript, secara fungsional sama. Keduanya didefinisikan someValuesebagai variabel jenis anydan menetapkan "this is a string"sebagai nilainya, kemudian mendefinisikan strLengthsebagai angka dan menetapkan sebagai nilai panjang isi someValue.

Jenis TypeScript juga dapat diatur dengan inferensi. Artinya, jika Anda menetapkan nilai x ke 7 tanpa menetapkan tipe x, kompilator akan menganggap x harus berupa angka. Dalam beberapa keadaan, kompilator dapat menyimpulkan suatu anytipe, meskipun Anda dapat menggunakan tanda kompilasi untuk memastikan bahwa tidak demikian.

Sistem tipe TypeScript cukup kaya dan melampaui cakupan artikel ini. Ada sejumlah tipe lanjutan dan utilitas; ini termasuk tipe gabungan, yang memungkinkan Anda untuk menetapkan bahwa variabel akan menjadi salah satu dari beberapa tipe yang ditentukan, dan tipe yang dipetakan, yang merupakan tipe yang dapat Anda buat berdasarkan tipe yang sudah ada, di mana Anda mengubah setiap properti dalam tipe yang ada menjadi sama cara. Misalnya, Anda dapat membuat tipe gabungan untuk variabel yang Anda inginkan berupa angka atau boolean, tetapi bukan string atau yang lainnya; atau Anda bisa membuat tipe yang dipetakan yang menyetel semua elemen dalam larik menjadi hanya baca.

Antarmuka TypeScript

Seperti kebanyakan bahasa berorientasi objek, TypeScript memiliki antarmuka, yang memungkinkan pengguna untuk menentukan tipenya sendiri. Antarmuka menetapkan properti yang dimiliki objek, bersama dengan tipe yang terkait dengan properti tersebut. Antarmuka TypeScript dapat memiliki properti opsional. Untuk lebih lanjut tentang sintaks, lihat dokumentasi TypeScript.  

TypeScript generik

TypeScript juga berbagi konsep generik dengan bahasa berorientasi objek seperti Java dan C #. (Fasilitas yang setara di C ++ disebut template.) Dalam TypeScript, komponen generik dapat bekerja pada berbagai jenis, bukan hanya satu, tergantung di mana dalam kode komponen tersebut dipanggil. Berikut adalah contoh yang sangat sederhana dari dokumentasi TypeScript. Pertama, pertimbangkan fungsi ini, yang mengambil argumen dan kemudian segera mengembalikannya:

identitas fungsi (arg: any): any {

    kembali arg;

}

Karena fungsi didefinisikan dengan anytipe, itu akan menerima argumen tipe apa pun yang Anda pilih untuk dilemparkan. Namun, apa yang dikembalikan akan menjadi anytipe. Berikut adalah versi fungsi yang menggunakan obat generik:

identitas fungsi (arg: T): T {

    kembali arg;

}

Kode ini menyertakan variabel tipeT , yang menangkap tipe dari argumen yang masuk dan menyimpannya untuk digunakan nanti.

Ada lebih banyak obat generik, yang merupakan kunci untuk membuat kode dapat digunakan kembali dalam proyek perusahaan besar. Lihat dokumentasi TypeScript untuk detailnya.

Kelas TypeScript 

Dalam pemrograman berorientasi objek, kelas mewarisi fungsionalitas, dan pada gilirannya berfungsi sebagai blok bangunan objek. JavaScript secara tradisional tidak menggunakan kelas, alih-alih mengandalkan fungsi dan pewarisan berbasis prototipe, tetapi konsep tersebut ditambahkan ke bahasa sebagai bagian dari versi standar ECMAScript 2015. Kelas telah menjadi bagian dari TypeScript, dan sekarang TypeScript menggunakan sintaks yang sama dengan JavaScript. Salah satu keuntungan dari compiler TypeScript adalah dapat mengubah kode dengan kelas JavaScript menjadi kode JavaScript lama yang sesuai dengan standar pra-2015.

Tanggal TypeScript

Ada sejumlah metode dan objek yang tersedia untuk mendapatkan dan menyetel tanggal dan waktu di TypeScript, sebagian besar diwarisi dari JavaScript. JavaTPoint memiliki ikhtisar yang bagus tentang cara kerjanya.

Tutorial TypeScript 

Siap masuk lebih dalam? Tingkatkan kecepatan dengan tutorial TypeScript ini:

  • TypeScript dalam 5 Menit akan memandu Anda melalui proses penginstalan TypeScript jika Anda belum melakukannya.
  • Tutorial Visual Studio Code ini menunjukkan bagaimana IDE benar-benar menambah produktivitas pengembangan TypeScript Anda.
  • Tutorial TypeScript untuk Pemula: The Missing Guide adalah pengantar yang sangat menyeluruh yang akan berguna bahkan jika Anda memiliki pengalaman JavaScript yang cukup terbatas.

Jika Anda ingin mempelajari cara menggunakan TypeScript dengan React, Pustaka JavaScript untuk membuat UI yang dikembangkan oleh Facebook, lihat Cara menggunakan TypeScript dengan React dan Redux dari Ross Bulat dan bagian tentang React dan webpack di dokumentasi TypeScript. Selamat belajar!