TypeScript - Jenis Literal: Panduan Pemula

Hai, bakat coding super masa depan! Hari ini, kita akan melihat dunia yang menarik jenis literal TypeScript. Jangan khawatir jika Anda baru saja memulai programming - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini. Pada akhir tutorial ini, Anda akan bisa menggunakan jenis literal seperti seorang ahli!

TypeScript - Literal Types

Apa Itu Jenis Literal?

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

Sintaks

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

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

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

Jenis Literal String

Jenis literal string adalah yang paling umum dan paling mudah dipahami. Mereka seperti yang disebutkan - string tertentu yang sebuah variabel bisa menjadi.

Contoh 1: Hari Dalam Seminggu

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

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

Dalam contoh ini, DayOfWeek adalah jenis yang hanya bisa menjadi salah satu dari tujuh hari dalam seminggu. Cobalah untuk menugaskan string lain, dan TypeScript akan menggoyangkan jari ke Anda!

Contoh 2: Warna Lampu Lalu Lintas

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

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

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

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

Jenis Literal Numerik

Seperti halnya dengan string, kita juga bisa membuat jenis literal dengan angka. Ini sangat baik saat Anda ingin membatasi nilai ke nilai 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 Baju

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

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

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

Jenis Literal Gabungan

Kekuatan sebenarnya jenis literal terlihat saat kita gabungkan jenis literal 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 diassign ke tipe 'CharacterStatus'.

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

Kasus Penggunaan Jenis Literal

Jenis 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 diassign ke parameter tipe 'HttpMethod'.

Dengan menggunakan jenis literal untuk metode HTTP, kita memastikan bahwa hanya metode yang valid bisa 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
};

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

3. Mesin State

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 jenis literal untuk merepresentasikan berbagai keadaan dalam proses login, memastikan bahwa keadaan hanya bisa salah satu dari nilai yang didefinisikan.

Tabel Metode

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

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

Dan itu adalah, murid coding saya! Anda baru saja meningkatkan level di perjalanan Anda dalam TypeScript dengan menguasai jenis literal. Ingat, seperti memilih topping pizza yang sempurna, jenis literal membantu Anda menjadi spesifik dan mencegah kesalahan. Teruslatih, dan segera Anda akan membuat kode yang aman dan menarik! ??

Credits: Image by storyset