Jenis Literal

Selamat datang ke pelajaran seterusnya! Dalam pelajaran ini, anda akan mempelajari tentang jenis literal, iaitu ciri TypeScript yang membolehkan anda menentukan nilai yang tepat dan khusus bagi pemboleh ubah. Ini menjadikan kod anda lebih boleh diramalkan dan selamat dari segi jenis. Mari kita mulakan!

Jenis literal dalam TypeScript membolehkan pemboleh ubah menyimpan nilai khusus, bukannya hanya jenis umum seperti rentetan atau nombor. Contohnya, anda boleh mengehadkan pemboleh ubah supaya hanya menyimpan nilai "yes" atau "no".

Contoh:

Tugasan: Isytiharkan pemboleh ubah dengan jenis literal dan tetapkan nilai yang sah serta tidak sah kepadanya.

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

Jenis literal rentetan mengehadkan pemboleh ubah kepada sekumpulan nilai rentetan tertentu. Contoh:

Tugasan: Cipta jenis untuk arah dan tetapkan nilai kepada pemboleh ubah.

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

Anda juga boleh menggunakan jenis literal dengan nombor untuk mengehadkan pemboleh ubah kepada nilai angka tertentu. Contoh:

Tugasan: Tentukan jenis literal angka untuk lontaran dadu dan uji jenis tersebut.

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

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

Anda boleh menggunakan jenis literal dalam parameter fungsi untuk membenarkan hanya nilai tertentu. Contoh:

Tugasan: Tulis fungsi dengan parameter yang menggunakan jenis literal.

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

Untuk menggunakan semula jenis literal, anda boleh menentukannya sebagai alias jenis. Contoh:

Tugasan: Cipta alias jenis untuk warna lampu isyarat dan gunakannya dalam pemboleh ubah.

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

Anda boleh menggunakan jenis literal dalam objek untuk mengehadkan nilai sifat tertentu. Contoh:

Tugasan: Cipta jenis objek dengan sifat yang menggunakan jenis literal.

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

Berikut ialah beberapa kesilapan lazim semasa menggunakan jenis literal:

• Terlepas pandang untuk mengemas kini semua nilai yang dibenarkan apabila mengubah suai jenis literal.
• Menetapkan nilai yang tidak termasuk dalam jenis literal, dan TypeScript akan mengesan perkara ini.
• Menggunakan jenis literal untuk data yang sangat dinamik, sedangkan fleksibiliti lebih penting.

Petua: Gunakan jenis literal untuk senario yang terkawal dan boleh diramalkan!

Tahniah! Anda telah mempelajari cara menggunakan jenis literal dalam TypeScript untuk menentukan nilai yang tepat dan terhad. Jenis literal amat berguna untuk menghasilkan kod yang boleh diramalkan dan selamat dari segi jenis. Dalam pelajaran seterusnya, kita akan meneroka sokongan TypeScript untuk bekerja dengan fungsi. Mari kita terus menulis kod!