TypeScript - Jenis Template Literal

Hai sana, bintang-bintang pemrograman masa depan! Hari ini, kita akan mengembara ke dunia TypeScript dan menjelajahi fitur yang menarik yang disebut Jenis Template Literal. Jangan khawatir jika Anda baru saja memulai pemrograman - saya akan memandu Anda langkah demi langkah, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar. Jadi, ambil minuman favorit Anda, duduk dengan nyaman, dan mari kita masuk ke dalam!

Apa Itu Jenis Template Literal?

Sebelum kita melompat ke detilnya, mari kita mengerti apa itu Jenis Template Literal. Bayangkan Anda membuat kartu ucapan. Anda memiliki template dasar, tapi Anda ingin personalisasinya dengan nama dan pesan yang berbeda. Itu sebenarnya apa yang dilakukan Jenis Template Literal di TypeScript - mereka memungkinkan kita untuk membuat definisi jenis yang fleksibel dan dapat digunakan kembali yang dapat berubah berdasarkan apa yang kita masukkan.

Sintaks

Sintaks untuk Jenis Template Literal mungkin terlihat agak aneh pertama kalinya, tapi saya berjanji itu tidak terlalu rumit seperti yang tampak.Ini adalah struktur dasar:

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

Berpikir seperti ini:

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

Pikirkan seperti permainan Mad Libs, di mana ${SomeType} adalah kotak kosong yang kita isi untuk membuat variasi yang berbeda.

Contoh

Sekarang, mari kita lihat beberapa contoh untuk melihat bagaimana Jenis 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 jenis Greeting yang selalu dimulai dengan "Hello, " dan berakhir dengan "!". Bagian ${string} berarti kita dapat memasukkan string apa pun di antaranya. Itu seperti memiliki template kartu ucapan tempat Anda hanya dapat mengubah nama.

Contoh 2: Menggabungkan String Literal

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 jenis TShirt dengan menggabungkan dua jenis lain: Size dan Color. Hal ini memungkinkan kita untuk membuat kombinasi valid seperti "small-red" atau "large-green", tetapi mencegah kombinasi yang 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 menciptakan jenis yang mewakili koordinat 2D. Itu harus dua angka dipisahkan oleh koma.

Contoh 4: Template 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 jenis yang lebih kompleks. Kita mendefinisikan jenis ApiRoute yang menggabungkan metode HTTP dengan endpoint. Hal ini memastikan bahwa rute API kita selalu mengikuti format tertentu.

Contoh 5: Modifikator 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 jenis utilitas seperti Uppercase dan Lowercase yang kita dapat gunakan dengan Jenis Template Literal. Contoh ini menunjukkan bagaimana kita dapat membuat jenis baru yang adalah versi uppercase atau lowercase dari jenis yang ada.

Tabel Metode

Berikut adalah tabel yang menyummarisakan metode dan utilitas kunci yang kita diskusikan:

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

Kesimpulan

Danitu, murid-murid tercinta! Kita telah menjelajahi dunia yang menakjubkan dari Jenis Template Literal di TypeScript. Dari penggunaan dasar hingga contoh yang lebih kompleks, Anda telah melihat bagaimana fitur ini dapat membantu kita menciptakan jenis yang lebih tepat dan fleksibel.

Ingat, seperti belajar keterampilan baru, memahami Jenis Template Literal memerlukan latihan. Jangan frustasi jika itu tidak langsung berjalan - saya telah melihat banyak murid kesulitan pertama kali sebelum mereka memiliki "momentum 'aha!'". Terus mencoba, cobalah membuat jenis Anda sendiri, dan terutama, nikmati proses belajar!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa murid yang menikmati proses belajar adalah yang paling sukses. Jadi, pikirkan TypeScript sebagai alat kuat dalam kotak alat pemrograman Anda, dan Jenis Template Literal sebagai pisau multitask di dalamnya - fleksibel, tepat, dan sangat berguna ketika Anda tahu bagaimana menggunakannya.

Sekarang, maju dan ciptakan hal-hal yang menakjubkan dengan pengetahuan baru Anda. Dan ingat, di dunia pemrograman, batasnya hanya imagination Anda (dan mungkin kadang-kadang compiler Anda, tapi itu cerita lain untuk hari lain). Selamat pemrograman!

Credits: Image by storyset