Kiểu object trong TypeScript: thuộc tính tùy chọn, readonly

Kiểu object trong TypeScript liệt kê các thuộc tính mà object có và kiểu của từng thuộc tính: { name: string; age: number }. Thêm ? để thuộc tính trở thành tùy chọn và readonly để không cho gán lại nó. Bạn có thể viết kiểu trực tiếp, hoặc đặt tên bằng type hay interface để dùng lại.

// Inline object type
let point: { x: number; y: number } = { x: 3, y: 4 };

// Named object type with optional and readonly properties
type User = {
    readonly id: number;
    name: string;
    email?: string; // optional: may be missing
};

const ada: User = { id: 1, name: "Ada" };
const grace: User = { id: 2, name: "Grace", email: "grace@example.com" };

console.log(point.x + point.y);           // 7
console.log(ada.email ?? "no email");      // no email
console.log(grace.email?.toUpperCase());   // GRACE@EXAMPLE.COM

Viết kiểu object

Các thuộc tính được ngăn cách bằng ; hoặc , (cả hai đều được, ; là cách viết thường gặp), và chỉ cần xuống dòng cũng đủ. Kiểu viết trực tiếp phù hợp cho một tham số dùng một lần; với thứ gì dùng từ hai lần trở lên, hãy đặt tên cho nó.

// Inline, in a parameter
function area(rect: { width: number; height: number }): number {
    return rect.width * rect.height;
}

// Named with a type alias
type Rect = { width: number; height: number };

// Named with an interface (the same shape)
interface RectShape {
    width: number;
    height: number;
}

type và interface mô tả cấu trúc object tốt như nhau. Những điểm khác biệt (gộp khai báo, union) được trình bày ở trang interface và type.

Truy cập một thuộc tính mà kiểu không khai báo là lỗi biên dịch: point.z gây lỗi TS2339, Property 'z' does not exist on type '{ x: number; y: number; }'.

Thuộc tính tùy chọn

Dấu ? sau tên cho phép bỏ qua thuộc tính. Đọc một thuộc tính tùy chọn sẽ nhận T | undefined, nên TypeScript buộc bạn xử lý trường hợp thiếu trước khi dùng.

type Profile = {
    name: string;
    nickname?: string;
    age?: number;
};

function greet(p: Profile): string {
    // p.nickname is string | undefined
    const shown = p.nickname ?? p.name;         // default with ??
    const ageText = p.age !== undefined ? ` (${p.age})` : ""; // or check
    return `Hi, ${shown}${ageText}`;
}

console.log(greet({ name: "Ada" }));                        // Hi, Ada
console.log(greet({ name: "Grace", nickname: "Amazing Grace", age: 85 }));
console.log("age" in { name: "Ada" });                      // false

Gọi phương thức trên một thuộc tính tùy chọn mà không kiểm tra là lỗi: p.nickname.toUpperCase() thất bại với TS18048, 'p.nickname' is possibly 'undefined'. Dùng optional chaining (p.nickname?.toUpperCase()) khi kết quả undefined là chấp nhận được.

prop?: T và prop: T | undefined không giống nhau. Cách đầu cho phép khóa vắng mặt; cách sau bắt buộc có khóa, dù giá trị có thể là undefined:

type A = { note?: string };
type B = { note: string | undefined };

const a1: A = {};                    // fine: key left out
const b1: B = { note: undefined };   // fine: key present
// @ts-expect-error: Property 'note' is missing in type '{}' but required in type 'B'.
const b2: B = {};

console.log(a1, b1, b2); // {} { note: undefined } {}

Thuộc tính readonly

readonly ngăn gán lại một thuộc tính sau khi object đã được tạo. Đây chỉ là kiểm tra lúc biên dịch, và nó chỉ ở mức nông: object hay mảng lưu trong một thuộc tính readonly vẫn có thể bị thay đổi bên trong.

type Order = {
    readonly id: string;
    readonly items: string[];
    status: "open" | "paid";
};

const order: Order = { id: "A-17", items: ["tea"], status: "open" };

order.status = "paid"; // fine
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property.
order.id = "B-2";
order.items.push("cake"); // allowed: readonly is shallow

console.log(order); // { id: 'B-2', items: [ 'tea', 'cake' ], status: 'paid' }

Đầu ra cho thấy cả hai giới hạn: id thực sự đã thay đổi lúc chạy (chỉ trình biên dịch biết nó là readonly), và mảng bên trong đã bị sửa. Với mảng chỉ đọc, dùng readonly string[]; để mọi thuộc tính đều readonly cùng lúc, dùng Readonly<Order>.

Kiểm tra thuộc tính thừa

Khi bạn gán trực tiếp một object literal cho biến có kiểu, hoặc truyền thẳng nó vào tham số có kiểu, TypeScript từ chối mọi thuộc tính mà kiểu không khai báo. Thuộc tính thừa trong một literal mới gần như luôn là lỗi gõ nhầm.

// This does not compile: 'colour' is not a property of Options.
type Options = { color?: string; size?: number };

function draw(opts: Options) {
    console.log(opts.color ?? "black", opts.size ?? 1);
}

draw({ colour: "red", size: 2 });

index.ts(8,8): error TS2561: Object literal may only specify known properties, but 'colour' does not exist in type 'Options'. Did you mean to write 'color'?

Mã lỗi là TS2561 vì trình biên dịch tìm thấy một tên gần giống; thuộc tính thừa không có tên tương tự sẽ gây TS2353, Object literal may only specify known properties, and 'z' does not exist in type 'Point'. Nếu không có phép kiểm tra này, lỗi gõ nhầm vẫn biên dịch được, color sẽ là undefined, và chương trình lặng lẽ vẽ bằng màu đen. Phép kiểm tra chỉ áp dụng cho literal mới. Một object đã nằm trong biến có thể mang thuộc tính thừa, vì hệ thống kiểu của TypeScript là structural: một giá trị khớp với kiểu khi nó có ít nhất các thuộc tính bắt buộc.

type Point = { x: number; y: number };

const point3d = { x: 1, y: 2, z: 3 };
const p: Point = point3d; // fine: point3d has x and y

function show(pt: Point) {
    console.log(pt.x, pt.y);
}
show(point3d); // 1 2

Object lồng nhau và phương thức

Kiểu object có thể lồng nhau, và có thể mô tả phương thức bằng cú pháp phương thức hoặc bằng một thuộc tính có kiểu hàm.

type Company = {
    name: string;
    address: {
        city: string;
        zip?: string;
    };
    tags: string[];
    describe(): string;                  // method syntax
    rename: (newName: string) => void;   // function property
};

const acme: Company = {
    name: "Acme",
    address: { city: "Berlin" },
    tags: ["b2b"],
    describe() {
        return `${this.name} in ${this.address.city}`;
    },
    rename(newName) {
        this.name = newName;
    },
};

acme.rename("Acme GmbH");
console.log(acme.describe());               // Acme GmbH in Berlin
console.log(acme.address.zip ?? "no zip");  // no zip

type Address = Company["address"]; // reuse a nested type by indexing
const home: Address = { city: "Paris", zip: "75001" };
console.log(home);

Với cấu trúc sâu hoặc được dùng lại, hãy đặt tên cho kiểu bên trong (type Address = { ... }) rồi tham chiếu đến nó, hoặc lấy nó ra từ kiểu bên ngoài bằng indexed access, Company["address"], như các dòng cuối.

object, {} và Object

Ba kiểu nghe giống nhau nhưng mang nghĩa khác nhau:

const a: object = { id: 1 };
const b: object = [1, 2];
const c: {} = 42;          // allowed: {} does not mean "empty object"
const d: {} = "text";      // allowed too

// @ts-expect-error: Type 'number' is not assignable to type 'object'.
const e: object = 42;

console.log(a, b, c, d, e);

{} không có nghĩa là "một object rỗng"; nó có nghĩa là "không phải null hay undefined". Để nhận mọi object với các khóa chưa biết trước, dùng Record<string, unknown>; với một bảng ánh xạ từ khóa sang giá trị, dùng index signature hoặc Record như ở trang từ điển (dictionary). Trong đa số trường hợp, một cấu trúc cụ thể tốt hơn cả ba kiểu trên.