# Optional Properties

โดยปกติแล้วเมื่อเรากำหนด Interface หรือ Type (แบบ Object) แล้ว เมื่อนำไปใช้สร้าง Object ใดๆ ทุก Property จะเป็นแบบ Required คือต้องมีค่านั้นอยู่เสมอ เพื่อการันตีว่า Type จะเป็นตามที่กำหนดไว้เสมอ เช่น

```typescript
interface User {
  username: string
  email: string
}

// หรือ
type User = {
  username: string
  email: string
}

let a: User = {
  username: "foo",
  email: "foo@example.com",
}

let b: User = { // ❌ Type Error : ไม่ได้กำหนด Property 'email'
  username: "bar"
}
```

โค้ดนี้ถ้า Compile เป็น JavaScript ปกติก็จะยังใช้ได้ แต่ถ้าเราเรียก `b.email` จะได้ `undefined` แปลว่าโค้ดนี้จะไม่มีความ Type-safe แล้ว

ถ้าหากเราต้องการทำให้ Property ไม่เป็นแบบ Required ยกตัวอย่างเช่น การสร้าง User Account ใหม่ ไม่จำเป็นต้องกรอกเบอร์โทรศัพท์เสมอไป จะทำได้สองวิธี แบบแรกคือใช้ Union `|` กับ `null`

```typescript
interface User {
  username: string
  phone: string | null
}
```

แต่วิธีนี้จะมีปัญหาว่า เรายังคงต้องกำหนดให้ `phone` เป็น `null` อยู่ดี

```typescript
const user: User = { username: "foo", phone: "0876543210" } // ✅
const user: User = { username: "foo", phone: null }         // ✅
const user: User = { username: "foo" }                      // ❌
```

อีกวิธีหนึ่งคือเราต้องการให้ละ Property ไปเลย จะต้องใช้การกำหนดว่าเป็น Optional โดยใช้ตัว `?` ด้านหลังชื่อ Property ดังนี้

```typescript
interface User {
  username: string
  phone?: string   // ให้ phone เป็น Optional Property
}

const user: User = { username: "foo" } // ✅ ไม่ต้องมี phone ก็ใช้ได้

user.phone // undefined
```

โดยค่าของ `phone` จะเป็น Type ที่เรากำหนดให้ มา Union กับ `undefined`

![phone มีค่าเป็น string หรือ undefined](/files/-MNZ-WBeIYNhel0ICHi9)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.monosor.dev/courses/typescript-101/optional-properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.