TypeScript Versi 4.0 Beta Sudah Tiba!

Hi Coders! hari ini penulis akan sedikit mengintip tentang update dari TypeScript versi 4.0 beta yang rilis pada 25 Juni 2020 lalu. Dengan dirilisnya versi beta ini kita memulai langkah pertama kita menuju versi 4.0. Meskipun versi baru, TypeScript versi 4.0 tidak memiliki perubahan besar dari biasanya. Jadi mari kita lihat apa saja yang baru di versi ini.

Labeled Tuple Elements

Fitur bahasa ini mengubah cara tupel didefinisikan. Sebelumnya, tupel didefinisikan sebagai berikut:

function tuple(...args: [string, number]): void {
    // ...
}

Contoh di atas tidak ada nama parameter untuk elemen pertama dan kedua. Meskipun ini tidak berdampak pada pemeriksaan tipe, kurangnya label pada posisi tupel dapat membuatnya lebih sulit untuk digunakan dan lebih sulit pula untuk mengkomunikasikan maksud kita.

Sebagai solusinya Typescript versi 4.0 kita dapat menggunakan tupel dengan label.

type Segment = [length: number, count: number];

Tetapi jika kita akan memberi label pada sebuah elemen, kita harus memberi label pada semua elemennya yang ada pada tupel. Jika tidak, kita akan menerima pesan error.

type Segment = [first: string, number];
//                    ~~~~~~
// error! Tuple members must all have names or all not have names.

Class Property Inference From Constructors

Jika kita mengkonfigurasi TypesSript dalam mode noImplicitAny, TypeScript 4.0 bisa menggunakan analisis control flow untuk menentukan jenis properti dalam class.

class Test {
    x;
    constructor(b: boolean){
      if(b){
        this.x = 'hello'
      } else {
        this.x = 42;
      }
    }
}

Di versi TypeScript sebelumnya, kode diatas akan menghasilkan error. Tapi di versi 4.0 akan tercomplie dan TypeScript akan menyimpulkan tipe x menjadi string atau angka.

Short-Circuiting Assignment Operators

Kamu pasti pernah melihat operator penugasan majemuk dalam banyak bahasa. Operator penugasan majemuk menerapkan operator ke dua argumen dan kemudian menetapkan hasilnya ke sisi kiri. Berikut beberapa contohnya:

// Addition
// a = a + b
a  +=  b;

// Subtraction
// a = a - b
a  -=  b;

// Multiplication
// a = a * b
a *= b;

// Division
// a = a / b
a /= b;

Tetapi ada tiga pengecualian penting: operator logika and (&&), operator logika or (||), dan penggabungan null (??). TypeScript siap untuk mengisi celah ini dengan dirilisnya versi 4.0. Dan mereka memiliki proposal yang menjanjikan untuk menambahkan tiga operator tugas baru: &&=, ||=, and ??=.

a ||= b;
// This will be equal to
a || (a = b);

Unknown on catch Clause Bindings

Dari awal adanya TypeScript variabel catch clause selalu diketik sebagai any, yang berarti TypeScript memungkinkan kita melakukan apapun yang kita inginkan.

try {
  throw 20;
} catch (err) {
  console.error(err.specialFunction());
}

Pada contoh di atas jenis kesalahannya adalah any dan itu tidaklah aman. Itulah mengapa TypeScript 4.0 sekarang memungkinkan kita untuk menentukan jenis variabel catch clause sebagai unknown. unknown lebih aman daripada any karena itu mengingatkan kita bahwa perlu melakukan beberapa jenis pemeriksaan tipe sebelum mengoperasikan nilai.

try  {
  throw  20;
}  catch  (err: unknown)  {
  if(err  instanceof  SpecialError){  console.error(err.specialFunction());
  }  else  {
    …
  }
}

Custom JSX Factories

Pada TypeScript 4.0 pengguna dapat menyesuaikan fragment factory melalui opsi jsxFragmentFactory yang baru. Sebagai contoh, file tsconfig.json berikut memberi tahu TypeScript untuk mengubah JSX dengan cara yang kompatibel dengan React tetapi mengalihkan setiap pemanggilan ke h daripada React.createElement, dan menggunakan Fragment sebagai ganti React.Fragment.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

Speed Improvements in Build Mode With --noEmitOnError

Pada versi sebelumnya mengompilasi program setelah kompilasi sebelumnya dengan kesalahan di bawah --incremental akan sangat lambat saat menggunakan tanda --noEmitOnError, karena tidak ada informasi dari kompilasi terakhir yang akan di-cache dalam file .tsbuildinfo berdasarkan flag --noEmitOnError. Pada TypeScript 4.0 ini telah diubah dan sekarang kita akan mendapatkan peningkatan kecepatan yang luar biasa dalam skenario tersebut.

Editor Improvements

Compiler TypeScript tidak hanya memberdayakan pengalaman pengeditan untuk TypeScript itu sendiri di sebagian besar editor utamanya. Akan tetapi ia juga mendukung pengalaman JavaScript dalam keluarga editor Visual Studio dan masih banyak lagi. Kita dapat memeriksa sebagian daftar editor yang memiliki dukungan untuk Typescript untuk mempelajari lebih lanjut tentang apakah editor favorit kita memiliki dukungan untuk menggunakan versi baru.

Selain itu dukungan editing TypeScript sekarang dapat mengenali saat deklarasi telah ditandai dengan komentar JSDoc / ** @deprecated *.

Mode editing parsial saat memulai adalah fitur eksperimental lain yang telah disertakan dalam TypeScript 4.0. Mereka mengatakan bahwa ini akan menjadi solusi untuk waktu loading yang lambat di banyak proyek. Mode baru untuk editor ini akan memberikan pengalaman parsial hingga pengalaman layanan bahasa berhasil dimuat semua.

Saat ini satu-satunya editor yang mendukung mode ini adalah Visual Studio Code Insiders. Kita dapat mencobanya dengan mengikuti langkah-langkah berikut.

1. Instal Visual Studio Code Insiders

2. Konfigurasi Visual Studio Code Insiders untuk menggunakan versi beta atau instal JavaScript dan TypeScript Nightly Extension untuk Visual Studio Code Insiders

3. Buka pengaturan pada JSON: > Preferences: Open Settings (JSON)

4. Tambahkan line berikut:

   // Editor akan mengatakan bahwa 'dynamic' adalah sebuah opsi yang tidak diketahui. Tapi jangan khawatir, Ini masih tahap percobaan. "typescript.tsserver.useSeparateSyntaxServer": "dynamic",

Fitur-fitur di atas hanyalah sebagian kecil dari sekumpulan besar perubahan yang dapat kita lihat di TypeScript 4.0. Karena ini adalah versi beta, TypeScript mengundang kalian untuk menguji versi ini dengan proyek kalian sendiri jika kalian mau. Jika ingin berkontribusi,

• Kalian dapat menggunkan npm install typescript@beta.
• Kalian juga bisa mendapatkannya di NuGet.

Jadi cobalah dan beri tahu mereka tanggapan kalian. Itulah beberapa bahasan kita kali ini mengenai TypeScript. Untuk artikel menarik lainnya bisa kunjungi link https://www.codepolitan.com/articles. Dan jika kalian baru dalam pemrograman, tenang saja, Codepolitan memiliki banyak kelas online yang dapat membantu kalian untuk belajar materi pemrograman secara terarah. Kunjungi link berikut untuk mengakses kelasnya https://www.codepolitan.com/library.

Happy Coding! :)

Sumber : https://medium.com/better-programming/the-typescript-4-0-beta-is-here-c243358fe361

Gambar : https://morioh.com/p/48a9daf74ab6