การโอเวอร์โหลดฟังก์ชันใน TypeScript

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

ลองมาดูตัวอย่างกัน สมมติว่าเรามี ฟังก์ชันที่แยกอักขระ ของสตริงออกเป็นอาร์เรย์ของตัวอักษร:

function splitStr(str: string): string[] {
	return str.split('');
}

และสมมติว่าเรามีฟังก์ชันที่ แยกอักขระของตัวเลขออกเป็นอาร์เรย์ของตัวเลข:

function splitNum(num: number): number[] {
	let str: string = String(num);
	let arr: string[] = str.split('');

	return arr.map(elem => +elem);
}

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

มาใช้การโอเวอร์โหลดเพื่อประกาศ ซิกเนเจอร์ต่างๆ ของฟังก์ชันของเรากัน:

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	// รหัสการทำงานของทั้งสองซิกเนเจอร์
}

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

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	if (typeof val === 'string') {
		return val.split('');
	} else {
		let str: string = String(val);
		let arr: string[] = str.split('');

		return arr.map((elem: string): number => +elem);
	}
}

แตกต่างจากภาษาอื่น ใน TypeScript การโอเวอร์โหลดสร้างขึ้นเป็นฟังก์ชันเดียว ไม่สามารถ สร้างหลายฟังก์ชันด้วยชื่อเดียวกัน แต่มีซิกเนเจอร์ที่แตกต่างกันได้

เขียนฟังก์ชันที่จะส่งคืน หรือแก้ไขข้อความขององค์ประกอบ DOM โดยควร ทำงานดังต่อไปนี้:

text('#elem', 'text'); // ตั้งค่าข้อความ
text('#elem');         // ส่งคืนข้อความปัจจุบัน