ts 接口 interface

前言

• 是对象的状态(属性) 和 行为(方法) 的 抽象(描述)
• 是一种规范、规则、能力、约束

一、基本使用

• 对变量使用 interface，同样也是 :interfaceName
• 变量需要 严格按照 interface 内部的限制，多传、少传、错传都会报错
• readonly 表示 只读，修改则会报错
• ?: 表示 可有可无

例：创建人的对象，姓名只读不可修改，性别可传可不传

interface IPerson {
  // 声明只读属性
  readonly name: string;
  // 可读可写
  age: number;
  // 可读可写
  number: number
  // 非必传（可有可无）
  sex ?: string
}

const person:IPerson = {
  name: 'blue',
  age: 18,
  number: 4103221996,
  // 可有可无
  sex: '女',
  // 定义一个不在interface内部约束的属性，会报错
  // grade: 7
}

// age 属性是可读可写的
person.age = 16

// name 属性是只读的，修改会报错
// person.name = '哈哈'

二、函数类型

• 通过 接口 的方式作为 函数的类型 来使用
• 白话：定义函数的 参数类型 和 返回值类型

例：定义一个函数，展示字符串 indexOf 的用法

// 定义函数类型
interface ISearchFun {
  // (参数类型) :返回值类型
  (search: string, target: string) : boolean
}

// 使用：感觉代码很多很冗余？
const exitStr: ISearchFun = function (search: string, target: string) : boolean {
  return search.indexOf(target) > 0
}


// 但是，与不使用函数类型的区别在于：函数的参数名不需要与接口里定义的名字相匹配
const exitStr2: ISearchFun = function (searchNew: string, targetNew: string) : boolean {
  return searchNew.indexOf(targetNew) > 0
}

三、类 类型

3.1、基本使用

• 顾名思义，就是 类的类型
• 类 与 interface 的关系，叫做 实现，需要通过 implements 关键字
• 在类中同样也需要严格按照 interface 中定义的限制 实现

例：类中定义一个方法fly，fly返回值是string

// 定义接口
interface IFly {
  fly():string
}
// 定义一个类，这个类的类型就由上面的接口定义
class Person implements IFly {
  // 接口中定义了fly方法，所以类中也需要将fly方法真正的实现（接口中的内容在类中都要真正的实现）
  fly () {
    console.log('我会飞了')
    return '哈哈哈'
  }
}
const person1 = new Person()
person1.fly()

3.2、一个类实现多个接口

• 同样的 implements 语法，接口之间 , 隔开

interface IFly {
  fly():string
}
interface ISwim {
  swim():void
}

// 类可以实现一个接口，也可以实现多个接口。要注意：接口中的内容在类中都要真正的实现
class Person2 implements IFly, ISwim {
  fly () {
    console.log('我会飞了')
    return '哈哈哈'
  }
  swim () {
    console.log('我会游泳了')
  }
}
const person2 = new Person2()
person2.fly()
person2.swim()

3.3、先把接口合并，再让类去实现合并后的接口

• 多个接口之间的 继承， 通过 extends 关键字

interface IFly {
  fly():string
}
interface ISwim {
  swim():void
}
// 定义一个接口，继承其他多个接口
interface IFlyAndISwim extends IFly, ISwim {}

// 类实现合并后的接口
class Person3 implements IFlyAndISwim {
  fly () {
    console.log('我会飞了')  
    return '哈哈哈'
  }
  swim () {
    console.log('我会游泳了')
  }
}
const person3 = new Person3
person3.fly()
person3.swim()

总结：

• 接口 和 接口 之间叫 继承（extends），接口 和 类 之间叫 实现（implements）
• 继承多个、实现多个 时，都是 , 隔开