Optional Properties

Search…
Optional Properties
โดยปกติแล้วเมื่อเรากำหนด Interface หรือ Type (แบบ Object) แล้ว เมื่อนำไปใช้สร้าง Object ใดๆ ทุก Property จะเป็นแบบ Required คือต้องมีค่านั้นอยู่เสมอ เพื่อการันตีว่า Type จะเป็นตามที่กำหนดไว้เสมอ เช่น
1
interface User {
2
  username: string
3
  email: string
4
}
5
​
6
// หรือ
7
type User = {
8
  username: string
9
  email: string
10
}
11
​
12
let a: User = {
13
  username: "foo",
14
  email: "[email protected]",
15
}
16
​
17
let b: User = { // ❌ Type Error : ไม่ได้กำหนด Property 'email'
18
  username: "bar"
19
}
Copied!
โค้ดนี้ถ้า Compile เป็น JavaScript ปกติก็จะยังใช้ได้ แต่ถ้าเราเรียก b.email จะได้ undefined แปลว่าโค้ดนี้จะไม่มีความ Type-safe แล้ว
ถ้าหากเราต้องการทำให้ Property ไม่เป็นแบบ Required ยกตัวอย่างเช่น การสร้าง User Account ใหม่ ไม่จำเป็นต้องกรอกเบอร์โทรศัพท์เสมอไป จะทำได้สองวิธี แบบแรกคือใช้ Union | กับ null
1
interface User {
2
  username: string
3
  phone: string | null
4
}
Copied!
แต่วิธีนี้จะมีปัญหาว่า เรายังคงต้องกำหนดให้ phone เป็น null อยู่ดี
1
const user: User = { username: "foo", phone: "0876543210" } // ✅
2
const user: User = { username: "foo", phone: null }         // ✅
3
const user: User = { username: "foo" }                      // ❌
Copied!
อีกวิธีหนึ่งคือเราต้องการให้ละ Property ไปเลย จะต้องใช้การกำหนดว่าเป็น Optional โดยใช้ตัว ? ด้านหลังชื่อ Property ดังนี้
1
interface User {
2
  username: string
3
  phone?: string   // ให้ phone เป็น Optional Property
4
}
5
​
6
const user: User = { username: "foo" } // ✅ ไม่ต้องมี phone ก็ใช้ได้
7
​
8
user.phone // undefined
Copied!
โดยค่าของ phone จะเป็น Type ที่เรากำหนดให้ มา Union กับ undefined
phone มีค่าเป็น string หรือ undefined
Generics ขั้นพื้นฐาน
Class (1)
Last modified 10mo ago
Copy link