TypeScript Academy · บทเรียน

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

ใช้ตัวดำเนินการ ! เพื่อยืนยันว่าค่าไม่ใช่ null หรือ undefined

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

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

ตัวดำเนินการต่อท้าย ! บอก TypeScript ว่า “ค่านี้ไม่ใช่ null หรือ undefined ณ จุดนี้” ตัวดำเนินการนี้นำค่าดังกล่าวออกจากชนิดโดยไม่มีการตรวจสอบขณะทำงาน

function firstChar(s: string | null): string {
  return s!.charAt(0); // assert s is not null
}
console.log(firstChar('hello'));

ตำแหน่งที่วาง !

วาง ! ต่อท้ายด่วนหลังนิพจน์ที่ต้องการยืนยัน ก่อนเข้าถึงส่วนอื่นต่อไป ตัวดำเนินการนี้จะตัด null | undefined ออกจากชนิดของนิพจน์นั้น

type Box = { value?: number };
const box: Box = { value: 7 };
const n: number = box.value!; // value is number | undefined -> number
console.log(n);

การยืนยันว่าไม่เป็นค่าว่างหลังการตรวจสอบ

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

const list: Array<string | null> = ['a', null, 'c'];
const present = list.filter((x) => x !== null);
// TS may still see string | null; assert if certain:
console.log(present[0]!.toUpperCase());

มีผลเฉพาะขณะคอมไพล์เช่นเดิม

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

function risky(s: string | null): number {
  return s!.length; // no runtime guard
}
console.log(risky('hi'));
// risky(null) would throw at runtime

อันตรายของ !

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

type User = { name?: string };
const u: User = {};
// const len = u.name!.length; // compiles, crashes at runtime
console.log('name is undefined here -> ! would crash');

เลือกใช้การตรวจสอบจริง

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

type User = { name?: string };
function nameLen(u: User): number {
  if (u.name) return u.name.length; // checked
  return 0;
}
console.log(nameLen({ name: 'Ada' }), nameLen({}));

การยืนยันการกำหนดค่าแน่นอน

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

let token!: string; // promise: assigned before use
function init() { token = 'abc123'; }
init();
console.log(token.length);

การกำหนดค่าแน่นอนในคลาส

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

class Service {
  config!: { url: string }; // set later by setup()
  setup() { this.config = { url: '/api' }; }
}
const s = new Service();
s.setup();
console.log(s.config.url);

ใช้การกำหนดค่าแน่นอนอย่างระมัดระวัง

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

class Late {
  data!: number[];
  read() { return this.data.length; } // crashes if called before init
}
const l = new Late();
l.data = [1, 2];
console.log(l.read());

! เทียบกับการเชื่อมต่อแบบเลือกได้

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

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host ?? 'localhost'); // safe
// c.db!.host! would crash here

กรณีที่ควรใช้ !

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

const cache = new Map<string, number>();
cache.set('hits', 0);
// We just set it, so get is non-null:
const hits = cache.get('hits')!;
console.log(hits);

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

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

สรุป: การยืนยันว่าไม่เป็นค่าว่าง

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

ตัวดำเนินการต่อท้าย ! จะลบ null | undefined ออกจากชนิดข้อมูลเฉพาะขณะคอมไพล์เท่านั้น
ตัวดำเนินการนี้ไม่ตรวจสอบขณะทำงาน ดังนั้นการยืนยันที่ไม่ถูกต้องยังคงทำให้โปรแกรมล่ม
let x!: T คือการยืนยันการกำหนดค่าอย่างแน่นอนสำหรับค่าที่จะกำหนดภายหลัง
ควรเลือกใช้การตรวจสอบจริงหรือการเชื่อมต่อแบบเลือกได้ และสงวน ! ไว้สำหรับการรับประกันที่เป็นจริงเท่านั้น

ต่อไปคือการยืนยันซ้อนและความเสี่ยงของมัน

const map = new Map<string, number>();
map.set('a', 1);
const v = map.get('a')!;
console.log(v);

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

บทเรียน “ตัวดำเนินการยืนยันว่าไม่เป็นค่าว่าง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการยืนยันว่าไม่เป็นค่าว่าง”

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

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

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

บทเรียน “ตัวดำเนินการยืนยันว่าไม่เป็นค่าว่าง” ใช้เวลานานแค่ไหน

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

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

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

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

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