Literal turlar — 'qizil' | 42 | true, as const

~15 daq · TypeScript · Asosiy Turlar

Foydalanuvchi holati (status) ni string tur bilan saqlashingiz mumkin. Lekin string juda keng — "faol", "nofaol", "bloklangan" dan tashqari istalgan matnni bersa bo'ladi. TypeScript ni "xatolig_kiritilgan_holat" deb yozilsa ham to'xtatmaydi.

Kerakli qiymat: faqat belgilangan to'rt holat. Boshqa hech narsa. Bu holat uchun — Literal tur.

Literal tur nima?

Tur sifatida aniq qiymat ko'rsatiladi — nafaqat qaysi tur (string, number), balki qaysi qiymat bo'lishi kerakligi:

type Holat = "faol" | "nofaol" | "kutilmoqda" | "bloklangan";

let status: Holat = "faol";       // ✅
let status: Holat = "o'chirilgan"; // ❌ — bu qiymat ruxsatda yo'q

Muharrir bu to'rtta qiymatni autocomplete qilib ko'rsatadi. Yozayotganda xato yo'l qolmaydi.

Hayotiy o'xshatma

Elektron shaklda "viloyat" tanlash. Dropdown ro'yxat bor: Toshkent, Samarqand, Buxoro, Andijon... Boshqa narsa yozib bo'lmaydi — faqat ro'yxatdagi variantlar. Literal tur — o'sha dropdown: qat'iy ro'yxat, tashqarisiga yo'l yo'q.

Son literal

Qiymat string bo'lishi shart emas — son ham bo'lishi mumkin:

type HttpKod = 200 | 201 | 400 | 401 | 403 | 404 | 500;

function javobQayta(kod: HttpKod): string {
  if (kod === 200) return "OK";
  if (kod === 404) return "Topilmadi";
  return "Xato";
}

javobQayta(200); // ✅
javobQayta(999); // ❌ — 999 ruxsatda yo'q

Boolean literal

true va false ham literal tur:

type Faol = true;

const a: Faol = true;  // ✅
const b: Faol = false; // ❌ — faqat true ruxsat

Amalda kamroq ishlatiladi — lekin conditional types da keng qo'llanadi.

as const — qiymatni qotirib qo'yish

Muammo

TypeScript o'zgaruvchiga qiymat berilganda turni kengaytiradi:

const yo_nalish = "shimol"; // TypeScript: string deb qabul qiladi

"shimol" deb yozilgan — lekin TypeScript string deb oladi. Bu degani, yo'nalish ni string qabul qiladigan joyga berib bo'ladi — agar faqat "shimol" | "janub" | "sharq" | "g'arb" bo'lishi kerak bo'lsa, bu muammo.

Yechim — as const

const yo_nalish = "shimol" as const;
// TypeScript: "shimol" literal tur (string emas)

Ob'ekt yoki massivda ham ishlaydi:

const RANGLAR = ["qizil", "yashil", "ko'k"] as const;
// TypeScript: readonly ["qizil", "yashil", "ko'k"]
// har bir element o'z literal turiga ega

as const ob'ektda

const SOZLAMALAR = {
  til:      "uz",
  mavzu:    "qorong'i",
  til_kodi: 860,
} as const;

as const bilan:

• Barcha xususiyatlar readonly — o'zgartirib bo'lmaydi
• Turlar kengaytilmaydi: til turi string emas, "uz" literal tur

SOZLAMALAR.til = "en"; // ❌ — readonly, o'zgartirib bo'lmaydi

Konfiguratsiya sabab — as const

Ilova konfiguratsiyalari o'zgarmasligi kerak va aniq qiymatlar bo'lishi kerak:

const DB_SOZLAMA = {
  host:    "localhost",
  port:    5432,
  ssl:     false,
} as const;

// DB_SOZLAMA.port turi: 5432 (number emas)
// DB_SOZLAMA.ssl turi: false (boolean emas)

Bu konfiguratsiyadan tur ajratib olish mumkin:

type DBPort = typeof DB_SOZLAMA.port; // 5432

Literal tur funksiya parametrida

type Yo_nalish = "shimol" | "janub" | "sharq" | "g'arb";

function yur(yo_nalish: Yo_nalish, qadam: number): void {
  console.log(`${yo_nalish} tomonga ${qadam} qadam`);
}

yur("shimol", 5); // ✅
yur("tepaga", 5); // ❌ — "tepaga" Yo'nalish da yo'q

Tez-tez uchraydigan xatolar

as const siz literal tur kutilgan joyda string berish:

type Yo_nalish = "shimol" | "janub";

const belgi = "shimol"; // TypeScript: string (literal emas!)

function yur(yo_nalish: Yo_nalish) { ... }

yur(belgi);
// ❌ — string turi Yo'nalish ga mos kelmaydi

// Yechim:
const belgi = "shimol" as const; // "shimol" literal tur
yur(belgi); // ✅

Literal va union ni chalkashtirib yuborish:

type A = "a";          // faqat "a"
type B = "a" | "b";   // "a" yoki "b"
type C = string;       // istalgan matn

A dan C tomonga — kengayadi (union katta, literal kichik). C dan A tomonga — torayadi (TypeScript ruxsat bermaydi).

Xulosa

Literal tur — aniq qiymatni tur sifatida berish. "faol" | "nofaol" — faqat shu ikki qiymat.

as const — qiymatni qotirib qo'yadi: string dan literal turga, readonly ga aylantiradi.

Amalda ko'p ishlatilishi: holat (status), yo'nalish, konfiguratsiya qiymatlari.

Keyingi dars

15-dars: Enum — numeric, string enum, const enum, qachon ishlatiladi