TypeScript type assertion, non-null ! va satisfies: as qachon xavfli

Qisqacha: value as Dish — type assertion: TypeScript'ga "menga ishon, bu Dish" deyish. U qiymatni o'zgartirmaydi va tekshirmaydi — xato bo'lsa, ishlash paytida yiqiladi. Ifoda oxiridagi ! — "bu null yoki undefined emas" degan xuddi shunday va'da. satisfies esa teskarisi: qiymat turga mosligini tekshiradi, lekin uning aniq turini (kalitlar, literal qiymatlar) saqlab qoladi. Qoida: as va ! — kamdan-kam va izoh bilan, satisfies — bemalol.

Bu darsda

• as nima qilishini va nima qilmasligini (aylantirish, tekshirish) aniq bilasiz.
• TS2352 xatosini va "ikki bosqichli" as unknown as T ning xavfini tushunasiz.
• ! (non-null assertion) o'rniga xavfsiz yo'llarni tanlaysiz.
• satisfies bilan obyektni turga moslab tekshirasiz va kalitlarni yo'qotmaysiz.
• Annotatsiya, as va satisfies ni qachon tanlashni bilasiz.

Oldin bilishingiz kerak: Custom type guard va assertion funksiyalar, Union va literal turlar (as const), Strukturaviy tiplash.

1. Nega bu kerak?

O'tgan darsda unknown qiymatni predikat bilan tekshirdik. Bu to'g'ri yo'l, lekin uzun. Internetdagi ko'p misollarda boshqa yozuvni uchratasiz:

type MenuItem = { name: string; price: number };

const item = JSON.parse('{"name":"Osh","price":35000}') as MenuItem;
console.log(item.price + 5000); // 40000

Bir qator, tekshiruv yo'q, item — MenuItem. Ajoyib ko'rinadi. Lekin JSON'da price bo'lmasa nima bo'ladi? Yana bir mashhur belgi — undov: stock.get("osh")!. Va TypeScript 4.9 da qo'shilgan satisfies. Uchalasi ham turga "aralashadi", lekin butunlay boshqa-boshqa narsa qiladi. Bugun ularni ajratamiz.

2. as: "menga ishon"

2.1 Tekshirmaydi va aylantirmaydi

as — type assertion (tur majburlash): TypeScript chiqargan turni o'zingiz bilgan tur bilan almashtirasiz. Kundalik o'xshatish — eshikdagi qorovulga "bu odam men bilan" deyish. Qorovul hujjat so'ramaydi — sizga ishonadi. Odam kim bo'lsa ham, ichkariga kiradi.

type MenuItem = { name: string; price: number };

const item = JSON.parse('{"name":"Osh"}') as MenuItem;
console.log(item.price.toFixed(0));

tsc — xatosiz. Node esa:

TypeError: Cannot read properties of undefined (reading 'toFixed')

as faqat tekshiruv paytida yashaydi. tsc 7.0.2 const item = JSON.parse("{}") as MenuItem; qatorini shunday yozadi:

const item = JSON.parse("{}");

as MenuItem butunlay o'chdi. Ishlash paytida hech qanday tekshiruv yoki aylantirish yo'q. "35000" as number satrni songa aylantirmaydi — u faqat TypeScript'ni aldaydi (pastda ko'ramiz, TypeScript buni ham to'xtatadi).

2.2 as qayerda haqiqatan kerak

Ba'zan siz TypeScript'dan ko'proq bilasiz. Klassik misol — DOM: document.getElementById faqat HTMLElement | null qaytaradi, u <input> ekanini bilmaydi:

const input = document.getElementById("price") as HTMLInputElement;
console.log(input.value);

Siz HTML'ni yozgansiz va #price — <input> ekanini bilasiz. Lekin bu ham va'da: ertaga kimdir HTML'ni o'zgartirsa, as jim qoladi. vazifalar da shuning uchun as o'rniga tekshiruv ishlatiladi (TypeScript va DOM qadamidagi element() yordamchisi):

function element<T extends HTMLElement>(
  id: string,
  tur: new () => T,
): T {
  const topildi = document.getElementById(id);
  if (!(topildi instanceof tur)) {
    throw new TypeError(`#${id} topilmadi yoki ${tur.name} emas`);
  }
  return topildi;
}

instanceof haqiqatan tekshiradi: element yo'q yoki boshqa tur bo'lsa — darhol aniq xato. (<T extends …> — generic yozuv, Generics darsida o'rganamiz; hozir g'oyaga qarang: as o'rniga instanceof.)

2.3 TypeScript as ni ham to'xtatadi — mutlaqo bog'liqsiz turlarda

as cheksiz emas. Turlar umuman bir-biriga o'xshamasa, TypeScript buni xato deydi:

type MenuItem = { name: string; price: number };

const price = "35000" as number;
const item = { title: "Osh" } as MenuItem;

Kompilyator:

TS2352: Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
TS2352: Conversion of type '{ title: string; }' to type 'MenuItem' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type '{ title: string; }' is missing the following properties from type 'MenuItem': name, price

Tarjimasi: "string ni number ga aylantirish xato bo'lishi mumkin: turlar bir-biriga yetarlicha o'xshamaydi. Ataylab bo'lsa, avval unknown ga aylantiring". as faqat bir-biriga yaqin turlar orasida ishlaydi: biri ikkinchisining kengroq yoki torroq ko'rinishi bo'lsa. { name: "Osh" } as MenuItem esa o'tadi — price yetishmasa ham, name umumiy.

2.4 as unknown as T — ikki bosqichli majburlash

Xabar o'zi yo'lni aytdi: "avval unknown ga". unknown hamma turga yaqin, shuning uchun "35000" as unknown as number xatosiz o'tadi:

const price = "35000" as unknown as number;
console.log(typeof price); // string

Tur aytadi — son, haqiqat — satr. Bu ikki bosqichli assertion (double assertion) — TypeScript'ning hamma himoyasini o'chirish. U faqat testlarda soxta obyekt (mock) yasashda yoki juda tor, izohlangan holatlarda uchraydi. Kod ko'rib chiqishda as unknown as — har doim "nega?" savoli.

2.5 Eski yozuv: <T>value

Eski kodda as ning boshqa shaklini uchratasiz — burchak qavsda: <string>value. Ma'nosi aynan bir xil. Lekin u ikki joyda ishlamaydi: React'ning .tsx fayllarida (u yerda burchak qavs — HTML teglari) va Node 24 ning type stripping rejimida. Node bunday faylni ishga tushirmaydi va aniq sababini aytadi:

SyntaxError [ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX]: The angle-bracket syntax for type assertions, `<T>expr`, is not supported in type strip mode. Instead, use the 'as' syntax: `expr as T`.

Qoida: faqat as yozing. Eski kodni ko'chirayotganda <T>x ni x as T ga almashtiring.

Tekshirib ko'ring: const n = JSON.parse("5") as string; — tsc xato beradimi? n.toUpperCase() chi?

3. Non-null !: "bu null emas"

3.1 Undov belgisi

Ifodadan keyingi ! — non-null assertion: "bu qiymat null ham, undefined ham emas". Turdan null | undefined olib tashlanadi:

const stock = new Map([
  ["osh", 12],
  ["manti", 0],
]);
const left = stock.get("lagmon")!;
console.log(left.toFixed(0));

tsc — xatosiz. Node esa:

TypeError: Cannot read properties of undefined (reading 'toFixed')

stock.get(…) — number | undefined (Map kalit topilmasa undefined qaytaradi). ! "undefined bo'lmaydi" dedi, lekin "lagmon" kaliti yo'q edi. as kabi, ! ham .js da butunlay o'chadi.

3.2 ! o'rniga nima?

Uchala xavfsiz yo'l ham o'tgan darslardan tanish: ??, ?. va tekshiruvdan keyin toraytirish. Ular ishlash paytida ham ishlaydi. ! esa faqat TypeScript'ni jim qiladi. typescript-eslint'ning qat'iy (strict) qoidalar to'plamida no-non-null-assertion qoidasi bor — u har ! ni belgilaydi.

Yana bir joyda ! uchraydi — o'zgaruvchi e'lonida: let total!: number;. Bu "qiymat boshqa funksiyada beriladi, ishon" degani: TypeScript TS2454 (qiymat berilmasdan ishlatildi) ni bermaydi. Ma'nosi o'sha — tekshiruvni o'chirish.

! qachon joiz? Siz mantiqan isbotlay olsangiz va buni TypeScript ko'ra olmasa: masalan, oldingi qatorda map.set(key, …) qilingan bo'lsa, keyingi map.get(key)! xavfsiz. Bunday joyga izoh yozing — nega ! to'g'ri.

Tekshirib ko'ring: const first = [35000, 28000].find((p) => p > 50000)!; — first turi qanday va ishlash paytida qiymati nima?

4. satisfies: tekshir, lekin turni o'zgartirma

4.1 Annotatsiyaning muammosi

Narxlar jadvali. Ikki narsani xohlaymiz: (1) hamma qiymat son ekanini tekshirish, (2) kalitlarni aniq bilish — prices.osh bor, prices.somsa yo'q. Annotatsiya bilan birinchisi bajariladi, ikkinchisi yo'qoladi:

const prices: Record<string, number> = { osh: 35000, manti: 30000 };
console.log(prices.somsa); // undefined

Record<string, number> — "kalitlari istalgan satr, qiymatlari son" (JSDoc darsida Record<string, unknown> ni ko'rgansiz, batafsil — Index signature va Record). Annotatsiya o'zgaruvchining turini almashtiradi: TypeScript endi prices da qaysi kalitlar borligini unutdi. prices.somsa — xatosiz undefined.

4.2 satisfies — turni saqlab tekshirish

type DishName = "osh" | "lagmon" | "manti";

const prices = {
  osh: 35000,
  lagmon: "28000",
  manti: 30000,
} satisfies Record<DishName, number>;
console.log(prices.somsa);

Kompilyator:

TS2322: Type 'string' is not assignable to type 'number'.
TS2339: Property 'somsa' does not exist on type '{ osh: number; lagmon: string; manti: number; }'.

satisfies ("qanoatlantiradi") ikki ish qildi:

1. Tekshirdi: qiymat Record<DishName, number> ga mosmi? lagmon: "28000" — satr, xato.
2. Turni saqlab qoldi: prices ning turi — o'zining aniq shakli, Record emas. Shuning uchun prices.somsa — TS2339: "bunday kalit yo'q".

Bitta kalit unutilsa ham ushlanadi:

type DishName = "osh" | "lagmon" | "manti";

const prices = {
  osh: 35000,
  lagmon: 28000,
} satisfies Record<DishName, number>;

Kompilyator:

TS2741: Property 'manti' is missing in type '{ osh: number; lagmon: number; }' but required in type 'Record<DishName, number>'.

TypeScript aytyapti: «{ osh: number; lagmon: number; } da manti kaliti yo'q, Record<DishName, number> da esa u majburiy». Menyuga yangi taom qo'shilsa, narxini unutib bo'lmaydi.

Ortiqcha kalit esa — o'tgan darslardan tanish TS2353: satisfies dagi obyekt ham yangi literal.

4.3 Union qiymatlar: satisfies aniq variantni eslaydi

satisfies ning eng chiroyli foydasi — qiymat union bo'lganda. Narx — son yoki oraliq (somsa kattaligiga qarab):

type Price = number | { from: number; to: number };

const annotated: Record<"osh" | "somsa", Price> = {
  osh: 35000,
  somsa: { from: 8000, to: 10000 },
};
console.log(annotated.osh.toFixed(0));

Kompilyator:

TS2339: Property 'toFixed' does not exist on type 'Price'.
  Property 'toFixed' does not exist on type '{ from: number; to: number; }'.

Annotatsiya bilan annotated.osh — Price, ya'ni "son yoki oraliq". Biz osh narxi son ekanini yozdik, TypeScript esa unutdi. satisfies bilan esa har kalit o'z aniq turini saqlaydi:

type Price = number | { from: number; to: number };

const checked = {
  osh: 35000,
  somsa: { from: 8000, to: 10000 },
} satisfies Record<"osh" | "somsa", Price>;
console.log(checked.osh.toFixed(0), checked.somsa.to); // 35000 10000

checked.osh — number, checked.somsa — oraliq obyekt. Tekshiruv bir xil (har qiymat Price ga mos), lekin toraytirish shart emas.

4.4 as const satisfies — ikkalasi birga

O'zgarmas sozlamalar uchun eng kuchli yozuv:

type Status = "yangi" | "tayyor";

const LABELS = {
  yangi: "Navbatda",
  tayyor: "Olib keting",
} as const satisfies Record<Status, string>;

const label: "Navbatda" = LABELS.yangi;
console.log(label, Object.keys(LABELS).length); // Navbatda 2

as const — qiymatlar literal va readonly (Union darsi), satisfies — har holatga matn borligi tekshiriladi. LABELS.yangi ning turi — aynan "Navbatda", string emas. LABELS.yangi = "…" — TS2540.

vazifalar da shunday jadval TypeScript va DOM qadamida paydo bo'ladi:

// satisfies: har holatga matn bormi — tekshiradi, lekin tur
// kengaytirilmaydi (aloqaMatnlari.tayyor turi — "" literal)
const aloqaMatnlari = Object.freeze({
  yuklanmoqda: "Server bilan solishtirilmoqda…",
  tayyor: "",
  xato: "Serverga ulanib bo'lmadi. Ro'yxat — shu brauzerdagi nusxa.",
  oflayn: "Internet yo'q. Ro'yxat — shu brauzerdagi nusxa.",
} satisfies Record<TarmoqHolati, string>);

TarmoqHolati (Discriminated union qadamidagi union) ga yangi holat qo'shilsa, bu yerda TS2741 chiqadi — matn yozish unutilmaydi.

Tekshirib ko'ring: const HOURS = { open: 7, close: 23 } satisfies Record<string, number>; — HOURS.open ning turi qanday? HOURS.lunch ni o'qish mumkinmi? Annotatsiya (const HOURS: Record<string, number> = …) bilan-chi?

5. Annotatsiya, as yoki satisfies?

flowchart TD
  A["Qiymatga tur kerak"] --> B{"Qiymat shu yerda<br/>yozilganmi?"}
  B -- "ha" --> C{"Aniq kalit va literallar<br/>kerakmi?"}
  C -- "ha" --> S["satisfies T"]
  C -- "yo'q" --> N["const x: T = …"]
  B -- "yo'q: JSON, DOM, kutubxona" --> D{"Tekshirsa bo'ladimi?"}
  D -- "ha" --> G["predikat / assertion<br/>(o'tgan dars)"]
  D -- "yo'q, aniq bilaman" --> AS["as T + izoh"]

Qisqa qoida: tekshiradigan yozuvni tanlang. as va ! — oxirgi chora.

6. Ko'p uchraydigan xatolar

6.1 as ni aylantirish deb o'ylash

"35000" as number — TS2352; as unknown as number — qiymat baribir satr. Tuzatish: haqiqiy aylantirish — Number("35000").

6.2 Server javobini as bilan "turlash"

(await res.json()) as MenuItem[] — tekshiruv yo'q. Tuzatish: predikat yoki assertion (o'tgan dars), keyinroq — Zod.

6.3 Har undefined ga !

find(…)!, get(…)! — xatoni ishlash paytiga ko'chiradi. Tuzatish: ??, ?. yoki tekshiruv + throw.

6.4 Sozlama jadvaliga annotatsiya

const LABELS: Record<Status, string> = … — ishlaydi, lekin literal qiymatlar yo'qoladi. Tuzatish: as const satisfies Record<Status, string>.

7. Mashqlar

1-mashq (oson): Qaysi biri tekshiradi?

const a = { x: 1 } as { x: string }; — tsc xato beradimi (ha/yo'q): [:ha]. const b = JSON.parse("1") as string; — xato beradimi: [:yo'q]. { x: "1" } satisfies { x: number } xatosining kodi: TS.

2-mashq (o'rta): ! ni olib tashlang

Funksiya mehmonning stolini topadi. Ikkita ! ni olib tashlang: stol topilmasa — RangeError (xabarida mehmon ismi), izoh bo'lmasa — "izohsiz".

type Table = { guest: string; seats: number; note?: string };

function tableInfo(tables: readonly Table[], guest: string): string {
  const table = tables.find((t) => t.guest === guest)!;
  return `${table.seats} kishi, ${table.note!.trim()}`;
}

const today: Table[] = [{ guest: "Malika", seats: 2 }];
console.log(tableInfo(today, "Malika"));

Konsolda:

TypeError: Cannot read properties of undefined (reading 'trim')

type Table = { guest: string; seats: number; note?: string };

function tableInfo(tables: readonly Table[], guest: string): string {
  const table = tables.find((t) => t.guest === guest);
  if (table === undefined) {
    throw new RangeError(`Bron topilmadi: ${guest}`);
  }
  const note = table.note?.trim() ?? "izohsiz";
  return `${table.seats} kishi, ${note}`;
}

const today: Table[] = [{ guest: "Malika", seats: 2 }];
console.log(tableInfo(today, "Malika")); // 2 kishi, izohsiz

3-mashq (qiyin): Amaliy tajriba — narxlar jadvali

Mashq kurs/mashqlar/15/ da. Sardorning birinchi varianti tsc dan xatosiz o'tadi:

// 14-satisfies/prices.ts — «Bahor» narxlari (birinchi variant)
export const DISHES = ["osh", "lagmon", "manti", "choy"] as const;
export type DishName = (typeof DISHES)[number];

export const PRICES = {
  osh: 35000,
  lagmon: 28000,
  manti: 30000,
} as Record<DishName, number>;

export function priceOf(name: DishName): number {
  return PRICES[name];
}

export function parseDish(text: string): DishName {
  return DISHES.find((dish) => dish === text)!;
}

1. 14-satisfies/prices.test.ts da uchta test yozing: hamma taomning narxi son (choy — 5 000); parseDish("manti"); parseDish("somsa") — RangeError. Birinchi variantda ishga tushiring.
2. as ni satisfies ga almashtiring va npx tsc --pretty false ni o'qing.
3. Ikkala xatoni tuzating: PRICES to'liq bo'lsin, parseDish dagi ! o'rniga tekshiruv.
4. orderTotal(names) qo'shing — taomlar ro'yxatining jami narxi — va test yozing.

14-satisfies/prices.ts(9,3): error TS2741: Property 'choy' is missing in type '{ osh: number; lagmon: number; manti: number; }' but required in type 'Record<"choy" | "lagmon" | "manti" | "osh", number>'.
14-satisfies/prices.ts(12,10): error TS7053: Element implicitly has an 'any' type because expression of type '"choy" | "lagmon" | "manti" | "osh"' can't be used to index type '{ osh: number; lagmon: number; manti: number; }'.
  Property 'choy' does not exist on type '{ osh: number; lagmon: number; manti: number; }'.

// 14-satisfies/prices.ts — «Bahor» narxlari
export const DISHES = ["osh", "lagmon", "manti", "choy"] as const;
export type DishName = (typeof DISHES)[number];

// satisfies: har taomga narx bormi va hammasi sonmi — tekshiradi,
// lekin turni Record'ga kengaytirmaydi (kalitlar aniq qoladi)
export const PRICES = {
  osh: 35000,
  lagmon: 28000,
  manti: 30000,
  choy: 5000,
} satisfies Record<DishName, number>;

export function priceOf(name: DishName): number {
  return PRICES[name];
}

// ! o'rniga — aniq tekshiruv va tushunarli xato
export function parseDish(text: string): DishName {
  const dish = DISHES.find((name) => name === text);
  if (dish === undefined) {
    throw new RangeError(`Menyuda yo'q: ${text}`);
  }
  return dish;
}

export function orderTotal(names: readonly DishName[]): number {
  return names.reduce((sum, name) => sum + priceOf(name), 0);
}

// 14-satisfies/prices.test.ts
import { test } from "node:test";
import assert from "node:assert/strict";
import {
  DISHES,
  priceOf,
  parseDish,
  orderTotal,
} from "./prices.ts";

test("priceOf: har taomning narxi bor", () => {
  for (const dish of DISHES) {
    assert.equal(typeof priceOf(dish), "number");
  }
  assert.equal(priceOf("choy"), 5000);
});

test("parseDish: ro'yxatdagi nom", () => {
  assert.equal(parseDish("manti"), "manti");
});

test("parseDish: begona nom — RangeError", () => {
  assert.throws(() => parseDish("somsa"), RangeError);
});

test("orderTotal: osh va ikki choy", () => {
  assert.equal(orderTotal(["osh", "choy", "choy"]), 45000);
  assert.equal(orderTotal([]), 0);
});

✔ priceOf: har taomning narxi bor (1.7093ms)
✔ parseDish: ro'yxatdagi nom (0.4235ms)
✔ parseDish: begona nom — RangeError (0.8652ms)
✔ orderTotal: osh va ikki choy (0.4434ms)
ℹ tests 4
ℹ suites 0
ℹ pass 4
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 283.8014

git add 15/14-satisfies 15/XATOLAR.md
git commit -m "15/14: prices.ts — satisfies va tekshiruv"

8. Real ishda

• Kod ko'rib chiqishda as va ! — eng ko'p savol beriladigan joylar. Ko'p jamoalarda qoida: as faqat izoh bilan, as unknown as — faqat testlarda.
• satisfies — sozlama obyektlari, marshrutlar jadvali, tarjima matnlari (i18n), rang palitralari uchun standart yozuv bo'lib qoldi: kalitlar aniq, qiymatlar tekshirilgan.
• Sozlama fayllari: Vite hujjatlarida (16-qismda o'rganamiz) vite.config.ts uchun export default { … } satisfies UserConfig yozuvi ko'rsatilgan: sozlama tekshiriladi, muharrir esa har maydonga avtoto'ldirish beradi.
• vazifalar da kanon as ni deyarli ishlatmaydi: API ma'lumotlarini tiplash qadamida oxirgi as ServerRoyxati ham tekshiruv funksiyasiga almashadi.
• Intervyu: "as va satisfies farqi?", "Non-null assertion nima va nega xavfli?", "as const — bu ham assertion'mi?" — tez-tez so'raladi. (Javob: as const — maxsus "const assertion", u turni kengaytirmaydi va hech narsani yashirmaydi.)

Xulosa

• x as T — tekshirmaydi, aylantirmaydi, .js da o'chadi. Bog'liqsiz turlar orasida TS2352, as unknown as T esa hamma himoyani o'chiradi.
• x! — "null/undefined emas" degan va'da. O'rniga: ??, ?., tekshiruv + throw.
• x satisfies T — moslikni tekshiradi (TS2322, TS2741, TS2353), lekin qiymatning aniq turini saqlaydi.
• as const satisfies T — o'zgarmas sozlamalar uchun: literal qiymatlar + tekshiruv.
• Qoida: tekshiradigan yozuvni tanlang; as va ! — oxirgi chora va izoh bilan.

Keyingi dars: null va undefined bilan xavfsiz ishlash — strictNullChecks qanday ishlaydi va vazifalar ning uchta moduli .ts ga o'tganda u nechta xatoni topadi.

Manbalar

• TypeScript Handbook: "Everyday Types" → Type Assertions, Non-null Assertion Operator — typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions
• TypeScript Release Notes 4.9 (satisfies operatori, 2022-11) — typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html
• typescript-eslint: no-non-null-assertion, consistent-type-assertions — typescript-eslint.io/rules/