กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล
แทนที่ any ด้วย unknown และการจำกัดชนิดข้อมูล เพิ่มตัวตรวจขนาดเล็กและฟังก์ชันยืนยัน แล้วเปิดใช้แฟล็กความเคร่งครัดทีละน้อยโดยไม่ทำให้การสร้างโครงการล้มเหลว
กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 2 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 2 บทเรียน
บทนำ
เป้าหมาย: กำจัดจุดที่ใช้ any มากเกินไป ควรใช้ unknown กับค่าที่ไม่น่าเชื่อถือ และจำกัดชนิดด้วยการตรวจสอบง่าย ๆ คุณจะเพิ่มตัวป้องกันขนาดเล็กและเปิดใช้แฟล็กแบบเข้มงวดทีละขั้น
- any → unknown
- การจำกัดชนิดด้วย typeof/in/instanceof
- ฟังก์ชันยืนยันชนิด
ข้อควรระวังของ any
any ปิดการตรวจสอบความปลอดภัย ทำให้โครงสร้างข้อมูลผิดรูปหรือการคำนวณกับสตริงผ่านการคอมไพล์ไปได้ แล้วจึงล้มเหลวภายหลัง
// any hides bugs
function avgBad(values: any): number {
// Compiles even if values is not an array of numbers
return values.reduce((a: number, b: number) => a + b, 0) / values.length
}
// Runtime crash examples:
// avgBad(123)
// avgBad(["1","2"]) // string addition!unknown และการจำกัดชนิด
ใช้ unknown กับอินพุตจากภายนอก จำกัดชนิดด้วย Array.isArray และ typeof แล้วจึงคำนวณอย่างปลอดภัย
// unknown forces checks
function avg(values: unknown): number {
if (!Array.isArray(values)) throw new Error("values must be an array")
const nums = values.filter((v): v is number => typeof v === "number")
if (nums.length === 0) throw new Error("no numbers")
const sum = nums.reduce((a, b) => a + b, 0)
return sum / nums.length
}
// avg([1,2,3]) → 2; avg("oops") throws early with a clear messageตัวป้องกันชนิด
สร้าง เพรดิเคต x is T เพื่อจำกัดชนิดสำหรับผู้เรียกใช้ได้อย่างเป็นระเบียบ ตัวป้องกันควรมีขนาดเล็กและมุ่งตรวจสอบโครงสร้างโดยเฉพาะ
// Small predicate to reuse narrowing
export type User = { id: string; name: string }
export function isUser(x: unknown): x is User {
return typeof x === "object" && x !== null
&& typeof (x as any).id === "string"
&& typeof (x as any).name === "string"
}
export function hello(x: unknown) {
if (!isUser(x)) throw new Error("invalid user")
return `Hello, ${x.name}`
}ฟังก์ชันยืนยันชนิด
ฟังก์ชันยืนยันชนิด (asserts x is T) จะจำกัดชนิดหลังจากทำงานแล้ว ใช้กับเงื่อนไขเบื้องต้นที่จำเป็น และโยนข้อผิดพลาดพร้อมข้อความที่ชัดเจน
// Assertion function throws or narrows
function assertUser(x: unknown): asserts x is { id: string; name: string } {
if (typeof x !== "object" || x === null) throw new Error("not an object")
const o = x as Record<string, unknown>
if (typeof o.id !== "string" || typeof o.name !== "string") throw new Error("bad user")
}
export function greetUnsafe(x: unknown) {
assertUser(x) // now x is narrowed after this call
return `Hi ${x.name}`
}แผนเพิ่มความเข้มงวด
แผน:
- เปิดใช้
noImplicitAnyและแก้ข้อผิดพลาดใหม่ก่อน - เพิ่มตัวป้องกันสำหรับอินพุตภายนอก
- เปิดใช้
strictNullChecksและจัดการ undefined อย่างชัดเจน - ติดตามการใช้
anyที่เหลือด้วย ESLint และลดลงตามเวลา
การตรวจสอบ unknown เทียบกับ any
ตรวจสอบอย่างรวดเร็ว: เหตุใดจึงควรใช้ unknown แทน any กับข้อมูลที่ไม่น่าเชื่อถือ
สรุปทบทวน
สรุปทบทวน: แทนที่ any ด้วย unknown เพิ่มตัวป้องกันหรือฟังก์ชันยืนยันขนาดเล็ก และเพิ่มแฟล็กแบบเข้มงวดทีละขั้นเพื่อให้การสร้างยังทำงานได้สำเร็จ
คำถามที่พบบ่อย
บทเรียน “กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 2 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล”
แทนที่ any ด้วย unknown และการจำกัดชนิดข้อมูล เพิ่มตัวตรวจขนาดเล็กและฟังก์ชันยืนยัน แล้วเปิดใช้แฟล็กความเคร่งครัดทีละน้อยโดยไม่ทำให้การสร้างโครงการล้มเหลว คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 2 บทเรียน
บทเรียน “กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล
- บังคับใช้แฟล็กแบบเข้มงวดทีละขั้น