0Pricing
TypeScript Academy · บทเรียน

ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies

เขียนตัวตรวจชนิดข้อมูลแบบกำหนดเองด้วยชนิดข้อมูลผลลัพธ์แบบเพรดิเคต และตรวจสอบออบเจ็กต์ด้วยตัวดำเนินการ satisfies โดยไม่ทำให้ชนิดข้อมูลกว้างขึ้น

ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำ

เป้าหมาย: สร้าง ฟังก์ชันตรวจสอบเงื่อนไขที่จำกัดชนิดข้อมูล (เช่น value is T) และใช้ satisfies เพื่อตรวจสอบโครงสร้างโดยไม่ทำให้ชนิดข้อมูลกว้างขึ้น

  • ตัวตรวจสอบแบบกำหนดเอง = การตรวจสอบขณะรันที่นำกลับมาใช้ซ้ำได้
  • satisfies = การตรวจสอบโครงสร้างระหว่างคอมไพล์ โดยคงค่าลิเทอรัลไว้

พื้นฐานของฟังก์ชันตรวจสอบเงื่อนไข

ฟังก์ชันตรวจสอบเงื่อนไขจะคืนค่า x is Type หลังการตรวจสอบ ตัวแปรจะมีชนิดที่แคบลงภายในขอบเขตนั้น

function isNumber(x: unknown): x is number {
  return typeof x === "number"
}

function demo(a: unknown) {
  if (isNumber(a)) {
    // inside: a is number
    return a.toFixed(2)
  }
  return "not a number"
}

ตัวตรวจสอบโครงสร้าง

ตัวตรวจสอบจะตรวจสอบโครงสร้างของอ็อบเจ็กต์ หากผ่านการตรวจสอบ จะถือว่าเป็น User และสามารถใช้งานได้อย่างปลอดภัย

type User = { id: number; name: string }

function isUser(v: unknown): v is User {
  return typeof v === "object" && v !== null &&
    "id" in v && "name" in v &&
    typeof (v as any).id === "number" &&
    typeof (v as any).name === "string"
}

function printUser(u: unknown) {
  if (isUser(u)) {
    console.log(u.name.toUpperCase())
  } else {
    console.log("invalid user")
  }
}

ข้ามขอบเขต

ตัวตรวจสอบช่วยให้ส่งข้อมูลข้ามขอบเขตของฟังก์ชันได้อย่างปลอดภัย: ภายนอกเป็นชนิดที่ไม่รู้จัก และภายในเป็น User ที่ควบคุมชนิดข้อมูลแล้ว

function fetchAndPrint(json: string) {
  const value: unknown = JSON.parse(json)
  if (isUser(value)) {
    // value narrowed to User
    console.log(`User #${value.id}: ${value.name}`)
  } else {
    console.log("Bad payload")
  }
}

satisfies (การกำหนดค่า)

satisfies ตรวจสอบว่านิพจน์สอดคล้องกับรูปแบบการกำหนดค่าหรือไม่ แต่ยังคงชนิดลิเทอรัลของตัวแปรไว้

type Config = { mode: "dev" | "prod"; retries: number }

const cfg = {
  mode: "prod",
  retries: 3,
  // timeout: 1000, // Error with satisfies if not in type
} satisfies Config

// cfg.mode is still the literal "prod" (not widened to string)
// and adding unknown keys raises an error at compile-time

satisfies (อาร์เรย์)

ในอาร์เรย์ จะตรวจสอบโครงสร้างของสมาชิกด้วย as const satisfies โดยคงค่าลิเทอรัลไว้ และช่วยเพิ่มการเติมโค้ดอัตโนมัติ

type Route = { path: `/${string}`; method: "GET" | "POST" }

const routes = [
  { path: "/", method: "GET" },
  { path: "/login", method: "POST" }
] as const satisfies ReadonlyArray<Route>

// each element is checked against Route, literals preserved for DX

การตรวจสอบ satisfies

ตรวจสอบอย่างรวดเร็ว: satisfies ทำหน้าที่อะไร

สรุปทบทวน

สรุปทบทวน: ฟังก์ชันตรวจสอบเงื่อนไข (x is T) ทำหน้าที่เป็นสัญญา ส่วน satisfies ยืนยันรูปแบบและคงชนิดลิเทอรัลไว้ ใช้ทั้งสองอย่างร่วมกัน

คำถามที่พบบ่อย

บทเรียน “ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies”

เขียนตัวตรวจชนิดข้อมูลแบบกำหนดเองด้วยชนิดข้อมูลผลลัพธ์แบบเพรดิเคต และตรวจสอบออบเจ็กต์ด้วยตัวดำเนินการ satisfies โดยไม่ทำให้ชนิดข้อมูลกว้างขึ้น คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. สวิตช์ที่ครอบคลุมทุกกรณีและการตรวจสอบ never
  2. ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies
  3. ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน
← กลับไปที่ TypeScript Academy