ใน TypeScript ฟังก์ชัน (Function) เป็นกลุ่มคำสั่งที่สามารถนำกลับมาใช้ใหม่ได้ โดยฟังก์ชันใน TS ถูกจัดเป็น First-Class Citizens หมายความว่าสามารถกำหนดให้เป็นตัวแปร ส่งเป็น Argument หรือคืนค่าจากฟังก์ชันอื่นได้ เช่นเดียวกับ Object ทั่วไป
1. โครงสร้างและการกำหนดชนิดข้อมูล (Type Annotation)
หัวใจสำคัญของการใช้ฟังก์ชันใน TypeScript คือการกำหนดชนิดข้อมูลของพารามิเตอร์ (Parameters) และชนิดข้อมูลที่คืนค่า (Return Type) เพื่อให้โค้ดมีความปลอดภัย (Type Safety)
รูปแบบ: function name(parameter1: Type, parameter2: Type): ReturnType { ... }
// ฟังก์ชันที่มีการกำหนดชนิดข้อมูลของพารามิเตอร์และการคืนค่าอย่างชัดเจน
function findArea(width: number, height: number): number {
return width * height;
}
// ฟังก์ชันที่ไม่มีการคืนค่า (ใช้ void)
function printResult(area: number): void {
console.log(`Area: ${area}`);
}
// การเรียกใช้งาน
let area: number = findArea(20, 100);
printResult(area); // Area: 2000
Note: การกำหนด
voidหมายถึงฟังก์ชันนั้นไม่มีการคืนค่าใดๆ กลับมา (หรือคืนค่าเป็นundefinedในทางปฏิบัติของ JavaScript)
2. รูปแบบฟังก์ชันแบบย่อ (Arrow Functions)
TypeScript รองรับ Arrow Functions (หรือ Fat Arrow Functions =>) ซึ่งเป็นรูปแบบย่อของฟังก์ชันที่มีความกระชับมากขึ้น โดยเฉพาะอย่างยิ่งสำหรับฟังก์ชันที่มีชุดคำสั่งเดียว
รูปแบบ: const name = (parameter): ReturnType => expression
// ฟังก์ชันหาพื้นที่วงกลม (Single Expression)
const circleArea = (radius: number): number => {
// ใน TS ใช้ Math.PI
return Math.PI * (radius * radius);
};
// ฟังก์ชันหาปริมาตรทรงกระบอกในรูปแบบ Arrow Function
const cylinderVolume = (area: number, height: number): number => area * height;
let volume = cylinderVolume(circleArea(10), 15);
console.log(`Volume of cylinder: ${volume.toFixed(2)}`);
// Output: Volume of cylinder: 4712.39
3. ประเภทของพารามิเตอร์ (Parameter Types)
ใน TypeScript พารามิเตอร์จะถูกแยกเป็น 3 ประเภทหลัก:
A. Required Parameters (พารามิเตอร์ที่จำเป็น)
คือพารามิเตอร์ที่ต้องมีการส่งค่ามาให้เสมอ ซึ่งเป็นค่าตั้งต้นของการกำหนดพารามิเตอร์
// ทั้ง width และ height ต้องส่งค่ามาเสมอ
function calculateArea(width: number, height: number): number {
return width * height;
}
// calculateArea(10); // Error: Expected 2 arguments, but got 1.
B. Optional Parameters (พารามิเตอร์ทางเลือก)
ใช้เครื่องหมาย ? ต่อท้ายชื่อพารามิเตอร์ เพื่อระบุว่าเป็นทางเลือกที่ผู้เรียกใช้งานจะส่งมาหรือไม่ก็ได้ โดยค่าเริ่มต้นจะเป็น undefined
// email เป็น optional parameter
function customer(name: string, phone: string, email?: string): void {
console.log(`Name: ${name}`);
console.log(`Phone: ${phone}`);
console.log(`Email: ${email ?? 'N/A'}`); // ใช้ Nullish Coalescing เพื่อแสดงค่าเริ่มต้น
}
customer("Ebiwayo", "0812345678", "[email protected]");
// Output: Email: [email protected]
customer("Ebiwayo", "0812345678");
// Output: Email: N/A
C. Default Parameters (การกำหนดค่าเริ่มต้น)
เป็นการกำหนดค่าให้กับพารามิเตอร์ หากผู้เรียกไม่ได้ส่งค่า Argument มาให้ พารามิเตอร์นั้นจะใช้ค่าเริ่มต้นที่กำหนดไว้
// phone มีค่าเริ่มต้นเป็น '000-000-0000'
function customer(name: string, phone: string = '000-000-0000'): void {
console.log(`Name: ${name}`);
console.log(`Phone: ${phone}`);
}
customer("Ebiwayo");
// Output: Phone: 000-000-0000
Optional Positional / Named Parameters: TypeScript/JavaScript ไม่มี รูปแบบ Positional Parameters (
[]) หรือ Named Parameters ({}) เหมือน Dart โดยตรง แต่สามารถทำ Named Parameters ได้โดยใช้เทคนิค Object Destructuring และ Default Parameters ร่วมกัน (เป็นแนวทางที่ซับซ้อนกว่าในบทความพื้นฐาน)
4. พารามิเตอร์ส่วนที่เหลือ (Rest Parameters)
เป็นคุณสมบัติที่ใช้เครื่องหมาย ... เพื่อรวบรวม Argument ที่เหลือทั้งหมดที่ส่งมายังฟังก์ชันให้เป็น Array เดียว ซึ่งมีประโยชน์เมื่อไม่ทราบจำนวน Argument ที่แน่นอน
function sumAll(...numbers: number[]): number {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sumAll(10, 20, 30, 40)); // Output: 100
5. การใช้ฟังก์ชัน Overloading (Function Overloading)
เป็นคุณสมบัติของ TypeScript ที่ช่วยให้สามารถกำหนด Multiple Signatures (รูปแบบพารามิเตอร์และการคืนค่า) ให้กับฟังก์ชันที่มีชื่อเดียวกันได้ โดยมักใช้เมื่อฟังก์ชันมีการทำงานหลายรูปแบบตามชนิดข้อมูลที่รับเข้ามา
// 1. Overload Signatures
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
// 2. Implementation Signature (ต้องรองรับทุกรูปแบบ)
function combine(a: any, b: any): any {
if (typeof a === 'number' && typeof b === 'number') {
return a + b;
}
if (typeof a === 'string' && typeof b === 'string') {
return a + " " + b;
}
}
let sum = combine(5, 10); // sum เป็น number
let text = combine("Hello", "TS"); // text เป็น string
console.log(sum); // 15
console.log(text); // Hello TS
6. ฟังก์ชัน Callback (Function as Argument)
เนื่องจากฟังก์ชันเป็น Object จึงสามารถส่งฟังก์ชันหนึ่งเข้าไปเป็น Argument ในฟังก์ชันอื่นได้ ซึ่งเป็นพื้นฐานสำคัญของ Callback Functions ใน JavaScript/TypeScript
// ฟังก์ชันที่รับฟังก์ชันอื่นเป็นพารามิเตอร์
function executeOperation(a: number, b: number, callback: (result: number) => void): void {
const result = a * b;
callback(result); // เรียกใช้ callback function
}
// ฟังก์ชัน callback ที่ถูกส่งเข้าไป
function logResult(value: number): void {
console.log(`The result is: ${value}`);
}
executeOperation(10, 5, logResult);
// Output: The result is: 50
เนื้อหาที่เกี่ยวข้อง