การกำหนด Type ในฟังก์ชั่น

Search…
นอกจากการกำหนด Type ให้กับตัวแปรต่างๆ แล้ว ในกรณีของฟังก์ชั่น เราสามารถกำหนด Type ให้กับพารามิเตอร์ และค่าที่จะ Return ได้
Parameter Type
1
function say(word: string, times: number) {
2
  [...Array(times).keys()].forEach(() => {
3
    console.log(word)
4
  })
5
}
Copied!
ฟังก์ชั่น say มีพารามิเตอร์ 2 ตัว โดยตัวแรก (word) เป็น String และตัวที่สอง (times) เป็น Number
1
say("Very Good", 3) // OK
2
​
3
say("กล้ามาก", "เก่งมาก")
4
// Argument of type 'string' is not assignable to parameter of type 'number'.
Copied!
หมายเหตุ ค่าตัวแปรในฟังก์ชั่นเรียกว่า Parameter แต่ค่าที่ส่งเข้าไปตอนเรียกฟังก์ชั่นเรียกว่า Argument
Return Type
เป็นการกำหนดว่า ค่าที่ส่งกลับมาจากฟังก์ชั่นจะเป็น Type ใด (ในตัวอย่างขอละ Parameter Type เพื่อความเข้าใจง่าย) โดยการกำหนด Return type จะเติมเข้าไปด้านหลัง Parameter ทั้งหมด
1
function sum(a, b): number {
2
  return a + b
3
}
Copied!
หรือในกรณีที่เขียนเป็น Arrow Function จะไว้หลัง Parameter เช่นกัน แต่อยู่ด้านหน้าของ =>
1
const sum = (a, b): number => {
2
  return a + b
3
}
4
​
5
// แบบ One-liner
6
const sum = (a, b): number => a + b
Copied!
ในกรณีที่ฟังก์ชั่นไม่คืนค่าเลย ให้ใช้ void
1
function say(word, times): void {
2
  [...Array(times).keys()].forEach(() => {
3
    console.log(word)
4
  })
5
}
Copied!
และอีกกรณีที่พบบ่อย คือฟังก์ชั่นที่เป็น Asynchronous ที่มีคีย์เวิร์ด async เราจะต้อง Return Promise<> โดยห่อค่าที่จะคืนเอาไว้ เช่นการเรียกใช้ API
1
const fetchUser = async (url: string): Promise<User> => { // ไม่ใช้ User เฉยๆ
2
  const response = await fetch(url)
3
  const { data } = await response.json()
4
  return data
5
}
Copied!
User คือ Interface ที่กำหนดขึ้นมาเอง ซึ่งจะอธิบายถึงวิธีในการสร้าง Interface ในบทต่อไป
รู้จัก Basic Type ต่างๆ
การสร้าง Interface
Last modified 10mo ago
Copy link
Contents
Parameter Type
Return Type