Apa yang Baru di TypeScript 5.0: Deklarator, Tipe Const, Peningkatan Enum, Kecepatan, dan Banyak Lagi!

TypeScript 5.0 secara resmi dirilis pada 16 Maret 2023, dan sekarang tersedia untuk digunakan semua orang. Rilis ini memperkenalkan banyak fitur baru dengan tujuan membuat TypeScript lebih kecil, lebih sederhana, dan lebih cepat.

Rilis baru ini memodernisasi dekorator untuk penyesuaian kelas, memungkinkan penyesuaian kelas dan anggotanya dengan cara yang dapat digunakan kembali. Pengembang sekarang dapat menambahkan pengubah const ke deklarasi parameter tipe, memungkinkan inferensi seperti const menjadi default. Rilis baru ini juga membuat semua enum union enum, menyederhanakan struktur kode dan mempercepat pengalaman TypeScript.

Dalam artikel ini, Anda akan menjelajahi perubahan yang diperkenalkan di TypeScript 5.0, memberikan pandangan mendalam tentang fitur dan kemampuan barunya.

Memulai dengan TypeScript 5.0

TypeScript adalah kompiler resmi yang dapat Anda instal ke proyek Anda menggunakan npm. Jika Anda ingin mulai menggunakan TypeScript 5.0 di proyek Anda, Anda dapat menjalankan perintah berikut di direktori proyek Anda:

 npm install -D typescript

Ini akan menginstal kompiler di direktori node_modules , yang sekarang dapat Anda jalankan dengan perintah npx tsc .

Anda juga dapat menemukan petunjuk tentang cara menggunakan TypeScript versi terbaru dalam Visual Studio Code dalam dokumentasi ini.

Apa yang Baru di TypeScript 5.0?

Pada artikel ini, mari jelajahi 5 pembaruan utama yang diperkenalkan ke dalam TypeScript. Fitur-fitur ini meliputi:

Dekorator Modern

Dekorator telah ada di TypeScript untuk sementara waktu di bawah bendera eksperimental, tetapi rilis baru mempercepat mereka dengan proposal ECMAScript, yang sekarang berada di tahap 3, artinya sedang dalam tahap di mana ia ditambahkan ke TypeScript.

Dekorator adalah cara untuk menyesuaikan perilaku kelas dan anggotanya dengan cara yang dapat digunakan kembali. Misalnya, jika Anda memiliki kelas yang memiliki dua metode, greet dan getAge :

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}.`); } getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Dalam kasus penggunaan dunia nyata, kelas ini harus memiliki metode yang lebih rumit yang menangani beberapa logika asinkron dan memiliki efek samping, dll, di mana Anda ingin memasukkan beberapa panggilan console.log untuk membantu men-debug metode tersebut.

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log('LOG: Method Execution Starts.'); console.log(`Hello, my name is ${this.name}.`); console.log('LOG: Method Execution Ends.'); } getAge() { console.log('LOG: Method Execution Starts.'); console.log(`I am ${this.age} years old.`); console.log('Method Execution Ends.'); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Ini adalah pola yang sering terjadi, dan akan lebih mudah jika memiliki solusi untuk diterapkan pada setiap metode.

Di sinilah dekorator berperan. Kita dapat mendefinisikan fungsi bernama debugMethod yang muncul sebagai berikut:

 function debugMethod(originalMethod: any, context: any) { function replacementMethod(this: any, ...args: any[]) { console.log('Method Execution Starts.'); const result = originalMethod.call(this, ...args); console.log('Method Execution Ends.'); return result; } return replacementMethod; }

Pada kode di atas, debugMethod mengambil metode asli ( originalMethod ) dan mengembalikan fungsi yang melakukan hal berikut:

1. Mencatat pesan “Eksekusi Metode Dimulai.”.
2. Melewati metode asli dan semua argumennya (termasuk ini).
3. Mencatat pesan “Eksekusi Metode Berakhir.”.
4. Mengembalikan apa pun yang dikembalikan metode asli.

Dengan menggunakan dekorator, Anda dapat menerapkan debugMethod ke metode Anda seperti yang ditunjukkan pada kode di bawah ini:

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } @debugMethod greet() { console.log(`Hello, my name is ${this.name}.`); } @debugMethod getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Ini akan menampilkan yang berikut:

 LOG: Entering method. Hello, my name is Ron. LOG: Exiting method. LOG: Entering method. I am 30 years old. LOG: Exiting method.

Saat mendefinisikan fungsi dekorator ( debugMethod ), parameter kedua dilewatkan yang disebut context (ini adalah objek konteks — memiliki beberapa informasi berguna tentang bagaimana metode yang didekorasi dideklarasikan dan juga nama metodenya). Anda dapat memperbarui debugMethod Anda untuk mendapatkan nama metode dari objek context :

 function debugMethod( originalMethod: any, context: ClassMethodDecoratorContext ) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`'${methodName}' Execution Starts.`); const result = originalMethod.call(this, ...args); console.log(`'${methodName}' Execution Ends.`); return result; } return replacementMethod; }

Ketika Anda menjalankan kode Anda, keluaran sekarang akan membawa nama setiap metode yang didekorasi dengan dekorator debugMethod :

 'greet' Execution Starts. Hello, my name is Ron. 'greet' Execution Ends. 'getAge' Execution Starts. I am 30 years old. 'getAge' Execution Ends.

Ada lebih banyak hal yang dapat Anda lakukan dengan dekorator. Jangan ragu untuk memeriksa permintaan penarikan asli untuk informasi lebih lanjut tentang cara menggunakan dekorator di TypeScript.

Memperkenalkan Parameter Jenis const

Ini adalah rilis besar lainnya yang memberi Anda alat baru dengan obat generik untuk meningkatkan inferensi yang Anda dapatkan saat memanggil fungsi. Secara default, saat Anda mendeklarasikan nilai dengan const , TypeScript menyimpulkan tipe dan bukan nilai literalnya:

 // Inferred type: string[] const names = ['John', 'Jake', 'Jack'];

Hingga saat ini, untuk mencapai inferensi yang diinginkan, Anda harus menggunakan pernyataan const dengan menambahkan "as const":

 // Inferred type: readonly ["John", "Jake", "Jack"] const names = ['John', 'Jake', 'Jack'] as const;

Saat Anda memanggil fungsi, itu serupa. Dalam kode di bawah ini, jenis negara yang disimpulkan adalah string[] :

 type HasCountries = { countries: readonly string[] }; function getCountriesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: string[] const countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });

Anda mungkin menginginkan jenis yang lebih spesifik yang salah satu cara untuk memperbaikinya sebelumnya adalah dengan menambahkan as const pernyataan:

 // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);

Ini bisa sulit untuk diingat dan diterapkan. Namun, TypeScript 5.0 memperkenalkan fitur baru di mana Anda dapat menambahkan pengubah const ke deklarasi parameter tipe, yang secara otomatis akan menerapkan inferensi seperti const sebagai default.

 type HasCountries = { countries: readonly string[] }; function getNamesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });

Menggunakan parameter tipe const memungkinkan developer untuk mengekspresikan maksud dengan lebih jelas dalam kode mereka. Jika suatu variabel dimaksudkan untuk menjadi konstan dan tidak pernah berubah, menggunakan parameter tipe const memastikan bahwa itu tidak akan pernah dapat diubah secara tidak sengaja.

Anda dapat memeriksa permintaan tarik asli untuk informasi lebih lanjut tentang cara kerja parameter tipe const di TypeScript.

Perbaikan pada Enum

Enum di TypeScript adalah konstruksi yang kuat yang memungkinkan pengembang untuk menentukan sekumpulan konstanta bernama. Di TypeScript 5.0, peningkatan telah dilakukan pada enum agar lebih fleksibel dan berguna.

Misalnya, jika Anda memiliki enum berikut yang diteruskan ke suatu fungsi:

 enum Color { Red, Green, Blue, } function getColorName(colorLevel: Color) { return colorLevel; } console.log(getColorName(1));

Sebelum pengenalan TypeScript 5.0, Anda bisa memberikan nomor level yang salah, dan itu tidak akan menimbulkan kesalahan. Tetapi dengan diperkenalkannya TypeScript 5.0, itu akan segera menimbulkan kesalahan.

Selain itu, rilis baru membuat semua enum menjadi enum gabungan dengan membuat tipe unik untuk setiap anggota yang dihitung. Peningkatan ini memungkinkan penyempitan semua enum dan referensi anggotanya sebagai tipe:

 enum Color { Red, Purple, Orange, Green, Blue, Black, White, } type PrimaryColor = Color.Red | Color.Green | Color.Blue; function isPrimaryColor(c: Color): c is PrimaryColor { return c === Color.Red || c === Color.Green || c === Color.Blue; } console.log(isPrimaryColor(Color.White)); // Outputs: false console.log(isPrimaryColor(Color.Red)); // Outputs: true

Peningkatan Kinerja TypeScript 5.0

TypeScript 5.0 mencakup banyak perubahan signifikan dalam struktur kode, struktur data, dan ekstensi algoritmik. Ini telah membantu meningkatkan seluruh pengalaman TypeScript, mulai dari penginstalan hingga eksekusi, menjadikannya lebih cepat dan lebih efisien.

Misalnya, perbedaan antara ukuran paket TypeScript 5.0 dan 4.9 cukup mengesankan.

TypeScript baru-baru ini dimigrasikan dari ruang nama ke modul, memungkinkannya untuk memanfaatkan perkakas pembangunan modern yang dapat melakukan pengoptimalan seperti mengangkat lingkup. Selain itu, menghapus beberapa kode usang telah memangkas sekitar 26,4 MB dari ukuran paket 63,8 MB TypeScript 4.9.

Berikut adalah beberapa kemenangan yang lebih menarik dalam kecepatan dan ukuran antara TypeScript 5.0 dan 4.9:

Resolusi Bundel untuk Resolusi Modul yang Lebih Baik

Saat Anda menulis pernyataan impor di TypeScript, kompiler perlu mengetahui apa yang dimaksud dengan impor. Ini dilakukan dengan menggunakan resolusi modul. Misalnya, saat Anda menulis import { a } from "moduleA" , kompiler perlu mengetahui definisi a di moduleA untuk memeriksa penggunaannya.

Di TypeScript 4.7, dua opsi baru ditambahkan untuk pengaturan --module dan moduleResolution : node16 dan nodenext .

Tujuan dari opsi ini adalah untuk lebih akurat mewakili aturan pencarian yang tepat untuk modul ECMAScript di Node.js. Namun, mode ini memiliki beberapa batasan yang tidak diberlakukan oleh alat lain.

Misalnya, dalam modul ECMAScript di Node.js, setiap impor relatif harus menyertakan ekstensi file agar berfungsi dengan benar:

 import * as utils from "./utils"; // Wrong import * as utils from "./utils.mjs"; // Correct

TypeScript telah memperkenalkan strategi baru yang disebut “moduleResolution bundler.” Strategi ini dapat diterapkan dengan menambahkan kode berikut di bagian "compilerOptions" dari file konfigurasi TypeScript Anda:

 { "compilerOptions": { "target": "esnext", "moduleResolution": "bundler" } }

Strategi baru ini cocok untuk mereka yang menggunakan bundler modern seperti Vite, esbuild, swc, Webpack, Parcel, dan lainnya yang menggunakan strategi pencarian hybrid.

Anda dapat memeriksa permintaan tarik asli dan implementasinya untuk informasi lebih lanjut tentang cara kerja bundler moduleResolution di TypeScript.

Penghentian

TypeScript 5.0 hadir dengan beberapa depresiasi, termasuk persyaratan runtime, perubahan lib.d.ts, dan perubahan pemecah API.

1. Persyaratan Runtime: TypeScript sekarang menargetkan ECMAScript 2018, dan paket menetapkan harapan mesin minimum 12,20. Oleh karena itu, pengguna Node.js harus memiliki versi minimum 12.20 atau lebih baru untuk menggunakan TypeScript 5.0.
2. perubahan lib.d.ts: Ada beberapa perubahan pada cara pembuatan tipe DOM, yang mungkin memengaruhi kode yang ada. Secara khusus, properti tertentu telah dikonversi dari tipe literal angka ke numerik, dan properti serta metode untuk penanganan peristiwa potong, salin, dan tempel telah dipindahkan melintasi antarmuka.
3. Perubahan yang dapat merusak API: Beberapa antarmuka yang tidak diperlukan telah dihapus, dan beberapa peningkatan kebenaran telah dilakukan. TypeScript 5.0 juga telah pindah ke modul.

TypeScript 5.0 telah menghentikan pengaturan tertentu dan nilainya yang sesuai, termasuk target: ES3 , out , noImplicitUseStrict , keyofStringsOnly , suppressExcessPropertyErrors , suppressImplicitAnyIndexErrors , noStrictGenericChecks , charset , importsNotUsedAsValues ​​, dan preserveValueImports , serta menambahkan referensi proyek.

Meskipun konfigurasi ini akan tetap valid hingga TypeScript 5.5, peringatan akan dikeluarkan untuk mengingatkan pengguna yang masih menggunakannya.

Ringkasan

Dalam artikel ini, Anda telah mempelajari beberapa fitur dan peningkatan utama yang dibawa oleh TypeScript 5.0, seperti peningkatan enum, resolusi bundler, dan parameter tipe const, bersama dengan peningkatan kecepatan dan ukuran.

Jika Anda berpikir tentang TypeScript untuk proyek Anda selanjutnya, cobalah Hosting Aplikasi Kinsta secara gratis.

Sekarang giliran Anda! Fitur atau peningkatan apa yang menurut Anda paling menarik di TypeScript 5.0? Apakah ada hal penting yang mungkin kita abaikan? Beri tahu kami di komentar.