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

กำจัด 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. กำจัด any และเลือกใช้ unknown ร่วมกับการจำกัดชนิดข้อมูล
  2. บังคับใช้แฟล็กแบบเข้มงวดทีละขั้น
← กลับไปที่ TypeScript Academy