TypeScript - Tipe Template Literal

Halo sana, bintang coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia TypeScript dan mengexplore fitur yang menarik bernama Tipe Template Literal. Jangan khawatir jika Anda baru belajar programming – saya akan mengarahkan Anda langkah demi langkah, seperti yang saya lakukan untuk ribuan siswa selama tahun-tahun mengajar saya. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Tipe Template Literal?

Sebelum kita masuk ke detailnya, mari kita mengerti apa itu Tipe Template Literal. Bayangkan Anda membuat kartu ucapan. Anda memiliki templat dasar, tapi Anda ingin personalisasinya dengan nama dan pesan yang berbeda. Itu sebenarnya apa yang dilakukan Tipe Template Literal di TypeScript – mereka memungkinkan kita untuk membuat definisi tipe yang fleksibel dan dapat digunakan kembali yang dapat berubah berdasarkan apa yang kita masukkan.

Sintaks

Sintaks untuk Tipe Template Literal mungkin terlihat sedikit aneh pada awalnya, tapi saya janji itu tidak secomplic as yang Anda pikirkan. Ini adalah struktur dasar:

type TemplateLiteralType = `prefix ${SomeType} suffix`;

mari kitauraikan ini:

• type adalah kata kunci di TypeScript yang kita gunakan untuk mendefinisikan tipe baru.
• TemplateLiteralType adalah nama yang kita berikan kepada tipe baru kita ( Anda dapat memilih nama apa saja yang Anda suka).
• Backticks (`) digunakan untuk mengelilingi templat kita.
• ${SomeType} adalah placeholder tempat kita dapat memasukkan tipe lain.
• prefix dan suffix adalah teks opsional yang selalu menjadi bagian dari tipe kita.

Pertimbangkan ini seperti permainan Mad Libs, di mana ${SomeType} adalah blanko yang kita isi untuk membuat variasi yang berbeda.

Contoh

Sekarang, mari kita lihat beberapa contoh untuk melihat bagaimana Tipe Template Literal bekerja dalam praktek. Saya akan menyediakan banyak contoh kode dan menjelaskan masing-masing secara rinci.

Contoh 1: Penggunaan Dasar

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // Ini valid
let invalidGreeting: Greeting = "Hi there!"; // Ini akan menyebabkan kesalahan

Dalam contoh ini, kita telah membuat tipe Greeting yang selalu dimulai dengan "Hello, " dan berakhir dengan "!". Bagian ${string} berarti kita dapat memasukkan string apa saja di antaranya. Itu seperti memiliki templat kartu ucapan di mana Anda hanya dapat mengubah nama.

Contoh 2: Menggabungkan String Literals

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // Ini valid
let invalidShirt: TShirt = "tiny-yellow";  // Ini akan menyebabkan kesalahan

Di sini, kita membuat tipe TShirt dengan menggabungkan dua tipe lain: Size dan Color. Ini memungkinkan kita untuk membuat kombinasi valid seperti "small-red" atau "large-green", tetapi mencegah kombinasi invalid seperti "tiny-yellow".

Contoh 3: Menggunakan Angka

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // Ini valid
let invalidPoint: Coordinate = "10,20,30";  // Ini akan menyebabkan kesalahan

Dalam contoh ini, kita menggunakan number bukannya string. Ini membuat tipe yang mewakili koordinat 2D. Itu harus dua angka dipisahkan oleh koma.

Contoh 4: Templat Kompleks

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // Ini akan menyebabkan kesalahan

Contoh ini menunjukkan bagaimana kita dapat membuat tipe yang lebih kompleks. Kita mendefinisikan tipe ApiRoute yang menggabungkan metode HTTP dengan endpoint. Ini memastikan bahwa rute API kita selalu mengikuti format tertentu.

Contoh 5: Modifikasi Uppercase dan Lowercase

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // Ini valid
let soft: WhisperingGreeting = "hi";   // Ini valid
let invalid: ShoutingGreeting = "Hey"; // Ini akan menyebabkan kesalahan

TypeScript juga menyediakan tipe utilitas seperti Uppercase dan Lowercase yang kita dapat gunakan dengan Tipe Template Literal. Contoh ini menunjukkan bagaimana kita dapat membuat tipe yang adalah versi uppercase atau lowercase dari tipe yang sudah ada.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode dan utilitas utama yang kita diskusikan:

Metode/Utilitas	Deskripsi	Contoh
Template Dasar	Membuat tipe dengan prefix/suffix tetap dan bagian variabel	type Greeting = 'Hello, ${string}!'
Tipe Gabungan	Menggabungkan beberapa tipe string literal	type Color = "red" | "blue" | "green"
Uppercase	Mengkonversi tipe string literal ke uppercase	type Upper = Uppercase<"hello">
Lowercase	Mengkonversi tipe string literal ke lowercase	type Lower = Lowercase<"HELLO">

Kesimpulan

Dan itu adalah nya, teman-teman saya! Kita telah mengeksplor dunia menarik Tipe Template Literal di TypeScript. Dari penggunaan dasar hingga contoh yang lebih kompleks, Anda telah melihat bagaimana fitur ini dapat membantu kita membuat definisi tipe yang lebih presisi dan fleksibel.

Ingat, seperti belajar keterampilan baru, memahami Tipe Template Literal memerlukan latihan. Jangan frustasi jika itu tidak langsung berjalan – saya telah melihat banyak siswa kesulitan pada awalnya hanya untuk mendapatkan momen "aha!" kemudian. Terus mencoba, cobalah membuat tipe Anda sendiri, dan terutama, bersenang-senang dengan itu!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa siswa yang menikmati proses belajar adalah yang menunjukkan kesuksesan. Jadi, pertimbangkan TypeScript sebagai alat kuat di dalam kotak alat coding Anda, dan Tipe Template Literal sebagai pisau瑞士 army knife di dalam kotak itu – fleksibel, presisi, dan sangat berguna ketika Anda tahu bagaimana menggunakannya.

Sekarang, pergilah dan buat hal yang menakjubkan dengan pengetahuan baru Anda. Dan ingat, di dunia programming, batasnya hanya imajinasi Anda (dan mungkin kadang-kadang compiler Anda, tapi itu cerita untuk hari lain). Selamat coding!

Credits: Image by storyset