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

ทำความเข้าใจ unknown เทียบกับ any

เหตุใด unknown จึงเป็นทางเลือกที่ปลอดภัยด้านชนิดข้อมูลมากกว่า any

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

ชนิดระดับบนสุดสองชนิด

TypeScript มีชนิดสองชนิดที่เก็บค่าใด ๆได้ ได้แก่ any และ unknown ทั้งสองดูคล้ายกันแต่มีพฤติกรรมแตกต่างกันมาก การเลือกใช้ชนิดที่เหมาะสมเป็นทักษะสำคัญของการเขียนโค้ดที่ปลอดภัยด้านชนิด

let a: any = 5;
let u: unknown = 5;
console.log(a, u);

any ปิดการตรวจสอบชนิด

any เป็นทางออกพิเศษที่ปิดตัวตรวจสอบชนิดสำหรับค่านั้น คุณจะเข้าถึงพร็อพเพอร์ตีใด ๆ หรือเรียกใช้ค่านั้นเหมือนฟังก์ชันก็ได้ คอมไพเลอร์จะไม่แจ้งเตือน แม้ว่าการทำเช่นนั้นอาจทำให้เกิดข้อผิดพลาดขณะทำงาน

const a: any = 'hello';
console.log(a.toUpperCase()); // OK
// a.doesNotExist(); // no compile error, but crashes at runtime

unknown บังคับให้ตรวจสอบ

unknown ยอมรับค่าใด ๆ ได้เช่นกัน แต่คุณไม่สามารถใช้งานค่านั้นได้จนกว่าจะพิสูจน์ได้ว่าค่านั้นเป็นอะไร คอมไพเลอร์จะป้องกันการเข้าถึงพร็อพเพอร์ตีและการเรียกใช้ จนกว่าคุณจะทำให้ชนิดแคบลง

const u: unknown = 'hello';
// console.log(u.toUpperCase()); // Error: u is unknown
console.log(typeof u);

ทำให้ unknown แคบลงด้วย typeof

ตัวตรวจสอบ typeof จะทำให้ unknown แคบลงเป็นชนิดรูปธรรมภายในบล็อก เมื่อชนิดแคบลงแล้ว เมธอดทั้งหมดของชนิดนั้นจะพร้อมใช้งานอย่างปลอดภัย

function shout(value: unknown): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // safe here
  }
  return 'not a string';
}
console.log(shout('hi'), shout(42));

เหตุใด unknown จึงปลอดภัยกว่า

unknown แสดงถึงความไม่แน่นอนอย่างตรงไปตรงมา นั่นคือ ยังไม่ทราบว่าค่านี้คืออะไร มันบังคับให้คุณตรวจสอบค่าก่อนใช้งาน จึงช่วยจับข้อผิดพลาดขณะคอมไพล์ ส่วน any เพียงซ่อนทั้งความไม่แน่นอนและข้อผิดพลาดไว้

function len(value: unknown): number {
  if (typeof value === 'string') return value.length;
  if (Array.isArray(value)) return value.length;
  return 0;
}
console.log(len('abc'), len([1, 2]), len(99));

การกำหนดค่าให้และจาก unknown

ค่าทุกชนิดสามารถกำหนดให้กับ unknown ได้ แต่ unknown สามารถกำหนดให้กับ unknown หรือ any เท่านั้น ไม่สามารถกำหนดให้ชนิดเฉพาะเจาะจงได้หากยังไม่ทำให้ชนิดแคบลง ความไม่สมมาตรนี้เองที่ทำให้มันปลอดภัย

let u: unknown = 10;
u = 'now a string';
u = true;
const anyVal: any = u; // allowed
console.log(anyVal);
// const s: string = u; // Error

any แพร่กระจายไปทั่วโค้ด

คุณสมบัติที่อันตรายของ any คือการแพร่กระจาย เมื่อค่าหนึ่งเป็น any ทุกสิ่งที่สร้างต่อมาจากค่านั้นก็จะกลายเป็น any ด้วย ส่งผลให้ความปลอดภัยด้านชนิดในโปรแกรมลดลงโดยไม่มีการแจ้งเตือน

const a: any = { count: 5 };
const total = a.count + 10; // total is any
const flag = total.whatever; // still any, no error
console.log(total);

unknown จำกัดความเสี่ยงไว้

เมื่อใช้ unknown ความไม่แน่นอนจะยังคงอยู่ที่เดิม คุณต้องทำให้ชนิดแคบลงอย่างชัดเจนที่แต่ละขอบเขต การดำเนินการที่ไม่ปลอดภัยจึงไม่สามารถรั่วไหลไปยังส่วนอื่นได้ ความเสี่ยงถูกจำกัดไว้ในจุดที่ควรอยู่

const u: unknown = { count: 5 };
if (typeof u === 'object' && u !== null && 'count' in u) {
  console.log('Has count property');
}

การระบุชนิดที่ขอบเขต API และ JSON

ข้อมูลจากภายนอก เช่น JSON การตอบกลับจากเครือข่าย และข้อมูลที่ผู้ใช้ป้อน ไม่มีการรับประกันใด ๆ การระบุข้อมูลเหล่านี้เป็น unknown แทน any จะบังคับให้ตรวจสอบก่อนเชื่อถือข้อมูล ซึ่งเป็นค่าเริ่มต้นที่ปลอดภัย

function parse(text: string): unknown {
  return JSON.parse(text);
}
const data = parse('{"id":1}');
if (typeof data === 'object' && data !== null) {
  console.log('Got an object');
}

เมื่อใดที่ใช้ any ได้

any อาจเหมาะสมในบางครั้ง เช่น การทำต้นแบบอย่างรวดเร็ว การย้ายจาก JavaScript แบบค่อยเป็นค่อยไป หรือการทำงานร่วมกับไลบรารีที่ไม่มีการระบุชนิด แต่ควรใช้เป็นเครื่องหมายชั่วคราว ไม่ใช่สิ่งที่ทำจนเป็นนิสัย หากทำได้ ให้เลือก unknown แทน

// Migration placeholder, to be typed later
let legacy: any = getLegacyValue();
function getLegacyValue() { return { x: 1 }; }
console.log(legacy.x);

การเปรียบเทียบในทางปฏิบัติ

เมื่อเปรียบเทียบกันโดยตรง เวอร์ชันที่ใช้ any คอมไพล์ผ่านแต่ยังอาจทำให้โปรแกรมหยุดทำงาน ส่วนเวอร์ชันที่ใช้ unknown จะไม่ยอมให้คอมไพล์การเข้าถึงที่ไม่ปลอดภัย คอมไพเลอร์กำลังทำหน้าที่ของมัน นั่นคือปกป้องคุณ

const a: any = 42;
console.log(a.toFixed(2)); // OK by luck

const u: unknown = 42;
if (typeof u === 'number') {
  console.log(u.toFixed(2)); // checked, safe
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่อง unknown กับ any

ทบทวน: unknown กับ any

ประเด็นสำคัญ:

  • any ปิดการตรวจสอบชนิดและแพร่กระจายไปยังค่าที่สร้างต่อมา
  • unknown ยอมรับค่าใด ๆ ได้ แต่จะป้องกันการใช้งานจนกว่าคุณจะทำให้ชนิดนั้นแคบลง
  • ใช้ unknown กับข้อมูลภายนอก เช่น JSON, API และข้อมูลที่ผู้ใช้ป้อน เพื่อบังคับให้ตรวจสอบข้อมูล
  • สงวน any ไว้สำหรับการย้ายระบบหรือการทำงานร่วมกับโค้ดที่ไม่มีการระบุชนิด โดยใช้เป็นเครื่องหมายชั่วคราว

ต่อไป เราจะสำรวจชนิดว่างเปล่า นั่นคือ never

function safeLen(v: unknown): number {
  return typeof v === 'string' ? v.length : 0;
}
console.log(safeLen('hello'), safeLen(123));

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

บทเรียน “ทำความเข้าใจ unknown เทียบกับ any” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ทำความเข้าใจ unknown เทียบกับ any”

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

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

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

บทเรียน “ทำความเข้าใจ unknown เทียบกับ any” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ทำความเข้าใจ unknown เทียบกับ any
  2. ชนิด never และสถานะที่เป็นไปไม่ได้
  3. ชนิด void ในฟังก์ชัน
  4. การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล
← กลับไปที่ TypeScript Academy