Pelajaran modul (2/2)
Jenis dan Pernyataan Harafiah
TypeScript menyediakan alat canggih untuk mempersempit kemungkinan nilai variabel dan memaksa kompiler mengenali tipe yang lebih spesifik bila diperlukan.
Tipe Harafiah
Tipe literal mewakili nilai tunggal yang tepat (misalnya, string atau angka tertentu). Mereka biasanya digabungkan dengan tipe serikat pekerja:
type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;
light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLightKetik Pernyataan (as)
Terkadang Anda memiliki informasi tentang tipe yang TypeScript tidak dapat ketahui pada waktu kompilasi. Dalam kasus ini, Anda dapat menggunakan ketik pernyataan menggunakan kata kunci as:
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;Pernyataan tersebut memberitahu kompiler: "Percayalah, saya tahu elemen ini adalah HTMLCanvasElement". Itu tidak melakukan pemeriksaan atau cast apa pun saat runtime; itu hanya membantu pemeriksa tipe.
Pernyataan Konstanta (as const)
Saat kita mendeklarasikan objek atau array dengan const, TypeScript masih mengizinkan modifikasi properti internalnya. Dengan menambahkan as const di akhir, seluruh struktur dibekukan dan dijadikan hanya-baca, mengubah semua properti menjadi tipe literalnya:
const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-onlyTipe Literal Templat
Tipe literal templat dibuat di atas string templat JavaScript, tetapi digunakan dalam posisi tipe. Mereka memungkinkan penggabungan beberapa tipe literal menjadi satu:
type Size = 'small' | 'large';
type Color = 'red' | 'blue';
// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;Utilitas String dalam Tipe Literal Templat
TypeScript menyediakan tipe utilitas khusus untuk memanipulasi karakter dalam Tipe Literal Templat:
Capitalize<StringType>: Menggunakan huruf besar pada huruf pertama string.Uncapitalize<StringType>: Menghapus huruf besar pada huruf pertama string.Uppercase<StringType>: Mengubah seluruh string menjadi huruf besar.Lowercase<StringType>: Mengubah seluruh string menjadi huruf kecil.
type ActionType = 'click' | 'hover';
// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;Cobalah sendiri
Latihan 1: Arah Persatuan Literal
Definisikan tipe literal bernama Direction yang hanya menerima string 'atas', 'bawah', 'kiri', atau 'kanan'. Kemudian deklarasikan fungsi bernama move(dir: Direction): string yang mengembalikan string 'Moving ' diikuti dengan arah yang diterima.
Tunjukkan petunjuk
Tentukan alias tipe terlebih dahulu dengan empat opsi yang dipisahkan oleh |, lalu deklarasikan fungsi pindah yang memberi anotasi pada parameter dan tipe kembalian.
Solusi tersedia setelah 3 upaya
Latihan 2: Penegasan pada JSON.parse
Fungsi JSON.parse mengembalikan tipe apa pun secara default. Ubah fungsi parseUser sehingga hasil JSON.parse(json) dinyatakan sebagai tipe { nama pengguna: string } menggunakan kata kunci as.
Tunjukkan petunjuk
Tambahkan 'as { username: string }' segera setelah panggilan JSON.parse(json).
Solusi tersedia setelah 3 upaya
Latihan 3: Templat Literal untuk Acara
Mengingat tipe Status dan Tindakan, tentukan tipe string templat bernama Peristiwa dalam format 'Status-Action' (misalnya, 'buka-klik').
Tunjukkan petunjuk
Gunakan backticks untuk menentukan tipe, dan sintaks ${Status}-${Action} di dalamnya.
Solusi tersedia setelah 3 upaya
Latihan 4: Tipe Literal Templat dengan Huruf Besar
Tentukan tipe literal Acara yang dapat berupa 'klik' atau 'melayang'. Lalu, gunakan Tipe Literal Templat untuk mendeklarasikan tipe EventHandler yang mewakili string dalam format diikuti dengan nama peristiwa dengan huruf kapital (misalnya, 'onClick' atau 'onHover').
Tunjukkan petunjuk
Gunakan Capitalize<Event> di dalam literal templat untuk menggunakan huruf besar pada huruf pertama acara.
Solusi tersedia setelah 3 upaya