浅谈 interface 和 type

type 类型别名

  1. 给类型起一个新名字，当声明非对象类型时适用
type MyNumber = number
type StringOrNumber = string | number
type Text = string | string[]
type Point = [number, number]
type Callback = (data: string) => void
  1. 支持传入泛型
    常用的工具方法都是通过 type 实现的
type Partial<T> = {
  [P in keyof T]?: T[P]
}

interface 接口

只能用于定义对象类型
可以定义对象类型上的属性和方法

相同点

  1. 都可以用来描述对象或函数
  2. 都支持扩展
    type 通过 & 交叉运算符来扩展，interface 通过 extends 关键字来扩展

区别

  1. type 可以为基本类型、联合类型或元祖类型定义别名，而接口不行

  2. 同名接口会自动合并，而类型别名不会
    1). 不同属性之间直接合并

interface User {
  name: string
}
interface User {
  id: number
}
合并成
interface User {
  name: string
  id: number
}

2). 相同属性不同类型，报错

interface User {
    name: string
 }
 interface User {
    // 报错 name 必须是 string 类型
     name: number
 }

3). type 直接报错

type User = {
  name: string
}
// 报错：标识符“User" 重复
type User = {
  id: number
}
  1. interface 会创建新的类型名，type 只是创建类型别名，并没有新创建类型。

使用场景

  1. type 声明的对象类型自带索引签名，而interface必须声明索引类型
interface MyInterface {
    foobar: string
}
type MyType = {
    foobar: string
}
const exampleInterface: MyInterface = { foobar: "hhh" }
const exampleType: MyType = { foobar: "hhh" }

let record: Record<string, string> = {}

// interface 类型报错
// 不能将类型“MyInterface”分配给类型“Record<string, string>”。
//  类型“MyInterface”中缺少类型“string”的索引签名
record = exampleInterface

// type 不报错
record = exampleType

如果是interface 需要修改为

interface MyInterface {
  [k: string]: string
  foobar: string
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容