ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน
ส่งต่อการจำกัดชนิดข้อมูลอย่างปลอดภัยข้ามขอบเขตฟังก์ชันด้วยยูเนียนแบบจำแนก ผลลัพธ์แบบเพรดิเคต และชนิดข้อมูลรูปแบบ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สวิตช์ที่ครอบคลุมทุกกรณีและการตรวจสอบ never
- ฟังก์ชันเพรดิเคตและตัวดำเนินการ satisfies
- ปรับปรุงยูเนียนข้ามขอบเขตฟังก์ชัน