Generics ขั้นพื้นฐาน

Search…
Generics นั้นเป็นคอนเซ็ปท์ที่มีในหลายๆ ภาษาที่เป็น Static Typing อยู่แล้ว เพราะมันทำให้เราสามารถเขียนโค้ดให้ใช้งานซำ้ได้ในหลายๆ Type ขอยกตัวอย่างจากฟังก์ชั่น JavaScript นี้ ที่จะคืนค่าแรกภายใน Array
// JavaScript
function getFirst(arr) {
  return arr[0]
}
​
getFirst([1, 2, 3]) // 1
getFirst(["One", "Two", "Three", "Four", "Five"]) // "One"
ลองสังเกตว่า ฟังก์ชั่นนี้รองรับ Array ของ Type ใดก็ได้ ถ้าเรากำหนด Type เฉพาะเจาะจงว่าเป็น number หรือ integer จะใช้กับอีกตัวไม่ได้ เช่น
// TypeScript
function getFirst(arr: number[]): number {
  return arr[0]
}
​
getFirst([1, 2, 3]) // 1
getFirst(["One", "Two", "Three", "Four", "Five"]) // Type Error
เราอาจใช้ any[] แทนได้ แต่การคืนค่า any ออกมา ไม่ใช่เรื่องที่ดี เพราะจะเสียความ Type-safe ไป
function getFirst(arr: any[]): any {
  return arr[0]
}
​
const a = getFirst([1, 2, 3])                               // a: any
const b = getFirst(["One", "Two", "Three", "Four", "Five"]) // b: any
การใช้ Generic จะทำให้เรา "จับ" (Capture) Type ที่โยนเข้าไปในฟังก์ชั่น ให้เหมือนกับค่าที่จะ Return ออกมา โดยการใช้สัญลักษณ์ <T> แล้วนำค่า T ไปใช้ต่อเป็นพารามิเตอร์ หรือค่า Return ได้ และเราจะเรียก T ว่าเป็นตัวแปรแบบ "Type Variable" (ไม่ได้บังคับว่าต้องเป็นตัว T สามารถใช้ตัวอื่นได้ แต่ปกติแล้วจะใช้ตัว T เพื่อความเข้าใจตรงกันว่าเป็นตัวแปรสำหรับ Type)
function getFirst<T>(arr: T[]): T {
  return arr[0]
}
​
const a = getFirst<number>([1, 2, 3])
//    a: number
​
const b = getFirst<string>(["One", "Two", "Three", "Four", "Five"]) 
//    b: string
ตัวอย่างนี้เราจะเซ็ตค่า T โดยตรงด้วย number และ stringแต่ที่จริงแล้วเราไม่ต้องใส่ Type Variable เลยก็ได้ แล้ว TypeScript จะจัดการอนุมาน Type ให้เราเอง เรียกว่า Type Argument Inference
const a = getFirst([1, 2, 3])
//    a: number เพราะ [1,2,3] เป็น number[] ทำให้ T = number
​
const b = getFirst(["One", "Two", "Three", "Four", "Five"])
//    b: string เพราะ argument เป็น string[] ทำให้ T = string
เราสามารถใช้ Type Variable มากกว่าหนึ่งตัวก็ได้ เช่น
function map<T, U>(arr: T[], func: (arg: T) => U): U[] {
  return arr.map(func)
}
​
const input = ["4", "5", "6"]
​
map(input, (s) => parseInt(s)) // [4, 5, 6]
ดูจาก Argument ตัวแรกของฟังก์ชั่น map:
input เป็น string[]
arr ต้องเป็น T[]
ฉะนั้น T   เป็น string
ดูจาก Argument ตัวที่สองของฟังก์ชั่น map :
(s) => parseInt(s) เป็นฟังก์ช้่นที่ Return parseInt() ซึ่งเป็นฟังก์ชั่นที่จะคืน number
func ต้องเป็น (arg: string) => U
ฉะนั้น U เป็น number
และค่า Return ของฟังก์ชั่น เป็น U[]สรุปได้ว่าฟังก์ชั่น map นี้จะคืนค่าเป็น number[] หรืออาเรย์ของตัวเลข (เฉพาะในกรณีmap(input, (s) => parseInt(s)) เท่านั้น ถ้าเรียกใช้แบบอื่น ค่า Return จะขึ้นอยู่กับฟังก์ชั่นที่ใส่เข้าไป)
การใช้ Generics นั้นมีความซับซ้อนมาก (ผู้เขียนก็ยังไม่เชี่ยวชาญเท่าไร) เลยขอพักไว้เท่านี้ก่อน โค้ดเริ่มเยอะ
เดี๋ยวจะมีตอนต่อสำหรับ Generics แน่นอนครับ
Union Types และ Intersection Types
Optional Properties
Last modified 1yr ago
Copy link