การระบุชนิดตามบริบท: การอนุมานจากบริบท

การกำหนดชนิดข้อมูลตามบริบทคืออะไร

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

การกำหนดชนิดข้อมูลตามบริบทในฟังก์ชันเรียกกลับ

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

การกำหนดชนิดข้อมูลตามบริบทและค่าลิเทอรัลของออบเจ็กต์

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

การกำหนดชนิดข้อมูลตามบริบทใน JSX

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

การกำหนดชนิดข้อมูลตามบริบทเทียบกับคำอธิบายชนิดข้อมูลอย่างชัดเจน

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

การกำหนดชนิดข้อมูลตามบริบทด้วยการแยกโครงสร้าง

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

การกำหนดชนิดข้อมูลตามบริบทและชนิดข้อมูลของค่าที่ส่งคืน

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

การกำหนดชนิดข้อมูลตามบริบทในนิพจน์แบบมีเงื่อนไข

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

ข้อจำกัดของการกำหนดชนิดข้อมูลตามบริบท

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

การอนุมานชนิดข้อมูลสองทิศทาง

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

สรุป: การกำหนดชนิดข้อมูลตามบริบท

ตรวจสอบอย่างรวดเร็ว

สิ่งที่คุณได้เรียนรู้