โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้
ประกาศลายเซ็นโอเวอร์โหลดสำหรับรูปแบบการเรียกใช้ที่แตกต่างกัน และใช้ลายเซ็นการเรียกใช้ภายในชนิดข้อมูลออบเจ็กต์เพื่อสร้าง API ที่ยืดหยุ่น
โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: สร้างแบบจำลองฟังก์ชันที่รับข้อมูลนำเข้าและส่งออกข้อมูลแตกต่างกันด้วยโอเวอร์โหลด และอธิบายลายเซ็นการเรียกในชนิดข้อมูลออบเจ็กต์สำหรับส่วนติดต่อโปรแกรมประยุกต์ที่ทำงานคล้ายฟังก์ชันเรียกกลับ
รูปแบบโอเวอร์โหลด
โอเวอร์โหลดประกาศด้วยลายเซ็นหลายรายการและการทำงานจริงเพียงหนึ่งรายการ ซึ่งจะจำกัดชนิดข้อมูลนำเข้าให้แคบลงและส่งคืนชนิดข้อมูลที่ถูกต้อง
// 1) Overload signatures (no body)
function parse(input: string): number;
function parse(input: number): string;
// 2) Single implementation compatible with all overloads
function parse(input: string | number): string | number {
if (typeof input === "string") {
return input.length; // string -> number
} else {
return String(input); // number -> string
}
}
console.log(parse("TS")); // 2 (number)
console.log(parse(123)); // "123" (string)ลายเซ็นของ call
ลายเซ็นของ call ทำให้ชนิดออบเจ็กต์สามารถเรียกใช้ได้พร้อมการกำหนดหลายรูปแบบ เหมาะสำหรับไลบรารีที่เปิดให้ใช้ฟังก์ชันที่เรียกใช้ได้และมีคุณสมบัติ
type Stringify = {
(v: number): string;
(v: boolean): string;
};
const toStr: Stringify = (v: number | boolean) => {
return typeof v === "number" ? v.toFixed(1) : (v ? "true" : "false");
};
console.log(toStr(3));
console.log(toStr(false));การทำชนิดให้แคบลงในการนำไปใช้
การนำไปใช้ต้องรองรับรูปแบบการกำหนดหลายรูปแบบทั้งหมด ใช้การตรวจสอบด้วย in หรือยูเนียนที่มีตัวแยกแยะเพื่อแยกแขนงอย่างปลอดภัย
function area(value: { r: number } | { w: number; h: number }): number {
if ("r" in value) {
return Math.PI * value.r ** 2; // circle
}
return value.w * value.h; // rect
}
console.log(area({ r: 2 }));
console.log(area({ w: 3, h: 4 }));การกำหนดหลายรูปแบบเทียบกับยูเนียน
การกำหนดหลายรูปแบบเทียบกับยูเนียน:
- การกำหนดหลายรูปแบบให้ชนิดค่าที่ส่งคืนที่แม่นยำเป็นรายครั้งที่เรียกใช้
- ยูเนียนคงลายเซ็นเดียว ทำให้เรียบง่ายกว่าแต่เจาะจงน้อยกว่า
- เลือกการกำหนดหลายรูปแบบเมื่อผู้เรียกใช้ได้ประโยชน์จากชนิดค่าที่ส่งคืนที่ตรงแบบ
เคล็ดลับด้าน DX
เคล็ดลับ:
- จำกัดจำนวนการกำหนดหลายรูปแบบให้มีน้อยและชัดเจน
- บันทึกความแตกต่างของพารามิเตอร์และค่าที่ส่งคืน
- เลือกความแม่นยำของชนิดค่าที่ส่งคืนเมื่อช่วยปรับปรุงประสบการณ์ผู้ใช้
ตรวจสอบการกำหนดหลายรูปแบบ
ตรวจสอบอย่างรวดเร็ว: รูปแบบใดประกาศการกำหนดหลายรูปแบบของฟังก์ชันได้อย่างถูกต้อง
สรุปทบทวน
สรุปทบทวน: ใช้การกำหนดหลายรูปแบบสำหรับชนิดที่แม่นยำในแต่ละครั้งที่เรียกใช้ และใช้ลายเซ็นของ call เพื่อจำลองออบเจ็กต์ที่เรียกใช้ได้ ทำให้ชนิดแคบลงภายในการนำไปใช้เดียวเพื่อครอบคลุมทุกกรณี
คำถามที่พบบ่อย
บทเรียน “โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้”
ประกาศลายเซ็นโอเวอร์โหลดสำหรับรูปแบบการเรียกใช้ที่แตกต่างกัน และใช้ลายเซ็นการเรียกใช้ภายในชนิดข้อมูลออบเจ็กต์เพื่อสร้าง API ที่ยืดหยุ่น คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โอเวอร์โหลดฟังก์ชันและลายเซ็นการเรียกใช้
- การกำหนดชนิดข้อมูลพารามิเตอร์ this; void และ never
- ฟังก์ชันยืนยันและตัวตรวจชนิดข้อมูลที่ผู้ใช้กำหนด