TypeScript Academy · บทเรียน

ชนิด void ในฟังก์ชัน

ทำความเข้าใจความแตกต่างระหว่าง void กับ undefined ในตำแหน่งค่าที่ฟังก์ชันส่งกลับ

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

ชนิดค่าที่ส่งกลับแบบไม่มีค่า

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

function log(message: string): void {
  console.log(message);
}
log('Hello void');

การอนุมานชนิดไม่มีค่า

หากฟังก์ชันไม่มีคำสั่ง return (หรือมีเพียง return; เปล่า) TypeScript จะอนุมานเป็น void โดยอัตโนมัติ โดยทั่วไปแทบไม่จำเป็นต้องเขียนชนิดนี้อย่างชัดเจน แม้การเขียนจะช่วยบอกเจตนาของโค้ดก็ตาม

function greet(name: string) {
  console.log('Hi ' + name);
  // no return -> inferred void
}
greet('Ada');

ชนิดไม่มีค่าเทียบกับค่าที่ไม่ได้กำหนด

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

function a(): void { /* returns nothing useful */ }
function b(): undefined { return undefined; }
console.log(a(), b());

ไม่ควรใช้ผลลัพธ์ชนิดไม่มีค่า

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

function save(): void {
  console.log('saved');
}
const result = save(); // result has type void
console.log(result); // undefined at runtime

ชนิดไม่มีค่าในชนิดฟังก์ชันเรียกกลับ

มีกฎที่ละเอียดอ่อนแต่ทรงพลังอยู่ว่า ฟังก์ชันเรียกกลับที่กำหนดให้ส่งกลับ void สามารถใช้ฟังก์ชันที่ส่งกลับค่าใดก็ได้ ค่าเพิ่มเติมที่ส่งกลับมาจะถูกละเว้นโดยอัตโนมัติ

type Handler = () => void;

const h: Handler = () => 42; // returns number, still fine
h();
console.log('Returned value is ignored by callers');

เหตุผลที่มีกฎนี้

ความยืดหยุ่นนี้ทำให้คุณส่งฟังก์ชันอย่าง arr.push (ซึ่งส่งกลับตัวเลข) ไปเป็นฟังก์ชันเรียกกลับชนิด void ได้ ผู้เรียกสัญญาว่าจะไม่ใช้ค่าที่ส่งกลับ ดังนั้นการส่งกลับค่าใด ๆ จึงไม่ก่อให้เกิดปัญหา

const items: number[] = [];
const nums = [1, 2, 3];
nums.forEach((n) => items.push(n)); // push returns number, ok
console.log(items);

ชนิดไม่มีค่าตามบริบทในเมธอดของอาร์เรย์

forEach คาดหวังฟังก์ชันเรียกกลับที่ส่งกลับ void ด้วยเหตุนี้ คุณจึงเขียนฟังก์ชันลูกศรแบบบรรทัดเดียวที่บังเอิญส่งกลับค่าได้โดยไม่เกิดข้อผิดพลาด — ชนิด void ตามบริบทจะรองรับค่านั้นไว้

const result: string[] = [];
['a', 'b'].forEach((x) => result.push(x.toUpperCase()));
console.log(result);

ความเข้าใจผิดที่พบบ่อย

กฎของฟังก์ชันเรียกกลับชนิด void ใช้กับ ชนิด ของฟังก์ชันเรียกกลับ ไม่ใช่กับฟังก์ชันที่กำกับชนิดค่าที่ส่งกลับของตัวเองเป็น void ฟังก์ชันที่ประกาศเป็น (): void อย่างชัดเจนยังคงไม่สามารถมี return value; ที่ส่งกลับค่าซึ่งไม่ใช่ค่าที่ไม่ได้กำหนดได้

function f(): void {
  return; // ok
  // return 5; // Error: 5 not assignable to void
}
f();
console.log('declared void cannot return a value');

พารามิเตอร์ชนิดไม่มีค่าพบได้ไม่บ่อย

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

type Listener = (event: string) => void;

const onClick: Listener = (e) => console.log('Event:', e);
onClick('click');

ชนิดไม่มีค่าร่วมกับพรอมิส

ฟังก์ชันแบบอะซิงก์มักส่งกลับ Promise<void> เมื่อทำงานบางอย่าง แต่เสร็จสมบูรณ์โดยไม่มีค่า การใช้รูปแบบนี้กับโค้ดอะซิงก์มีแนวคิดเช่นเดียวกับ void ในโค้ดแบบทำงานต่อเนื่อง

async function sync(): Promise<void> {
  console.log('syncing...');
  // resolves with no value
}
sync().then(() => console.log('done'));

เลือกใช้ชนิดไม่มีค่าอย่างตั้งใจ

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

function notify(msg: string): void {
  console.log('NOTIFY:', msg);
}
const handlers: Array<(m: string) => void> = [notify];
handlers.forEach((fn) => fn('ping'));

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

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

สรุป: ชนิดไม่มีค่า

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

ใช้ระบุฟังก์ชันที่ส่งกลับ ค่าที่ไม่มีประโยชน์
แตกต่างจาก undefined: ไม่ควรนำผลลัพธ์ของ void ไปใช้
เมื่อเป็นชนิดของฟังก์ชันเรียกกลับ จะยอมรับฟังก์ชันที่ส่งกลับค่าใดก็ได้ (ผู้เรียกจะละเว้นค่านั้น)
ทำให้สามารถใช้เมธอดอย่าง push ภายใน forEach ได้อย่างเรียบร้อย

ต่อไป เราจะนำทุกอย่างมารวมกันเพื่อจัดการกับ unknown อย่างปลอดภัย

const tasks: Array<() => void> = [
  () => console.log('task 1'),
  () => console.log('task 2')
];
tasks.forEach((t) => t());

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

บทเรียน “ชนิด void ในฟังก์ชัน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิด void ในฟังก์ชัน”

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

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

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

บทเรียน “ชนิด void ในฟังก์ชัน” ใช้เวลานานแค่ไหน

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

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

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

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

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

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