ฟังก์ชันใน TypeScript

บทความนี้อธิบายเกี่ยวกับฟังก์ชันใน TypeScript

YouTube Video

ฟังก์ชันใน TypeScript

ฟังก์ชันใน TypeScript คือฟังก์ชันของ JavaScript ที่มีการเพิ่มการกำหนดประเภทของข้อมูล ใน TypeScript คุณสามารถเขียนโค้ดที่มีความทนทานมากขึ้นได้โดยการกำหนดประเภทของข้อมูลสำหรับอินพุต (พารามิเตอร์) และผลลัพธ์ (ค่าที่คืน) อย่างชัดเจนในฟังก์ชัน ด้านล่างนี้ เราจะแนะนำวิธีการพื้นฐานในการกำหนดฟังก์ชันและลักษณะบางอย่างของฟังก์ชันใน TypeScript

การกำหนดฟังก์ชันพื้นฐาน

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• ฟังก์ชัน add รับอาร์กิวเมนต์สองตัวที่เป็นประเภท number และคืนค่าที่เป็นประเภท number
• มันรับอาร์กิวเมนต์สองตัว คือ x และ y ทั้งคู่เป็นประเภท number โดยระบุประเภทอย่างชัดเจน
• ประเภทผลลัพธ์ที่คืนค่าก็ถูกระบุเป็น : number ด้วยเช่นกัน

ฟังก์ชันไม่ระบุชื่อ (Function Expressions)

ฟังก์ชันไม่ระบุชื่อและฟังก์ชันแบบ Expression ก็สามารถใช้ใน TypeScript ได้เช่นกัน สามารถกำหนดประเภทของข้อมูลได้ในลักษณะเดียวกัน

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• คุณสามารถกำหนดฟังก์ชันนิรนามให้กับตัวแปรแล้วเรียกใช้ในภายหลังได้

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• คุณสามารถใช้ฟังก์ชันนิพจน์ที่มีชื่อเพื่อให้สามารถเรียกซ้ำได้

ฟังก์ชันแบบลูกศร (Arrow Functions)

สามารถใช้การกำหนดประเภทของข้อมูลร่วมกับฟังก์ชันแบบลูกศรได้ด้วย

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

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

พารามิเตอร์แบบเลือกได้และค่าพารามิเตอร์เริ่มต้น

พารามิเตอร์สามารถกำหนดให้เป็นแบบเลือกได้หรือกำหนดค่าพารามิเตอร์เริ่มต้น

พารามิเตอร์แบบเลือกได้

การเพิ่ม ? หลังจากชื่อพารามิเตอร์ทำให้พารามิเตอร์นั้นเป็นแบบเลือกได้

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

โค้ดนี้รับอาร์กิวเมนต์ที่ไม่บังคับ หากมีอาร์กิวเมนต์จะทักทายโดยใช้ชื่อนั้น หากไม่มีจะทักทายโดยทั่วไป

ค่าพารามิเตอร์เริ่มต้น

คุณสามารถกำหนดค่าพารามิเตอร์เริ่มต้นได้เช่นกัน

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

ฟังก์ชันนี้ใช้ค่าเริ่มต้นเป็น "Guest" หากไม่มีการส่งอาร์กิวเมนต์มา และจะทักทายโดยใช้ชื่อที่ระบุหรือค่าดีฟอลต์

การกำหนดประเภทของฟังก์ชัน

คุณยังสามารถกำหนดประเภทของตัวฟังก์ชันได้เอง ตัวอย่างเช่น สิ่งนี้ใช้เมื่อมีการส่งฟังก์ชันเป็นอาร์กิวเมนต์

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

โค้ดนี้กำหนดประเภทของฟังก์ชันชื่อ Operation ที่รับตัวเลขสองตัวและคืนค่าตัวเลข จากนั้นนำไปสร้างและเรียกใช้ฟังก์ชันบวกและฟังก์ชันคูณ

เมื่อไม่มีค่าที่คืน (void type)

สำหรับฟังก์ชันที่ไม่มีค่าที่คืนกลับมา ให้ระบุประเภท void

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

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

ฟังก์ชันคอลแบ็ก (Callback Function)

การส่งฟังก์ชันเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นและให้มันถูกเรียกใช้งานในภายหลัง เรียกว่า ฟังก์ชันคอลแบ็ก มักใช้ในกระบวนการแบบอะซิงโครนัสและการจัดการเหตุการณ์ (event handling) บ่อยครั้ง

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

ในตัวอย่างนี้ ฟังก์ชันที่แสดงค่าบนคอนโซลถูกส่งเป็นฟังก์ชันคอลแบ็ก

หรืออีกทางเลือกหนึ่ง คุณสามารถกำหนดประเภทของคอลแบ็กโดยใช้ type หรือ interface

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

การกำหนดประเภทของคอลแบ็กด้วย type หรือ interface ช่วยเพิ่มความสามารถในการนำกลับมาใช้ซ้ำ

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

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

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

ใน TypeScript การโอเวอร์โหลดทำได้ดังนี้:

• ลายเซ็นการโอเวอร์โหลด

  • กำหนดวิธีการใช้งานฟังก์ชัน (ลายเซ็นของมัน) โดยการเขียนสิ่งนี้หลายครั้ง จะทำให้โอเวอร์โหลดเป็นไปได้

• ลายเซ็นการนำไปใช้

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

กฎสำหรับการโอเวอร์โหลด

กฎต่อไปนี้ใช้กับการโอเวอร์โหลดฟังก์ชัน:

• ลำดับของการกำหนดลายเซ็นโอเวอร์โหลด

  • เนื่องจากการประเมินผลทำจากบนลงล่าง จึงแนะนำให้กำหนดประเภทเฉพาะก่อน ตามด้วยประเภททั่วไป

• ความเข้ากันได้ของลายเซ็นการนำไปใช้

  • ลายเซ็นการนำไปปฏิบัติต้องเข้ากันได้กับอาร์กิวเมนต์และค่าที่ส่งคืนของลายเซ็นโอเวอร์โหลดทั้งหมด

• ระบุรายละเอียดในลายเซ็นโอเวอร์โหลด

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

สรุป

ฟังก์ชันใน TypeScript มีลักษณะดังต่อไปนี้

• การระบุประเภท (Type Annotations)
  • ด้วยการระบุประเภทของอาร์กิวเมนต์และค่าที่ส่งกลับ คุณจะเขียนโค้ดได้อย่างปลอดภัยมากขึ้น
• ฟังก์ชันนิรนามและฟังก์ชันลูกศร (Anonymous Functions and Arrow Functions)
  • สามารถใช้งานได้เช่นเดียวกับใน JavaScript และการระบุประเภทจะช่วยเพิ่มความปลอดภัยของประเภทข้อมูล
• พารามิเตอร์ทางเลือกและค่าพารามิเตอร์เริ่มต้น (Optional and Default Parameters)
  • คุณสามารถกำหนดอาร์กิวเมนต์ได้อย่างยืดหยุ่นตามความต้องการ
• การกำหนดประเภทของฟังก์ชัน (Function Type Definitions)
  • กำหนดประเภทของฟังก์ชันโดยตรงเพื่อตรวจสอบประเภทข้อมูล
• ฟังก์ชันโอเวอร์โหลด (Function Overloading)
  • คุณสามารถรองรับอาร์กิวเมนต์ที่แตกต่างกันด้วยชื่อฟังก์ชันเดียวกันได้

ด้วยการใช้สิ่งเหล่านี้ คุณสามารถเขียนโค้ดที่ชัดเจนและแข็งแกร่งยิ่งขึ้นใน TypeScript

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video