我的日常开发记录日志
首页
  • Laravel
  • Thinkphp
  • Swoole
  • Workman
  • php
  • HTML
  • CSS
  • JavaScript
  • Vue
  • ES6
  • 小程序
  • Mysql
  • Redis
  • Es
  • MongoDb
  • Git
  • Composer
  • Linux
  • Nginx
  • Docker
  • Vpn
  • 开发实战
  • 开发工具类
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档数据
GitHub (opens new window)

我的日常开发记录日志

never give up
首页
  • Laravel
  • Thinkphp
  • Swoole
  • Workman
  • php
  • HTML
  • CSS
  • JavaScript
  • Vue
  • ES6
  • 小程序
  • Mysql
  • Redis
  • Es
  • MongoDb
  • Git
  • Composer
  • Linux
  • Nginx
  • Docker
  • Vpn
  • 开发实战
  • 开发工具类
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档数据
GitHub (opens new window)
  • html

  • css

  • javascript

  • vue

  • 小程序

  • Es6

    • ES6
    • ts基础
    • ts注解
    • ts泛型
    • ts对象接口类型
      • vue使用js转换到ts差异
    • 前端
    • Es6
    窝窝侠
    2024-11-19

    ts对象接口类型

    # TypeScript 中对象、接口和类型的详细解释及其区别与使用场景

    TypeScript 提供了几种用于定义和约束数据结构的方式,其中 对象、接口(interface)和 类型别名(type)是最常用的三种。它们有不同的用法和特性,各自适合不同的场景。本文将详细介绍它们的定义、区别以及在实际开发中的使用场景。

    # 1. 对象(Object)

    在 TypeScript 中,对象字面量表示一类特定的数据结构,它通常用于存储键值对。对象字面量是最简单的结构定义方式,适合用于一些临时性和简单的数据结构。

    # 对象的定义

    对象的定义直接通过字面量语法进行,可以指定每个属性的类型。

    const person = {
      name: "Alice",
      age: 30,
    };
    
    1
    2
    3
    4

    # 对象的使用场景

    • 简单的临时数据结构:当你只需要一个简单的结构来存储数据时,使用对象字面量是最快速且直观的方式。
    • 无约束或需要灵活性时:当你对数据结构没有复杂要求时,可以直接使用对象字面量。

    # 设置默认值

    对象字面量本身不能直接定义默认值,但是可以通过赋值来提供默认值。

    const defaultPerson = { name: "John", age: 30 };
    const person = { ...defaultPerson, name: "Alice" }; // 默认值会被覆盖
    
    1
    2

    # 2. 接口(Interface)

    接口用于定义对象的结构,是 TypeScript 中最强大且常用的类型定义工具。它主要用于描述对象的形状,强制对象遵循特定的结构,可以包含方法、属性和可选属性。

    # 接口的定义

    接口的定义通过 interface 关键字进行,允许定义属性、方法及其类型。接口也支持继承,可以扩展其他接口或类型。

    interface Person {
      name: string;
      age: number;
      greet(): void;
    }
    
    1
    2
    3
    4
    5

    # 接口的使用场景

    • 约束对象的结构:当你需要定义复杂的对象类型并希望强制遵循某个结构时,接口非常合适。
    • 定义类的契约:接口通常与类一起使用,类可以实现接口并提供具体实现。
    • 支持接口继承:当你需要共享属性或方法时,可以通过接口继承创建更复杂的结构。

    # 设置默认值

    接口本身无法提供默认值,但可以在实现接口的类或对象实例化时为属性设置默认值。

    interface Person {
      name: string;
      age: number;
    }
    
    class Employee implements Person {
      name: string = "John";  // 默认值
      age: number = 30;       // 默认值
    
      constructor(name?: string, age?: number) {
        if (name) this.name = name;
        if (age) this.age = age;
      }
    }
    
    const employee = new Employee();  // 使用默认值
    console.log(employee);  // 输出: Employee { name: 'John', age: 30 }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    # 3. 类型别名(Type Alias)

    类型别名通过 type 关键字定义,它用于为复杂类型或联合类型(联合类型、交叉类型等)创建自定义名称。类型别名非常灵活,可以为基本类型、对象类型、数组类型等提供别名。

    # 类型别名的定义

    类型别名可以定义任意类型,并为其指定一个别名。它也可以用来创建联合类型、交叉类型和其他更复杂的类型。

    type Person = {
      name: string;
      age: number;
    };
    
    type ID = string | number;  // 联合类型
    
    1
    2
    3
    4
    5
    6

    # 类型别名的使用场景

    • 联合类型和交叉类型:当你需要组合多种类型时,类型别名非常适用。例如,联合类型可以定义一个值可能是多种类型之一。
    • 复杂的类型组合:类型别名也可以用来组合更复杂的数据结构,甚至定义泛型。
    • 函数类型:你可以为函数的签名定义类型别名,方便复用。

    # 设置默认值

    类型别名与接口类似,也不能直接提供默认值,但可以在对象创建或函数调用时手动设置默认值。

    type Person = {
      name: string;
      age: number;
    };
    
    const defaultPerson: Person = { name: "John", age: 30 };
    
    const person = { ...defaultPerson, name: "Alice" };  // 覆盖默认值
    console.log(person);  // 输出: { name: 'Alice', age: 30 }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    # 4. 区别对比

    特性 对象(Object) 接口(Interface) 类型别名(Type Alias)
    定义方式 使用字面量直接定义 使用 interface 关键字定义 使用 type 关键字定义
    功能 用于存储键值对的简单数据结构 描述对象、类的结构,强制符合指定的接口规范 用于为任意类型创建别名,支持联合类型、交叉类型等复杂类型组合
    继承能力 无继承能力 支持继承,可以继承多个接口 可以通过交叉类型(&)来组合多个类型,但不支持接口继承
    扩展能力 无法扩展 可以继承其他接口,支持接口扩展 通过交叉类型进行扩展,灵活性较高
    使用场景 简单数据结构,快速定义 强制对象结构,类与接口的契约 定义复杂类型(联合类型、交叉类型),创建函数类型、变量类型等
    是否支持默认值 不支持直接在定义时设置默认值 无法直接为属性提供默认值,需在实现类时设置 无法直接为属性提供默认值,需在创建对象时赋值
    类型推断 TypeScript 会根据对象字面量推断出属性类型 TypeScript 会根据接口定义推断出属性类型 类型推断会根据定义的别名推导类型

    # 5. 总结

    • 对象:最简单的数据结构,用于存储简单的键值对。适用于临时数据,灵活性强,但不适合复杂的数据结构。
    • 接口:用于描述对象的形状或约束类的结构,支持继承和扩展。适用于大型项目中对数据结构的精确控制,特别是类的设计和实现。
    • 类型别名:通过 type 关键字定义类型,可以处理更复杂的类型(如联合类型、交叉类型)。适用于定义复杂的类型组合,尤其是在函数签名、泛型和类型推导中。

    在实际开发中,选择对象、接口还是类型别名取决于你面临的问题:

    • 对于简单的数据结构,可以直接使用对象。
    • 对于需要严格约束的结构,特别是当你要定义类或接口时,使用接口会更为合适。
    • 对于更复杂的类型组合(如联合类型、交叉类型),类型别名则提供了更大的灵活性。

    理解每种类型的特性,并根据具体需求选择合适的方式,将使你在 TypeScript 中编写更健壮且可维护的代码。

    在线编辑 (opens new window)
    上次更新: 2025/02/25, 18:30:54
    ts泛型
    vue使用js转换到ts差异

    ← ts泛型 vue使用js转换到ts差异→

    最近更新
    01
    showprocess用法
    04-29
    02
    vue3中尖括号和冒号的使用细则
    04-29
    03
    sd使用
    02-22
    更多文章>
    🖥️

    © 2025窝窝侠 💌 豫ICP备20005263号-2 🛀 Theme by 💝 Vdoing && 小胖墩er

    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×