TypeScript Academy · บทเรียน

คีย์เวิร์ด as สำหรับการยืนยันชนิดข้อมูล

แทนที่ชนิดข้อมูลที่อนุมานได้อย่างตั้งใจด้วย as

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

การยืนยันชนิดคืออะไร

การยืนยันชนิด เป็นการบอกคอมไพเลอร์ว่า “เชื่อเถอะ ฉันรู้ว่าค่านี้มีชนิดเป็น T” โดยใช้คีย์เวิร์ด as: value as Type การยืนยันนี้เปลี่ยนมุมมองของตัวตรวจสอบชนิดที่มีต่อค่า ไม่ได้เปลี่ยนค่าจริง

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

ไวยากรณ์การยืนยันชนิด

เขียนนิพจน์ ตามด้วย as แล้วจึงเขียนชนิดเป้าหมาย นอกจากนี้ยังมีไวยากรณ์แบบวงเล็บแหลมรุ่นเก่า แต่ควรใช้ as มากกว่า เพราะใช้ได้ทุกที่ รวมถึงไฟล์ JSX/TSX

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

การยืนยันไม่เปลี่ยนค่าขณะทำงาน

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

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

กรณีที่การยืนยันชนิดใช้ได้

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

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

การยืนยันชนิดโดยตรงที่ไม่ถูกต้อง

หากชนิดสองชนิดไม่มีส่วนที่ทับซ้อนกัน TypeScript จะปฏิเสธการยืนยันโดยตรง เพราะมองว่าอาจเป็นความผิดพลาด ตัวอย่างเช่น การยืนยัน string เป็น number โดยตรงจะถูกป้องกันไว้

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

การจำแนกยูเนียนให้แคบลงด้วยการยืนยันชนิด

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

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

การยืนยันชนิดองค์ประกอบ DOM

ตัวอย่างการใช้งานจริงที่คลาสสิกคือ การค้นหาใน DOM ส่งกลับชนิดกว้างอย่าง HTMLElement | null เมื่อคุณทราบว่าองค์ประกอบนั้นเป็นชนิดใดโดยเฉพาะ ให้ยืนยันชนิดเพื่อเข้าถึงคุณสมบัติเฉพาะขององค์ประกอบนั้น

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

เหตุผลที่ต้องยืนยันชนิดของ DOM

API ของ DOM ไม่สามารถรู้ได้ว่าคุณจะได้รับองค์ประกอบชนิดใด จึงส่งกลับชนิดทั่วไป การยืนยันชนิดย่อยที่เจาะจง (เช่น HTMLInputElement) ทำให้เข้าถึงคุณสมบัติอย่าง value หรือ checked ได้

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

การยืนยันด้วย const เป็นกรณีพิเศษ

คุณเคยเห็น as const มาแล้ว นี่คือการยืนยันชนิดแบบพิเศษที่ทำให้ค่าเป็นแบบอ่านอย่างเดียวโดยสมบูรณ์ พร้อมใช้ชนิดลิเทอรัล การยืนยันนี้เป็นแบบเดียวที่ปลอดภัยเสมอ เพราะทำเพียงจำแนกชนิดให้แคบลง

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

การยืนยันชนิดหลีกเลี่ยงการตรวจสอบความปลอดภัย

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

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

เลือกการจำแนกชนิดแทนการยืนยัน

เมื่อทำได้ ควรเลือกการจำแนกชนิดขณะทำงาน (ตัวตรวจสอบชนิด) แทนการยืนยัน การจำแนกชนิดเป็นการพิสูจน์ชนิด ส่วนการยืนยันเป็นเพียงการอ้างว่าชนิดนั้นถูกต้อง ควรสงวน as ไว้สำหรับกรณีที่การจำแนกชนิดไม่สามารถสื่อสิ่งที่ต้องการได้ เช่น การระบุชนิดเฉพาะของ DOM

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

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

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

สรุป: การยืนยันด้วย as

คุณได้เรียนรู้ว่า:

value as Type บอกคอมไพเลอร์ให้ปฏิบัติต่อค่าเสมือนเป็นชนิดที่กำหนด
การยืนยันมีผลเฉพาะ ขณะคอมไพล์ เท่านั้น — ไม่มีการแปลงหรือตรวจสอบขณะทำงาน
การยืนยันทำได้เฉพาะระหว่างชนิดที่ มีส่วนที่ทับซ้อนกัน
การใช้งานที่ถูกต้องที่พบบ่อย ได้แก่ การจำแนก unknown ให้แคบลง และการระบุชนิดองค์ประกอบ DOM ให้เฉพาะเจาะจง ควรเลือกการจำแนกชนิดเมื่อทำได้

ต่อไปคือตัวดำเนินการยืนยันว่าไม่เป็นค่าว่าง

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

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

บทเรียน “คีย์เวิร์ด as สำหรับการยืนยันชนิดข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คีย์เวิร์ด as สำหรับการยืนยันชนิดข้อมูล”

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

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

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

บทเรียน “คีย์เวิร์ด as สำหรับการยืนยันชนิดข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ TypeScript Academy