IP地址检测
视频播放器
输入关键词搜索
登录
TypeScript中interface和type的区别

TypeScript中interface和type的区别

2025-01-05
编程开发

interface

interface主要用于描述对象的结构和类的契约,例如:

interface Person {
    name: string;
    age: number;
}

interface可以轻松定义可选属性和只读属性

interface Config {
    color?: string; // 可选属性
    readonly size: number; // 只读属性
}

interface扩展

// Interface 使用 extends
interface Animal {
  name: string
}
interface Dog extends Animal {
  bark(): void
}

interface支持声明合并

// Interface 可以多次声明,会自动合并
interface User {
  name: string
}
interface User {
  age: number
}
// 等同于:
interface User {
  name: string
  age: number
}

使用建议,如果你需要描述对象结构,优先使用 interface:

  • 更符合面向对象编程思想
  • 支持声明合并,更容易扩展
  • 错误提示更加清晰友好
  • 性能更好(不需要编译器进行类型计算)

type

type更灵活,可以定义复杂的类型,包括联合类型和交叉类型,适用于更广泛的场景

type Person = {
  name: string
  age: number
}

type可以通过交叉类型(&)来组合多个类型

type Animal = {
  name: string
}
type Dog = Animal & {
  age: number
}

Type可以表达联合类型、元组等

type Status = "pending" | "success" | "failed"
type Point = [number, number]
type Callback = (data: string) => void

// Type 支持计算属性
type Keys = "firstname" | "secondname"
type DudeType = {
  [key in Keys]: string
}

使用 type 的场景:

  • 需要使用联合类型或交叉类型
  • 需要使用元组和数组类型
  • 需要使用映射类型、条件类型等高级类型
  • 需要利用类型别名的特性

实际使用示例

优先用interface,无法满足要求再用type

// 优先使用 interface 描述对象结构
interface User {
  id: number
  name: string
  age?: number
}

// 使用 type 处理复杂类型
type UserRole = "admin" | "user" | "guest"
type ApiResponse<T> = {
  data: T
  status: number
  message: string
}
type PartialUser = Partial<User>

// 混合使用
interface UserWithRole extends User {
  role: UserRole
}
THE END
0/500
暂无评论
📢网站公告
欢迎来到这里
⚙️实用工具
html转pdfmarkdown编辑器
本站推荐:腾讯云服务器仅需2.3折 (点击直达)
用户协议
隐私政策
Build Time: 2025-02-06 16:15:33