Hari ini, kita akan Mempelajari TypeScript Dalam 30 Menit melihat TypeScript, yang merupakan bahasa yang dapat dikompilasi menjadi JavaScript dan dirancang khusus untuk pengembang yang mengembangkan aplikasi besar dan kompleks.

TypeScript
Source : positronx.io

Ini mewarisi banyak konsep pemrograman dari bahasa seperti C# dan Java. Konsep ini menambahkan lebih banyak disiplin dan ketertiban ke JavaScript yang awalnya sangat santai dan tipe bebas.

Target audiens dari tutorial ini adalah mereka yang mahir dalam JavaScript, tetapi masih pemula dalam TypeScript. javascriptoo memperkenalkan sebagian besar pengetahuan dasar dan fungsi tombol, dan memberikan banyak contoh dengan kode komentar untuk membantu Anda memahami bahasa yang sebenarnya digunakan. Ayo mulai!

Source : tutorialzine.com

Manfaat Menggunakan TypeScript

JavaScript benar-benar bagus, Anda mungkin bertanya-tanya apakah saya benar-benar perlu belajar TypeScript? Secara teknis, Anda tidak perlu mempelajari TypeScript untuk menjadi pengembang yang baik, kebanyakan orang dapat melakukannya tanpa itu. Namun, menggunakan TypeScript pasti memiliki kelebihan :

  • Karena diketik secara statis, kode yang ditulis dalam TypeScript lebih dapat diprediksi dan umumnya lebih mudah untuk di-debug.
  • Berkat modul, ruang nama, dan dukungan OOP yang kuat, ini mempermudah pengaturan basis kode untuk aplikasi yang besar dan kompleks.
  • TypeScript memiliki langkah kompilasi untuk JavaScript yang dapat menangkap berbagai kesalahan sebelum mencapai runtime dan merusak beberapa konten.
  • Kerangka kerja Angular 2 yang akan datang ditulis dalam TypeScript dan disarankan agar pengembang menggunakan bahasa ini dalam proyek mereka.

Poin terakhir sebenarnya yang paling penting bagi banyak orang, dan itu adalah alasan utama mengapa mereka memasukkan TypeScript. Angular 2 saat ini merupakan salah satu kerangka kerja yang paling populer. Meskipun pengembang dapat menggunakan JavaScript biasa di dalamnya, sebagian besar tutorial dan contoh ditulis dalam TS. Saat Angular 2 memperluas komunitasnya, semakin banyak orang secara alami akan memilih TypeScript.

Data dari Google Trends menunjukkan bahwa popularitas TypeScript telah meningkat baru-baru ini.

Pasang TypeScript

Tutorial ini membutuhkan Node.js dan Npm. Jika Anda belum menginstalnya, silakan buka di sini.

Cara termudah untuk mengatur TypeScript adalah melalui npm. Dengan menggunakan perintah berikut, kita dapat menginstal paket TypeScript secara global sehingga compiler TS dapat digunakan di semua proyek kita :

npm install -g typescript

Cobalah untuk membuka terminal di mana saja dan jalankan tsc -v untuk melihat apakah sudah terpasang dengan benar.

tsc -v
Version 1.8.10

Editor Teks Dengan Dukungan TypeScript

TypeScript adalah proyek open source, tetapi dikembangkan dan dikelola oleh Microsoft, jadi awalnya hanya didukung di platform Visual Studio Microsoft. Saat ini, ada banyak editor teks dan IDE yang disediakan oleh mesin atau melalui plugin yang menyediakan dukungan untuk sintaks TypeScript, saran penyelesaian otomatis, penangkapan kesalahan, dan bahkan kompiler bawaan.

  • Visual Studio Code-Microsoft adalah editor kode sumber terbuka ringan lainnya. Dukungan TypeScript bawaan.
  • Plugin gratis resmi Sublime Text.
  • Versi terbaru WebStorm dilengkapi dengan dukungan bawaan.
  • Lainnya, termasuk Vim, Atom, Emacs, dll.

Kompilasi Ke JavaScript

TypeScript ditulis dalam file .ts (untuk JSX ditulis dalam .tsx), ini tidak dapat digunakan secara langsung di browser dan perlu diubah ke .js biasa terlebih dahulu. Proses kompilasi dapat dilakukan dengan berbagai cara :

  • Gunakan alat baris perintah tsc yang disebutkan di atas di terminal.
  • Langsung di Visual Studio atau IDE dan editor teks lainnya.
  • Jalankan program menggunakan tugas otomatis, seperti gulp.

Kami menemukan bahwa cara pertama adalah yang termudah dan paling ramah pemula, jadi inilah cara yang akan kami gunakan dalam pelajaran ini.

Baca Juga : Tips Membuat Gambar Zoom Vanilla JavaScript

Perintah berikut mendapatkan file TypeScript bernama main.ts dan mengubahnya menjadi versi JavaScript main.js. Jika main.js sudah ada, itu akan ditimpa.

tsc main.ts

Kami juga dapat mengkompilasi banyak file sekaligus dengan membuat daftar semua file atau menerapkan wildcard :

# Will result in separate .js files: main.js worker.js.
tsc main.ts worker.ts    

# Compiles all .ts files in the current folder. Does NOT work recursively.
tsc *.ts

Setelah melakukan perubahan, kita juga dapat menggunakan opsi –watch untuk secara otomatis mengkompilasi file TypeScript:

# Initializes a watcher process that will keep main.js up to date.
tsc main.ts --watch

Pengguna TypeScript yang lebih mahir juga dapat membuat file tsconfig.json, yang terdiri dari berbagai pengaturan build. Saat menangani proyek besar dengan sejumlah besar file .ts, file konfigurasi sangat nyaman karena dapat menyelesaikan proses secara otomatis. Anda dapat membaca lebih lanjut tentang tsconfig.json dalam dokumentasi TypeScript.

Pengetikan Statis

Fitur TypeScript yang sangat unik adalah dukungan untuk pengetikan statis. Ini berarti Anda dapat mendeklarasikan tipe variabel, dan compiler akan memastikan bahwa variabel tersebut tidak diberi tipe nilai yang salah. Jika Anda menghilangkan deklarasi tipe, deklarasi tersebut akan disimpulkan secara otomatis dari kode Anda.

Ini sebuah contoh. Variabel, parameter fungsi, atau nilai kembalian apa pun dapat ditentukan pada saat inisialisasi :

var burger: string = 'hamburger',     // String 
    calories: number = 300,           // Numeric
    tasty: boolean = true;            // Boolean

// Alternatively, you can omit the type declaration:
// var burger = 'hamburger';

// The function expects a string and an integer.
// It doesn't return anything so the type of the function itself is void.

function speak(food: string, energy: number): void {
  console.log("Our " + food + " has " + energy + " calories.");
}

speak(burger, calories);

Karena TypeScript telah dikompilasi ke JavaScript, dan yang terakhir tidak tahu jenisnya, itu dihapus sepenuhnya:

// JavaScript code from the above TS example.

var burger = 'hamburger',
    calories = 300, 
    tasty = true; 

function speak(food, energy) {
    console.log("Our " + food + " has " + energy + " calories.");
}

speak(burger, calories);

Namun, jika kita mencoba melakukan sesuatu yang ilegal, pada waktu kompilasi, tsc akan memperingatkan kita bahwa ada kesalahan dalam kode. Misalnya:

// The given type is boolean, the provided value is a string.
var tasty: boolean = "I haven't tried it yet";
main.ts(1,5): error TS2322: Type 'string' is not assignable to type 'boolean'.

Jika kita mengirimkan parameter yang salah ke fungsi tersebut, itu juga akan memperingatkan kita:

function speak(food: string, energy: number): void{
  console.log("Our " + food + " has " + energy + " calories.");
}

// Arguments don't match the function parameters.
speak("tripple cheesburger", "a ton of");
main.ts(5,30): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Berikut ini adalah beberapa tipe data yang paling umum digunakan:

  • Nilai Angka-Semua diwakili oleh tipe angka, dan tidak ada definisi terpisah untuk bilangan bulat, angka floating-point atau bentuk lainnya.
  • Jenis teks string, seperti string JS biasa, dapat diapit dengan “tanda kutip tunggal” atau “tanda kutip ganda”.
  • Nilai Boolean-true atau false, menggunakan 0 dan 1 akan menyebabkan kesalahan kompilasi.
  • Variabel-arbitrer dengan tipe ini dapat memiliki nilai yang disetel ke string, angka, atau nilai lainnya.
  • Array-Ada dua kemungkinan sintaks: my_arr: number[];; atau my_arr: Array<number>.
  • Tidak valid digunakan untuk fungsi yang tidak mengembalikan apa pun.

Untuk melihat daftar semua jenis yang tersedia, buka dokumentasi resmi TypeScript.

Antarmuka

Antarmuka digunakan untuk memeriksa apakah suatu objek sesuai dengan struktur tertentu. Dengan mendefinisikan antarmuka, kita dapat menamai kombinasi variabel tertentu untuk memastikan bahwa mereka selalu bersama. Saat dikonversi ke JavaScript, antarmuka menghilang – satu-satunya tujuan mereka adalah membantu selama fase pengembangan.

Baca Juga : Pengertian Framework Rails & Ruby

Dalam contoh berikut, kami mendefinisikan antarmuka sederhana untuk memeriksa tipe parameter fungsi :

// Here we define our Food interface, its properties, and their types.
interface Food {
    name: string;
    calories: number;
}

// We tell our function to expect an object that fulfills the Food interface. 
// This way we know that the properties we need will always be available.
function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " calories.");
}

// We define an object that has all of the properties the Food interface expects.
// Notice that types will be inferred automatically.
var ice_cream = {
  name: "ice cream", 
  calories: 200
}

speak(ice_cream);

Urutan atribut tidak menjadi masalah. Kita hanya perlu menampilkan atribut yang diperlukan dan menjadikannya tipe yang benar. Jika ada yang kurang, jenisnya salah atau namanya berbeda, kompilator akan mewarnainya untuk kita.

interface Food {
    name: string;
    calories: number;
}

function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " grams.");
}

// We've made a deliberate mistake and name is misspelled as nmae.
var ice_cream = {
  nmae: "ice cream", 
  calories: 200
}

speak(ice_cream);
main.ts(16,7): error TS2345: Argument of type '{ nmae: string; calories: number; } 
is not assignable to parameter of type 'Food'. 
Property 'name' is missing in type '{ nmae: string; calories: number; }'.

Ini adalah panduan pemula, jadi kami tidak akan membahas lebih detail tentang antarmuka. Namun, selain yang kami sebutkan di sini, mereka memiliki banyak hal lain, jadi kami menyarankan Anda memeriksa dokumentasi TypeScript di sini.

Saat membangun aplikasi besar, gaya pemrograman berorientasi objek adalah pilihan pertama banyak pengembang, terutama dalam bahasa seperti Java atau C #. TypeScript menyediakan sistem kelas yang sangat mirip dengan bahasa ini, termasuk pewarisan, kelas abstrak, implementasi antarmuka, penyetel / pengambil, dll.

Perlu disebutkan bahwa sejak pembaruan JavaScript terbaru (ECMAScript 2015), kelas melekat pada Vanilla JS dan dapat digunakan tanpa TypeScript. Kedua implementasi sangat mirip, tetapi ada perbedaan, TypeScript lebih ketat.

Melanjutkan tema makanan, ini adalah kelas TypeScript sederhana :

class Menu {
  // Our properties:
  // By default they are public, but can also be private or protected.
  items: Array<string>;  // The items in the menu, an array of strings.
  pages: number;         // How many pages will the menu be, a number.

  // A straightforwards constructor. 
  constructor(item_list: Array<strings>, total_pages: numbers) {
    // The this keyword is mandatory.
    this.items = item_list;    
    this.pages = total_pages;
  }

  // Methods
  list(): void {
    console.log("Our menu for today:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }
  }

} 

// Create a new instance of the Menu class.
var sundayMenu = new Menu(["pancakes","waffles","orange juice"], 1);

// Call the list method.
sundayMenu.list();

Siapapun yang telah menulis setidaknya sedikit Java atau C # harus mengetahui sintaks ini. Hal yang sama berlaku untuk warisan :

class HappyMeal extends Menu {
  // Properties are inherited

  // A new constructor has to be defined.
  constructor(item_list: Array<string>, total_pages: number) {
    // In this case we want the exact same constructor as the parent class (Menu), 
    // To automatically copy it we can call super() - a reference to the parent's constructor.
    super(item_list, total_pages);
  }

  // Just like the properties, methods are inherited from the parent.
  // However, we want to override the list() function so we redefine it.
  list(): void{
    console.log("Our special menu for children:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }

  }
}

// Create a new instance of the HappyMeal class.
var menu_for_children = new HappyMeal(["candy","drink","toy"], 1);

// This time the log message will begin with the special introduction.
menu_for_children.list();

Untuk mempelajari lebih lanjut tentang kelas-kelas di TS, Anda dapat membaca dokumentasi di sini.

Generik adalah templat yang memungkinkan fungsi yang sama menerima berbagai jenis parameter. Menggunakan generik untuk membuat komponen yang dapat digunakan kembali lebih baik daripada menggunakan tipe data apa pun, karena generik mempertahankan tipe variabel yang masuk dan keluar darinya.

Contoh sederhananya adalah skrip yang mengambil parameter dan mengembalikan array yang berisi parameter yang sama.

// The <T> after the function name symbolizes that it's a generic function.
// When we call the function, every instance of T will be replaced with the actual provided type.

// Receives one argument of type T,
// Returns an array of type T.

function genericFunc<T>(argument: T): T[] {    
  var arrayOfT: T[] = [];    // Create empty array of type T.
  arrayOfT.push(argument);   // Push, now arrayOfT = [argument].
  return arrayOfT;
}

var arrayFromString = genericFunc<string>("beep");
console.log(arrayFromString[0]);         // "beep"
console.log(typeof arrayFromString[0])   // String

var arrayFromNumber = genericFunc(42);
console.log(arrayFromNumber[0]);         // 42
console.log(typeof arrayFromNumber[0])   // number

Saat memanggil fungsi ini untuk pertama kalinya, kami secara manual mengatur tipe menjadi string. Ini tidak perlu, karena kompilator dapat melihat parameter apa yang telah diteruskan dan secara otomatis dapat menentukan tipe mana yang terbaik untuknya, misalnya pada panggilan kedua.

Meskipun ini tidak wajib, ini dianggap sebagai praktik yang baik untuk menyediakan tipe setiap saat, karena dalam situasi yang lebih kompleks, compiler mungkin tidak dapat menebak tipe yang benar.

Dokumentasi TypeScript menyertakan beberapa contoh lanjutan, termasuk kelas generik, menggabungkannya dengan antarmuka, dan banyak lagi. Anda dapat menemukannya di sini.

Modul

Konsep penting lainnya pada aplikasi besar adalah modularitas. Dibandingkan dengan membagi satu kode menjadi file yang terdiri dari 10.000 baris, membagi kode menjadi banyak komponen kecil yang dapat digunakan kembali dapat membantu proyek Anda tetap teratur dan mudah dipahami.

TypeScript memperkenalkan sintaks untuk mengekspor dan mengimpor modul, tetapi tidak dapat menangani koneksi aktual antar file. Untuk mengaktifkan modul eksternal, TS mengandalkan pustaka pihak ketiga: require.js untuk aplikasi browser dan CommonJS untuk Node.js. Mari kita lihat contoh sederhana modul TypeScript dengan require.js:

Kami akan memiliki dua file. Satu mengekspor fungsi, yang lain mengimpor dan memanggilnya.

exporter.ts

var sayHi = function(): void {
    console.log("Hello!");
}

export = sayHi;

importer.ts

import sayHi = require('./exporter');
sayHi();

Sekarang, kita perlu mendownload require.js dan memasukkannya ke dalam script tag-click di sini. Langkah terakhir adalah mengkompilasi dua file .ts kita. Berbeda dengan modul CommonJS, parameter tambahan perlu ditambahkan untuk memberi tahu TypeScript bahwa kami sedang membangun modul untuk require.js (juga dikenal sebagai AMD).

tsc --module amd *.ts

Modulnya sangat kompleks dan berada di luar cakupan tutorial ini. Jika Anda ingin terus membaca tentang mereka, silakan kunjungi dokumentasi TS-di sini.

File deklarasi pihak ketiga

Saat menggunakan pustaka yang awalnya dirancang untuk JavaScript biasa, kita perlu menerapkan file deklarasi agar pustaka tersebut kompatibel dengan TypeScript. Ekstensi file deklarasi adalah .d.ts, yang berisi berbagai informasi tentang library dan API-nya.

File deklarasi TypeScript biasanya ditulis dengan tangan, tetapi sangat mungkin bahwa perpustakaan yang Anda butuhkan sudah memiliki .d.ts. File dibuat oleh orang lain. Absolute Type adalah repositori publik terbesar, yang berisi lebih dari seribu file perpustakaan. Ada juga modul Node.js yang populer untuk mengelola definisi TypeScript, yang disebut Pengetikan.

Jika Anda masih perlu menulis file deklarasi Anda sendiri, panduan ini akan membantu Anda memulai.

Fitur yang akan datang di TypeScript 2.0

TypeScript masih dalam pengembangan aktif dan terus berkembang. Pada saat menulis tutorial ini, versi LTS adalah 1.8.10, tetapi Microsoft telah merilis TypeScript 2.0 Beta. Ini dapat digunakan untuk pengujian publik, Anda dapat mencobanya sekarang:

npm install -g typescript@beta

Ini memperkenalkan beberapa konsep baru yang nyaman, seperti :

  • Bendera jenis bukan-nol dapat mencegah nilai variabel tertentu disetel ke nol atau tidak ditentukan.
  • Sistem yang baru diperbaiki bisa langsung mendapatkan file deklarasi melalui instalasi npm.
  • Analisis tipe aliran kontrol dapat menangkap kesalahan yang sebelumnya terlewatkan oleh penyusun.
  • Beberapa inovasi dalam sintaks modul ekspor / impor.

Fitur lain yang telah lama ditunggu adalah kemampuan untuk mengontrol aliran fungsi asinkron di blok async / await. Ini harus tersedia dalam pembaruan 2.1 mendatang.

Bacaan lebih lanjut

Awalnya, jumlah informasi dalam dokumen resmi mungkin sedikit berlebihan, namun manfaat yang didapat darinya akan sangat besar. Tutorial kami akan digunakan sebagai pengantar, jadi kami tidak membahas semua bab dalam dokumentasi TypeScript. Berikut adalah beberapa konsep yang lebih berguna yang telah kami lewatkan:

  • Namespace.
  • Pencacahan.
  • Perlindungan tipe dan tipe lanjutan.
  • Menulis JSX di TypeScript.

Kesimpulannya

Semoga Anda menikmati tutorial ini!

Apakah Anda memiliki pemikiran tentang TypeScript? Apakah Anda mempertimbangkan untuk menggunakannya dalam proyek Anda? Jangan ragu untuk berkomentar di bawah ini!