ts-05 接口和对象类型

在js中定义对象

•   let obj = {
      name: '亚索',
      age: 8,
    }
  

ts中对象类型

• 在ts我们定义对象，使用关键字interface(接口)，interface用来约束数据的规范

•   interface Obj {
      name: string
      age: number
    }
  
    interface Obj {
      sex: string
    }
  
    let obj1: Obj = {
      name: '亚索',
      age: 12,
      sex: '男',
    }
  

• 有相同名称的接口 会合并

可选式 ?操作符

• 属性 ?: 属性值

•   interface Obj {
      sex: string
      height?: number
    }
  
    let obj1: Obj = {
      sex: '男',
    }
  

任意属性 [propName: string]

• 使用场景 比如后台返回的 字段 不知道的时候

•   interface Obj {
      sex: string
      height?: number
      [propName: string]: any
    }
  
    let obj1: Obj = {
      name: '亚索',
      age: 12,
      sex: '男',
      hobby: '女',
      address: '艾欧尼亚',
    }
  

• 可以看到 我们是没有定义那么多，使用任意属性，也是可以使用

只读属性 readonly

• 只能读取 不能赋值

•   interface Obj {
      readonly sex: string
      height?: number
      [propName: string]: any
    }
  
    let obj1: Obj = {
      name: '亚索',
      age: 12,
      sex: '男',
    }
  
    obj1.age = 11
    obj1.sex = '女' // error
  

使用函数

•   interface Obj {
      readonly sex: string
      fn(): number
    }
  
    let obj1: Obj = {
      sex: '男‘,
      fn: () => {
        return 123
      },
    }
  
    obj1.fn()
  

继承接口

• 可以继承多个接口

•   interface Obj1 {
      name: string
    }
    interface Obj2 {
      age: number
    }
  
    interface Obj3 extends Obj1, Obj2 {
      address: string
    }
  
    let res: Obj3 = {
      name: '艾克',
      address: '祖安',
      age: 15,
    }