Tipe Literal

Termasuk bagian Pengantar TypeScript dalam perjalanan JavaScript di Coddy. Pelajaran 33 dari 73.

Tipe literal memungkinkan kamu membatasi variabel ke nilai yang tepat dan spesifik, bukan ke kategori yang luas. Alih-alih menerima string apa pun, kamu bisa membatasinya hanya ke "left", "right", "up", atau "down".

Tipe literal menggunakan nilai yang persis sama sebagai tipe itu sendiri.

Kamu dapat membuat tipe literal untuk string, angka, atau nilai boolean:

let direction: "left" = "left";  // Only "left" is allowed
let count: 42 = 42;              // Only the number 42 is allowed
let isReady: true = true;        // Only true is allowed

Tipe literal menjadi lebih bermanfaat saat digabungkan dengan tipe union, sehingga menghasilkan kumpulan nilai yang diizinkan dan terkendali. Ini cocok untuk situasi seperti arah, kode status, atau opsi konfigurasi:

type Direction = "left" | "right" | "up" | "down";
type Status = "pending" | "approved" | "rejected";

let playerMove: Direction = "up";    // Valid
let orderStatus: Status = "pending"; // Valid
// let invalid: Direction = "diagonal"; // Error!

Pendekatan ini memberimu fleksibilitas dengan beberapa pilihan sekaligus menjaga keamanan tipe yang ketat. TypeScript akan mendeteksi salah ketik dan nilai yang tidak valid saat kompilasi, sehingga kodemu lebih andal daripada jika menggunakan tipe string umum.

Tantangan

Mudah

Buat alias tipe bernama Direction untuk tipe literal "left" | "right" | "up" | "down".

Buat alias tipe bernama GameState untuk tipe literal "menu" | "playing" | "paused" | "gameover".

Buat alias tipe bernama Difficulty untuk tipe literal "easy" | "medium" | "hard".

Sekarang, deklarasikan variabel berikut menggunakan alias tipe yang kamu buat:

Deklarasikan variabel bernama playerDirection dengan tipe Direction dan tetapkan nilai "up" padanya
Deklarasikan variabel bernama currentState dengan tipe GameState dan tetapkan nilai "playing" padanya
Deklarasikan variabel bernama selectedDifficulty dengan tipe Difficulty dan tetapkan nilai "medium" padanya

Buat fungsi bernama movePlayer yang menerima parameter bernama direction dengan tipe Direction dan mengembalikan string. Fungsi tersebut harus mengembalikan pesan dengan format "Moving [direction]".

Buat fungsi lain bernama updateGameState yang menerima parameter bernama state dengan tipe GameState dan mengembalikan string. Fungsi tersebut harus mengembalikan pesan dengan format "Game state: [state]".

Panggil fungsi-fungsimu dengan variabel yang kamu buat dan cetak hasilnya:

Panggil movePlayer dengan playerDirection dan cetak hasilnya
Panggil updateGameState dengan currentState dan cetak hasilnya
Cetak nilai selectedDifficulty

Cetak setiap hasil pada baris terpisah sesuai urutan yang ditentukan di atas.

Coba sendiri

// TODO: Tulis kodemu di sini
// Buat alias tipe untuk Direction, GameState, dan Difficulty
// Deklarasikan variabel menggunakan alias tipemu
// Buat fungsi movePlayer dan updateGameState
// Panggil fungsi-fungsi tersebut dan cetak hasilnya

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengantar TypeScript

Latihan sendiri: Playground TypeScript