TypeScript 中的对象类型

TypeScript 中的对象类型

背景

TypeScript 是 JavaScript 的超集，提供静态类型检查。对象类型用于描述与 JavaScript 对象相关的结构和行为。

对象类型定义

  • 简单对象类型: 定义属性及其类型。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    type User = {
        name: string; // 用户名
        age: number;  // 年龄
    };

    const user: User = {
        name: "Alice",
        age: 30,
    };

  • 可选属性: 使用 ? 表示属性可选。

    1
    2
    3
    4
    5
    6
    7
    type User = {
        name: string;
        age?: number; // 年龄是可选的
    };

    const user1: User = { name: "Bob" }; // 合法
    const user2: User = { name: "Charlie", age: 25 }; // 合法

  • 只读属性: 使用 readonly 修饰符来定义只读属性。

    1
    2
    3
    4
    5
    6
    7
    type User = {
        readonly id: number; // 用户唯一标识符，不可修改
        name: string;
    };

    const user: User = { id: 1, name: "Eve" };
    // user.id = 2; // 错误：无法分配到 'id'，因为它是只读属性。

对比不同对象类型

特性 简单对象 可选属性 可读写属性
属性定义 必须全部定义 部分可以省略 可以定义为只读
用法示例 const obj : {a:string, b:number} const obj : {a:string, b?:number} const obj : { readonly a:string }
错误处理 所有必须赋值 可以赋值部分 不可更改只读属性

注意事项

  • 对象类型可以嵌套，支持更复杂的数据结构。
  • 使用接口（interface）进行更复杂的对象建模。

嵌套对象示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
type Address = {
    street: string;
    city: string;
};

type User = {
    name: string;
    address?: Address; // 地址为可选属性，可以嵌套其他对象类型 
};

const userWithAddress: User = {
    name: "Diana",
    address: {
        street: "123 Main St",
        city: "New York",
    },
};

const userWithoutAddress: User = {
    name: "Frank",
};

通过这种方式，可以清晰地表示一个用户以及其可能存在的地址信息。