TypeScript Academy · บทเรียน

การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล

จำกัดขอบเขตค่า unknown ก่อนนำไปใช้อย่างปลอดภัย

บทเรียน 4 จาก 413 ขั้นตอน

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

การทำงานกับชนิดไม่ทราบแน่ชัดอย่างปลอดภัย

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

function describe(v: unknown): string {
  if (typeof v === 'string') return 'string: ' + v;
  if (typeof v === 'number') return 'number: ' + v;
  return 'other';
}
console.log(describe('hi'), describe(7), describe(true));

การจำแนกชนิดด้วยการตรวจชนิดข้อมูล

ตัวตรวจสอบ typeof เป็นเครื่องมือที่ง่ายที่สุด โดยจำแนก unknown ให้เป็นชนิดพื้นฐาน เช่น string, number, boolean, function, object และชนิดอื่น ๆ

function double(v: unknown): number {
  if (typeof v === 'number') {
    return v * 2; // v is number here
  }
  return 0;
}
console.log(double(21), double('no'));

การจำแนกชนิดด้วยการตรวจอินสแตนซ์

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

function handle(v: unknown): string {
  if (v instanceof Date) {
    return v.toISOString(); // v is Date
  }
  return 'not a date';
}
console.log(handle(new Date(0)));

การจำแนกชนิดด้วยตัวดำเนินการตรวจสมาชิก

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

function getName(v: unknown): string {
  if (typeof v === 'object' && v !== null && 'name' in v) {
    return String((v as { name: unknown }).name);
  }
  return 'anonymous';
}
console.log(getName({ name: 'Ada' }), getName(5));

ตัวตรวจสอบชนิดแบบกำหนดเอง

ตัวตรวจสอบชนิดแบบกำหนดเอง คือฟังก์ชันที่มีชนิดค่าที่ส่งกลับเป็น value is T เมื่อฟังก์ชันส่งกลับค่า true, TypeScript จะจำแนกอาร์กิวเมนต์ให้เป็น T ณ จุดที่เรียกใช้

function isString(v: unknown): v is string {
  return typeof v === 'string';
}

function shout(v: unknown): string {
  return isString(v) ? v.toUpperCase() : '?';
}
console.log(shout('hey'), shout(9));

ตัวตรวจสอบสำหรับโครงสร้างออบเจ็กต์

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

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

function isUser(v: unknown): v is User {
  return typeof v === 'object' && v !== null &&
    'id' in v && 'name' in v;
}
console.log(isUser({ id: 1, name: 'Sam' }), isUser({}));

JSON.parse ส่งกลับข้อมูลที่คล้ายชนิดไม่ทราบแน่ชัด

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

function parseConfig(text: string): unknown {
  return JSON.parse(text);
}
const raw = parseConfig('{"port":8080}');
console.log(typeof raw);

การตรวจสอบ JSON ที่แยกวิเคราะห์แล้ว

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

type Config = { port: number };

function isConfig(v: unknown): v is Config {
  return typeof v === 'object' && v !== null &&
    'port' in v && typeof (v as any).port === 'number';
}

const data: unknown = JSON.parse('{"port":8080}');
if (isConfig(data)) console.log('Port:', data.port);

การเชื่อมตัวตรวจสอบหลายตัว

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

function process(v: unknown): string {
  if (Array.isArray(v)) {
    if (v.every((x) => typeof x === 'string')) {
      return v.join('-');
    }
  }
  return 'invalid';
}
console.log(process(['a', 'b']), process([1, 2]));

การโยนข้อผิดพลาดเมื่อข้อมูลไม่ถูกต้อง

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

function asNumber(v: unknown): number {
  if (typeof v === 'number') return v;
  throw new Error('Expected a number');
}
console.log(asNumber(42));
try { asNumber('x'); } catch (e) { console.log('rejected'); }

การนำทุกอย่างมารวมกัน

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

type Point = { x: number; y: number };
function isPoint(v: unknown): v is Point {
  return typeof v === 'object' && v !== null &&
    'x' in v && 'y' in v;
}
const input: unknown = { x: 1, y: 2 };
if (isPoint(input)) console.log(input.x + input.y);

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

ทดสอบความเข้าใจของคุณเกี่ยวกับการจัดการชนิดไม่ทราบแน่ชัดอย่างปลอดภัย

สรุป: การจัดการชนิดไม่ทราบแน่ชัด

คุณได้เรียนรู้การจำแนก unknown ให้แคบลงด้วย:

  • typeof สำหรับชนิดพื้นฐาน และ instanceof สำหรับอินสแตนซ์ของคลาส
  • ตัวดำเนินการ in สำหรับคุณสมบัติของออบเจ็กต์
  • ตัวตรวจสอบชนิดแบบกำหนดเอง ที่ส่งกลับ value is T
  • การตรวจสอบผลลัพธ์จาก JSON.parse ก่อนเชื่อถือข้อมูล

หลักสูตรถัดไป: การยืนยันชนิดและการแปลงชนิด

function isNonEmpty(v: unknown): v is string {
  return typeof v === 'string' && v.length > 0;
}
console.log(isNonEmpty('hi'), isNonEmpty(''));
เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

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

บทเรียน “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล” ฟรีหรือไม่

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

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

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

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

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

บทเรียน “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

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