👨💻
👨💻
👨💻
👨💻
มนศ.dev
ⓕ Page
Search…
หน้าแรก
คอร์ส
TypeScript 101
TypeScript คืออะไร?
TypeScript vs JavaScript
ติดตั้ง TypeScript
รู้จัก Basic Type ต่างๆ
การกำหนด Type ในฟังก์ชั่น
การสร้าง Interface
Literal Types
Type vs Interface
Union Types และ Intersection Types
Generics ขั้นพื้นฐาน
Optional Properties
Class (1)
Class (2)
ลองเขียนเว็บง่าย ๆ ด้วย TypeScript
Utility Types
Ruby ฉบับคนหัดโค้ด
ลิงก์
Facebook Page
GitHub
monosor.com
วงแหวนเว็บ
Powered By
GitBook
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
Previous
Generics ขั้นพื้นฐาน
Next
Class (1)
Last modified
1yr ago
Copy link