TypeScript - Tipe Literal: Panduan untuk Pemula

Halo, superstar pemrograman masa depan! Hari ini, kita akan masuk ke dunia menarik dari TypeScript Tipe Literal. Jangan khawatir jika Anda masih baru dalam pemrograman - saya akan menjadi panduan ramah Anda dalam perjalanan ini. Pada akhir tutorial ini, Anda akan bisa menggunakannya seperti seorang ahli!

Apa Itu Tipe Literal?

Sebelum kita masuk ke dalam, mari bayangkan Anda memesan pizza. Anda tidak bisa hanya mengatakan, "Saya ingin sebuah pizza." Anda perlu menentukan ukurannya: kecil, sedang, atau besar. Di TypeScript, tipe literal adalah seperti ukuran pizza yang spesifik itu - mereka adalah nilai tepat yang sebuah variabel bisa memiliki.

Sintaks

Sintaks untuk tipe literal adalah mudah. Anda hanya menggunakan nilai tepat yang Anda ingin izinkan. Mari kita lihat contoh dasar:

let pizzaSize: "small" | "medium" | "large";

Dalam kasus ini, pizzaSize hanya bisa "small", "medium", atau "large". Tidak ada yang lain - bahkan tidak ada "extra large" atau "kecil banget"!

Tipe Literal String

Tipe literal string adalah yang paling umum dan mudah dipahami. Mereka seperti apa yang mereka katakan - string tertentu yang sebuah variabel bisa menjadi.

Contoh 1: Hari dalam Minggu

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // Ini baik
today = "Someday"; // Kesal! Tipe '"Someday"' tidak dapat diugaskan ke tipe 'DayOfWeek'.

Dalam contoh ini, DayOfWeek adalah tipe yang hanya bisa salah satu dari tujuh hari dalam minggu. Cobalah menugaskan string lain, dan TypeScript akan menunjukkan jari ke Anda!

Contoh 2: Warna Lampu Lalu Lintas

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`Lampu telah berubah ke ${color}`);
}

changeLight("Green"); // Bekerja baik
changeLight("Purple"); // Kesal! Argumen tipe '"Purple"' tidak dapat diugaskan ke parameter tipe 'TrafficLightColor'.

Di sini, kita memastikan bahwa lampu lalu lintas hanya bisa berubah ke warna yang valid. Tidak ada lampu diskotik di jalan ini!

Tipe Literal Numerik

Seperti halnya dengan string, kita juga bisa membuat tipe literal dengan angka. Ini sangat baik saat Anda ingin membatasi nilai ke angka tertentu.

Contoh 3: Dadu Melempar

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`Anda melempar ${myRoll}`);

Dalam contoh ini, kita memastikan bahwa dadu hanya bisa melempar angka dari 1 hingga 6. Tidak ada dadu berat di permainan kita!

Contoh 4: Ukuran Kaos

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Kesal! Tipe '41' tidak dapat diugaskan ke tipe 'ShirtSize'.

Di sini, kita membatasi ukuran kaos ke angka tertentu. Tidak ada ukuran antara di toko ini!

Tipe Literal Gabungan

Kekuatan sebenarnya dari tipe literal terlihat saat kita gabungkan jenis-jenis literal yang berbeda.

Contoh 5: Status Karakter Game

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Ini juga valid
hero = "Wounded"; // Kesal! Tipe '"Wounded"' tidak dapat diugaskan ke tipe 'CharacterStatus'.

Dalam game ini, karakter bisa "Alive", "Dead", 1 (mewakili hidup), atau 0 (mewakili mati). Seperti memiliki representasi teks dan kode!

Kasus Penggunaan Tipe Literal

Tipe literal sangat berguna dalam banyak konteks. Mari jelajahi beberapa:

1. Parameter Fungsi

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// Kirim permintaan
console.log(`Mengirim ${method} permintaan ke ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Bekerja baik
sendRequest("https://api.example.com", "FETCH"); // Kesal! Argumen tipe '"FETCH"' tidak dapat diugaskan ke parameter tipe 'HttpMethod'.

Dengan menggunakan tipe literal untuk metode HTTP, kita memastikan bahwa hanya metode valid yang dapat digunakan.

2. Objek Konfigurasi

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

Tipe literal membantu kita membuat objek konfigurasi yang ketat, mencegah kesalahan dan pengaturan yang tidak valid.

3. Mesin Keadaan

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// Melakukan logika login
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

Di sini, kita menggunakan tipe literal untuk merepresentasikan keadaan berbeda dalam proses login, memastikan bahwa keadaan hanya bisa salah satu dari nilai yang ditentukan.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode dan konsep utama yang kita pelajari:

Metode/Konsep	Deskripsi	Contoh
Deklarasi Tipe	Mendefinisikan tipe baru menggunakan nilai literal	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Penugasan Variabel	Menugaskan tipe literal ke variabel	let today: DayOfWeek = "Monday";
Parameter Fungsi	Menggunakan tipe literal dalam parameter fungsi	function sendRequest(method: HttpMethod) {...}
Literals Gabungan	Menggabungkan jenis-jenis literal yang berbeda	type Status = "Active" \| "Inactive" \| 0 \| 1;
Properti Interface	Menggunakan tipe literal dalam properti interface	interface Config { theme: "light" \| "dark" }

Dan itu adalah, murid pemrograman saya! Anda baru saja meningkatkan level dalam perjalanan TypeScript Anda dengan memahami tipe literal. Ingat, seperti memilih topping pizza yang sempurna, tipe literal membantu Anda menjadi spesifik dan mencegah kesalahan. Terus latihan, dan segera Anda akan membuat kode yang aman dan menyenangkan! ??

Credits: Image by storyset