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

ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน

ส่งต่อการจำกัดชนิดข้อมูลอย่างปลอดภัยข้ามขอบเขตฟังก์ชันด้วยยูเนียนแบบจำแนก ผลลัพธ์แบบเพรดิเคต และชนิดข้อมูลรูปแบบ Result

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

บทนำ

เป้าหมาย: รักษา การจำกัดชนิดข้อมูลให้คงอยู่ข้ามการเรียกใช้ฟังก์ชัน โดยใช้ ยูเนียนแบบติดป้ายกำกับ, ผลลัพธ์จากฟังก์ชันตรวจสอบเงื่อนไข และตัวช่วย การตรวจสอบ

  • ไม่มี as ที่ไม่ปลอดภัย ณ จุดเรียกใช้
  • การปรับชนิดข้อมูลจะเดินทางไปพร้อมกับข้อมูล

ผลลัพธ์จากยูเนียนแบบติดป้ายกำกับ

รูปแบบผลลัพธ์: ผู้เรียกจะจำกัดชนิดข้อมูลด้วยการตรวจสอบ ok ไม่ต้องแปลงชนิด และมีลำดับการควบคุมที่ชัดเจน

type Ok<T> = { ok: true; value: T }
type Err = { ok: false; error: string }

type Result<T> = Ok<T> | Err

function parseIntSafe(s: string): Result<number> {
  const n = Number(s)
  return Number.isFinite(n) ? { ok: true, value: n } : { ok: false, error: "NaN" }
}

function useIt(s: string) {
  const r = parseIntSafe(s)
  if (r.ok) {
    // r is Ok<number>
    return r.value * 2
  }
  // r is Err
  return `bad: ${r.error}`
}

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

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

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

type MaybeUser = User | null

function hasUser(x: MaybeUser): x is User {
  return x !== null
}

function greet(x: MaybeUser) {
  if (hasUser(x)) {
    // x narrowed to User
    return `Hello ${x.name}`
  }
  return "Anonymous"
}

ส่งต่อการปรับชนิดข้อมูล

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

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number }

function isCircle(s: Shape): s is Extract<Shape, { kind: "circle" }> {
  return s.kind === "circle"
}

function area(s: Shape) {
  if (isCircle(s)) {
    // s is circle here
    return Math.PI * s.radius * s.radius
  }
  return s.size * s.size
}

ตรวจสอบที่ขอบเขต

ตรวจสอบที่ขอบเขตและคืนค่าถูกต้อง/ไม่ถูกต้อง ผู้เรียกจะจำกัดชนิดข้อมูลด้วยป้ายกำกับและได้รับข้อมูลที่มีชนิดข้อมูลครบถ้วน

type Payload = { email: string; retries?: number }

type Valid = { ok: true; data: Required<Payload> }
type Invalid = { ok: false; issues: string[] }

type Validation = Valid | Invalid

function validate(p: unknown): Validation {
  const issues: string[] = []
  if (typeof p !== "object" || p === null) return { ok: false, issues: ["not an object"] }
  const x = p as any
  if (typeof x.email !== "string") issues.push("email:string")
  if (x.retries !== undefined && typeof x.retries !== "number") issues.push("retries:number")
  if (issues.length) return { ok: false, issues }
  return { ok: true, data: { email: x.email, retries: x.retries ?? 0 } }
}

function handle(p: unknown) {
  const v = validate(p)
  if (!v.ok) return `bad: ${v.issues.join(",")}`
  // v.data is fully typed here
  return `send to ${v.data.email} (${v.data.retries})`
}

เคล็ดลับ

แนวทางปฏิบัติที่ดี:

  • เลือกใช้ป้ายกำกับขนาดเล็กและคงที่ (ok, ชนิด)
  • รวมการตรวจสอบไว้ในตัวช่วยฟังก์ชันตรวจสอบเงื่อนไข
  • ใช้คำสั่งแยกกรณีแบบครบทุกกรณี ณ จุดเรียกใช้
  • หลีกเลี่ยง any และการแปลงชนิดที่ไม่ปลอดภัย

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

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

สรุปทบทวน

สรุปทบทวน: ส่งต่อการปรับชนิดข้อมูลไปพร้อมกับข้อมูล (ผลลัพธ์) ตรวจสอบที่ขอบเขต และหลีกเลี่ยงการแปลงชนิดที่ไม่ปลอดภัย ผู้เรียกจะจำกัดชนิดข้อมูลด้วยการตรวจสอบป้ายกำกับอย่างง่าย

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

บทเรียน “ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน”

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

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

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

บทเรียน “ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน” ใช้เวลานานแค่ไหน

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

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

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

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

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