تحديد النوع السياقي: الاستدلال من السياق

ما الكتابة السياقية؟

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

مراجعة: الكتابة السياقية

تحقق سريع

ما تعلمته