ตัวแก้ไขเพิ่มเติม (?) และ readonly ทำอะไร

Question

Accepted Answer

ตัวแก้ไขคุณสมบัติเหล่านี้ควบคุมว่าคุณสมบัติเป็น **ที่จำเป็น** และว่าสามารถ **กำหนดใหม่** ได้หรือไม่

## ตัวแก้ไขเพิ่มเติม (`?`)

```ts
interface User {
  name: string;
  email?: string; // optional — may be absent
}

const a: User = { name: "Ann" };               // ✅ email omitted
const b: User = { name: "Bo", email: "b@x" };  // ✅ included

function f(u: User) {
  u.email.length;   // ❌ Error: email is possibly 'undefined'
  u.email?.length;  // ✅ optional chaining handles the maybe-undefined
}
```

คุณสมบัติที่ไม่บังคับมีประเภท `T | undefined` ดังนั้นคอมไพเลอร์จึงบังคับให้คุณจัดการกรณีที่ไม่มี — ป้องกัน "cannot read property of undefined" บัก

## readonly

```ts
interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 1, y: 2 };
p.x = 5; // ❌ Error: cannot assign to readonly property

// arrays too
const nums: readonly number[] = [1, 2, 3];
nums.push(4); // ❌ push doesn't exist on readonly array
```

`readonly` เป็นเวลาคอมไพล์เท่านั้น (ไม่มีการบังคับใช้ในเวลารัน) แต่มันสร้างเอกสารและบังคับความไม่เปลี่ยนแปลงในระบบประเภท การจับการเปลี่ยนแปลงที่ไม่ตั้งใจ

## รวมกันและในระดับขนาด

```ts
interface Config { readonly id: string; tags?: readonly string[]; }
type Frozen = Readonly<User>; // utility type makes ALL props readonly
```

## เหตุใดจึงมีความสำคัญ

`?` จำลองข้อมูลที่ไม่บังคับจริง ๆ และบังคับความปลอดภัยจากค่า null; `readonly` แสดงและบังคับความไม่เปลี่ยนแปลง (ยอดเยี่ยมสำหรับการกำหนดค่า อุปกรณ์ประกอบ และการป้องกันการเปลี่ยนแปลงสถานะที่ไม่ตั้งใจ)

ทั้งสองอย่างนี้ส่งการตรวจสอบความถูกต้องไปที่คอมไพเลอร์