บทนำเกี่ยวกับ TypeScript Function Types

TypeScript กำหนดให้ทุกอย่างต้องมี type ซึ่งรวมถึงฟังก์ชันของคุณด้วย คุณต้องกำหนด type สำหรับอินพุตและเอาต์พุต

Function Syntax

คุณสามารถกำหนด type ของอินพุตและ type ของเอาต์พุตได้ดังนี้:

function add(x: number, y: number): number { return x + y; }

TypeScript ยังมีการใช้ type inference (การอนุมานประเภท) ด้วย คุณไม่จำเป็นต้องเขียน type ของเอาต์พุตเสมอไป เพราะคอมไพเลอร์จะหาให้คุณเอง

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

Special Return Types

  • void: ใช้เมื่อฟังก์ชันไม่มีการคืนค่าใดๆ
  • never: ใช้เมื่อฟังก์ชันมีการโยนข้อผิดพลาด (throw error) หรือหยุดการทำงานของโปรแกรม

Parameters

คุณสามารถกำหนดให้พารามิเตอร์เป็นแบบ optional (ไม่บังคับ) ได้โดยใช้เครื่องหมายคำถาม

function makeProfile(name: string, age: number, url?: string) { // code }

คุณยังสามารถใช้ค่าเริ่มต้น (default values) ได้ ซึ่งจะทำให้พารามิเตอร์นั้นเป็นแบบ optional โดยไม่ต้องใช้สัญลักษณ์พิเศษ

function makeProfile(name: string, age: number, url: string = "www.example.com") { return name + " visits " + url; }

Callback Functions

ฟังก์ชันคือค่า (value) ชนิดหนึ่ง คุณสามารถส่งฟังก์ชันเป็นอาร์กิวเมนต์ได้ และในการกำหนด type ของ callback ให้ใช้ไวยากรณ์ดังนี้:

function makePage(func: (n: string, a: number, u?: string) => string, param1: string, param2: number) { func(param1, param2); }

ชื่อของพารามิเตอร์ใน callback ไม่สำคัญ สิ่งที่สำคัญคือ type เท่านั้น

Arrays of Functions

หากคุณต้องการรายการของฟังก์ชัน ให้กำหนดเป็นอาร์เรย์ของ type ฟังก์ชันนั้นๆ

function applyMath(funcs: ((a: number, b: number) => number)[], x: number, y: number) { // code }

Rest Parameters

ใช้ spread operator เพื่อรับอาร์กิวเมนต์จำนวนเท่าใดก็ได้ ซึ่งจะเก็บอินพุตทั้งหมดไว้ในอาร์เรย์

function sum(...numbers: number[]) { // code }

sum(1, 2, 3);

ที่มา: https://dev.to/jsha/introduction-to-typescript-function-types-hin