TypeScript vs. JavaScript: Pahami perbedaannya

World Wide Web pada dasarnya berjalan pada JavaScript, HTML, dan CSS. Sayangnya, JavaScript kekurangan beberapa fitur yang akan membantu pengembang menggunakannya untuk aplikasi skala besar. Masukkan TypeScript.

Apa itu JavaScript?

JavaScript dimulai sebagai bahasa skrip untuk browser web Netscape Navigator; Brendan Eich menulis prototipe tersebut selama 10 hari pada tahun 1995. Nama JavaScript adalah anggukan dari bahasa Java Sun Microsystem, meskipun kedua bahasa tersebut sangat berbeda, dan kesamaan nama telah menyebabkan kebingungan yang signifikan selama bertahun-tahun. JavaScript, yang telah berkembang secara signifikan, sekarang didukung di semua browser web modern.

Pengenalan JavaScript sisi klien di Netscape Navigator dengan cepat diikuti dengan pengenalan JavaScript sisi server di server web Netscape Enterprise Server dan Microsoft IIS. Sekitar 13 tahun kemudian, Ryan Dahl memperkenalkan Node.js sebagai open source, lintas platform, lingkungan runtime JavaScript yang tidak bergantung pada browser atau server web apa pun.

Bahasa JavaScript

JavaScript adalah bahasa multi-paradigma. Ini memiliki sintaks kurung kurawal dan titik koma, seperti keluarga bahasa C. Ini memiliki pengetikan dinamis yang lemah dan diinterpretasikan atau (lebih sering) dikompilasi tepat waktu. Secara umum, JavaScript adalah single-threaded, meskipun ada Web Workers API yang melakukan multithreading, dan ada peristiwa, panggilan fungsi asinkron, dan callback.

JavaScript mendukung pemrograman berorientasi objek menggunakan prototipe daripada pewarisan kelas yang digunakan di C ++, Java, dan C #, meskipun classsintaks ditambahkan ke JavaScript ES6 pada 2015. JavaScript juga mendukung pemrograman fungsional termasuk closures, rekursi, dan lambda (fungsi anonim).

Sebelum JavaScript ES6, bahasa tersebut tidak memiliki pengoptimalan panggilan ekor; sekarang ia melakukannya, meskipun Anda perlu mengaktifkan mode ketat ( 'use strict') untuk mengaktifkannya, dan penerapannya bervariasi dari satu peramban ke peramban lainnya. Mode ketat juga mengubah semantik JavaScript, dan mengubah beberapa kesalahan yang biasanya diam menjadi kesalahan.

Ada apa dengan sebutan "ES6"? Nama untuk bahasa JavaScript standar adalah ECMAScript (ES), setelah badan standar Internasional ECMA; ES6 juga disebut ECMAScript 2015 (ES2015). ES2020 saat ini merupakan standar draf.

Sebagai contoh sederhana untuk memberi Anda cita rasa bahasa JavaScript, berikut beberapa kode untuk memutuskan apakah itu siang atau malam dan secara dinamis menempatkan salam yang sesuai ke dalam elemen web bernama yang ditemukan di objek dokumen browser:

var hour = new Date (). getHours ();

salam var;

jika (jam <18) {

  salam = "Selamat siang";

} lain {

  salam = "Selamat malam";

}

document.getElementById ("demo"). innerHTML = salam;

Ekosistem JavaScript

Ada banyak JavaScript API. Beberapa disediakan oleh browser, seperti documentAPI pada kode yang ditunjukkan di atas, dan beberapa disediakan oleh pihak ketiga. Beberapa API berlaku untuk penggunaan sisi klien, beberapa untuk penggunaan sisi server, beberapa untuk penggunaan desktop, dan beberapa untuk lebih dari satu lingkungan.

API browser mencakup model objek dokumen (DOM) dan model objek browser (BOM), Geolokasi, Canvas (grafik), WebGL (grafik yang dipercepat GPU), HTMLMediaElement (audio dan video), dan WebRTC (komunikasi waktu nyata).

API pihak ketiga berlimpah. Beberapa merupakan antarmuka ke aplikasi lengkap, seperti Google Maps. Lainnya adalah utilitas yang membuat pemrograman JavaScript HTML5 dan CSS lebih mudah, seperti jQuery. Beberapa, seperti Express, adalah kerangka kerja aplikasi untuk tujuan tertentu; untuk Express, tujuannya adalah untuk membangun server aplikasi web dan seluler di Node.js. Sejumlah kerangka kerja lain telah dibangun di atas Express. Pada tahun 2016, saya membahas 22 kerangka kerja JavaScript dalam upaya untuk memahami apa yang menjadi kebun binatang; banyak dari kerangka kerja ini masih ada dalam satu bentuk atau lainnya, tetapi beberapa telah berlalu.

Ada lebih banyak modul JavaScript, lebih dari 300.000. Untuk mengatasinya, kami menggunakan manajer paket , seperti npm, manajer paket default untuk Node.js.

Salah satu alternatif untuk npm adalah Yarn, yang berasal dari Facebook, dan mengklaim keuntungan dari pemasangan deterministik. Alat serupa termasuk Bower (dari Twitter), yang mengelola komponen front-end daripada modul Node; Ender, yang menyebut dirinya adik perempuan npm; dan jspm, yang menggunakan modul ES (standar ECMA yang lebih baru untuk modul), daripada modul CommonJS, standar de-facto lama yang didukung oleh npm.

Webpack menggabungkan modul JavaScript menjadi aset statis untuk browser. Browserify memungkinkan pengembang untuk menulis modul gaya Node.js yang dikompilasi untuk digunakan di browser. Grunt adalah runner tugas JavaScript berorientasi file, dan gulp adalah sistem build streaming dan runner tugas JavaScript. Pilihan antara grunt dan teguk tidaklah menentukan. Saya telah menginstal dan menggunakan mana pun yang disiapkan untuk proyek tertentu.

Untuk membuat kode JavaScript lebih dapat diandalkan tanpa adanya kompilasi, kami menggunakan linters. Istilah ini berasal dari alat lint bahasa C, yang merupakan utilitas Unix standar. Linter JavaScript termasuk JSLint, JSHint, dan ESLint. Anda dapat mengotomatiskan linter yang sedang berjalan setelah perubahan kode menggunakan runner tugas atau IDE Anda. Sekali lagi, pilihan di antara linters tidak jelas, dan saya menggunakan yang mana pun yang disiapkan untuk proyek tertentu.

Berbicara tentang editor dan IDE, saya telah meninjau 6 JavaScript IDE dan 10 editor JavaScript, paling baru di tahun 2019. Pilihan teratas saya adalah Sublime Text (editor sangat cepat), Visual Studio Code (editor yang dapat dikonfigurasi / IDE), dan WebStorm (IDE).

Transpiler memungkinkan Anda menerjemahkan beberapa bahasa lain seperti CoffeeScript atau TypeScript ke JavaScript, dan menerjemahkan JavaScript modern (seperti kode ES2015) ke JavaScript dasar yang berjalan di (hampir) semua browser. (Semua taruhan dibatalkan untuk versi awal Internet Explorer.) Transpiler yang paling umum untuk JavaScript modern adalah Babel.

Apa itu TypeScript?

TypeScript adalah superset dari JavaScript yang dikompilasi ke JavaScript biasa (ES3 atau lebih tinggi; itu dapat dikonfigurasi). Kompiler baris perintah TypeScript open source dapat diinstal sebagai paket Node.js. Dukungan TypeScript hadir dengan Visual Studio 2017 dan Visual Studio 2019, Visual Studio Code, dan WebStorm, dan dapat ditambahkan ke Sublime Text, Atom, Eclipse, Emacs, dan Vim. Compiler / transpiler tsc TypeScript ditulis dalam TypeScript.

TypeScript menambahkan jenis, kelas, dan modul opsional ke JavaScript, dan mendukung alat untuk aplikasi JavaScript skala besar untuk browser apa pun, untuk semua host, di OS apa pun. Di antara banyak keuntungan lain untuk TypeScript, kerangka kerja Angular yang populer telah dirubah dalam TypeScript.

Jenis memungkinkan pengembang JavaScript untuk menggunakan alat dan praktik pengembangan yang sangat produktif seperti pemeriksaan statis dan pemfaktoran ulang kode saat mengembangkan aplikasi JavaScript.

Jenis bersifat opsional, dan jenis inferensi memungkinkan beberapa penjelasan jenis membuat perbedaan besar pada verifikasi statis kode Anda. Jenis memungkinkan Anda menentukan antarmuka antara komponen perangkat lunak dan mendapatkan wawasan tentang perilaku pustaka JavaScript yang ada.

TypeScript menawarkan dukungan untuk fitur JavaScript terbaru dan berkembang, termasuk yang dari ECMAScript 2015 dan proposal masa depan, seperti fungsi asinkron dan dekorator, untuk membantu membangun komponen yang kuat.

Bahasa TypeScript

Bahasa TypeScript menerima JavaScript sebagai valid, tetapi menawarkan opsi tambahan dari anotasi tipe, pemeriksaan tipe pada waktu kompilasi, kelas, dan modul. Semua ini sangat berguna saat Anda mencoba membuat perangkat lunak yang tangguh. JavaScript biasa menghasilkan kesalahan hanya pada waktu proses, dan kemudian hanya jika program Anda kebetulan mencapai jalur dengan kesalahan.

Tutorial TypeScript dalam 5 menit memperjelas manfaatnya. Titik awalnya adalah JavaScript murni dengan ekstensi .ts:

function greeter (person) {

  mengembalikan "Halo," + orang;

}

biarkan pengguna = "Pengguna Jane";

document.body.textContent = penyapa (pengguna);

Jika Anda mengkompilasi ini dengan tsc, ini akan menghasilkan file yang identik dengan ekstensi .js.

Tutorial ini meminta Anda mengubah kode ini secara bertahap, menambahkan anotasi tipe person:stringdalam definisi fungsi, menyusun, menguji jenis pemeriksaan oleh kompilator, menambahkan antarmuka untuk suatu persontipe, dan akhirnya menambahkan kelas untuk Student. Kode terakhirnya adalah:

kelas Mahasiswa {

    fullName: string;

    konstruktor (public firstName: string, public middleInitial: string,

        public lastName: string) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

interface Person {

    firstName: string;

    lastName: string;

}

function greeter (person: Person) {

    return "Hello," + person.firstName + "" + person.lastName;

}

let user = new Student ("Jane", "M.", "User");

document.body.textContent = penyapa (pengguna);

Saat Anda mengkompilasi ini dan melihat JavaScript yang dipancarkan, Anda akan melihat bahwa kelas di TypeScript hanyalah singkatan dari warisan berbasis prototipe yang sama yang digunakan dalam JavaScript ES3 biasa. Perhatikan bahwa properti person.firstNamedan person.lastNamesecara otomatis dihasilkan oleh kompilator ketika melihat publicatributnya di Studentkonstruktor kelas, dan juga dibawa ke Personantarmuka. Salah satu manfaat terbaik dari anotasi tipe di TypeScript adalah bahwa mereka dikenali oleh alat, seperti Visual Studio Code:

Jika ada kesalahan dalam kode saat Anda mengedit di VS Code, Anda akan melihat pesan kesalahan di tab Masalah, misalnya berikut ini jika Anda menghapus akhir baris dengan contoh Student:

Tutorial Migrasi dari JavaScript menjelaskan secara detail tentang cara meningkatkan proyek JavaScript yang ada. Melompati langkah-langkah penyiapan, inti dari metode ini adalah mengganti nama file .js Anda menjadi .ts satu per satu. (Jika file Anda menggunakan JSX, ekstensi yang digunakan oleh React, Anda harus mengganti namanya menjadi .tsx daripada .ts.) Kemudian perkuat pemeriksaan kesalahan dan perbaiki kesalahan.

Antara lain, Anda perlu mengubah berbasis modul require()atau define()pernyataan ke pernyataan impor TypeScript dan menambahkan file deklarasi untuk setiap modul perpustakaan yang Anda gunakan. Anda juga harus menulis ulang ekspor modul Anda menggunakan exportpernyataan TypeScript . TypeScript mendukung modul CommonJS, seperti yang dilakukan Node.js.

Jika Anda mendapatkan kesalahan tentang jumlah argumen yang salah, Anda dapat menulis tanda tangan overload fungsi TypeScript. Itu adalah fitur penting yang tidak dimiliki JavaScript. Terakhir, Anda harus menambahkan tipe ke fungsi Anda sendiri, dan jika sesuai, gunakan antarmuka atau kelas.

Anda biasanya tidak perlu menulis file deklarasi Anda sendiri untuk pustaka JavaScript domain publik. DefinitelyTyped adalah repositori file deklarasi, yang semuanya dapat diakses menggunakan npm. Anda dapat menemukan deklarasi tersebut menggunakan halaman TypeSearch.

Setelah Anda mengonversi semua file JavaScript Anda ke TypeScript, meningkatkan tipe, dan menghilangkan kesalahan, Anda akan memiliki basis kode yang jauh lebih kuat. Daripada terus-menerus memperbaiki kesalahan waktu proses yang dilaporkan oleh penguji atau pengguna, Anda akan dapat mendeteksi kesalahan paling umum secara statis.

Ada baiknya menonton Anders Hejlsberg mendiskusikan TypeScript. Seperti yang akan Anda dengar darinya, TypeScript adalah JavaScript yang berskala.