【05】基础知识：typescript中的接口

一、接口的作用

在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范；在程序设计里面，接口起到一种限制和规范的作用。

接口定义了某一批类所需要遵守的规范，接口并不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。

typescript 中的接口类似于 java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

二、属性类型接口

1、了解，函数参数类型约束

typescript 中 函数的参数类型约束，只能对单个函数生效

// ts 中定义方法传入参数，约束类型必须为 string
function print(label: string): void {
  console.log(label)
}
print('hahah') // hahah

// ts 中定义方法传入参数，对 json 进行约束
function printObj(labelInfo: { label: string }): void {
  console.log(labelInfo.label)
}
printObj({ label: 'hahah' }) // hahah

2、属性类型接口对方法入参批量约束

属性接口用来对 json 进行约束，对批量方法传入参数进行约束。 通过 interface 关键字来定义接口。

// 定义属性接口，对传入对象进行约束
interface FullName {
  firstName: string; // 注意，以 ; 结束，可省略 
  lastName: string
}

// 定义方法 getName
function getName(name: FullName): void {
  console.log(`${name.firstName}${name.lastName}`)
}
// 定义方法 returnName
function returnName(name: FullName): string {
  return `${name.firstName}${name.lastName}`
}

// 传入参数必须包含 firstName、lastName；参数的顺序可以不一样
getName({ firstName: '林', lastName: '一'})
returnName({ firstName: '佟', lastName: '年'})

3、属性类型接口的可选属性

typescript 中 通过【 属性名称?: 数据类型 】形式来定义可选属性，代表该属性在当前 json 对象可以不传。

// 接口：可选属性
interface FullName {
  firstName?: string // 可选属性
  lastName: string
}

// 定义方法 getName
function getName(name: FullName): void {
  console.log(`${name.firstName}${name.lastName}`)
}

getName({ lastName: '一'}) // undefined一

4、属性类型接口案例

jquery ajax请求 封装，仅为示例

interface Config {
  type: string // 请求方式
  url: string // 请求地址
  data?: string // 请求参数
  dataType: string // 参数类型
}

function ajax(config: Config) {
  let xhr = new XMLHttpRequest()
  xhr.open(config.type, config.url, true)
  xhr.send(config.data)
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      if (config.dataType =='json') {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  }
}

ajax({
  type: 'get',
  url: 'http://a.itying.com/api/productlist', // api
  data:'name=zhangsan',
  dataType: 'json'
})

三、函数类型接口

对方法传入的参数，以及返回值进行约束

// 定义加密的函数类型接口
interface encrypt {
  (key: string, value: string): string
}

const md5: encrypt = function(key:string, value: string): string {
  // 模拟操作，加密算法
  return `${key}+${value}`
}

const sha1: encrypt = function(key:string, value: string): string {
  // 模拟操作，加密算法
  return `${key}-${value}`
}

console.log(md5('md5', '加密字符串')) // md5+加密字符串
console.log(sha1('sha1', '加密字符串')) // sha1-加密字符串

四、可索引类型接口

对数组、对象进行约束，不常用

1、约束数组

// ts中定义数组
const arr: number[] = [1, 2]
const arr2: Array<string> = ['1', '2']

// 定义可索引类型接口
interface UseArr {
  // 索引值为number，value为string
  [index: number]: string
}

const arr3: UseArr = ['1', '2']

2、约束对象

interface UseObj {
  // 索引值为string，value为string
  [index: string]: string
}

const obj: UseObj = {
  name: 'lily',
  sex: '女'
}

五、类类型接口

类类型接口用来对类进行约束，和抽象类相似。通过关键字 interface 定义接口，在类中通过关键字 implements 来实现接口。

// 定义 类类型接口（标准）
interface Animal {
  name: string
  eat(str: string): void
}

// 实现接口
class Dog implements Animal {
  public name: string
  constructor(name: string) {
    this.name = name
  }

  // 类中必须要有 eat 方法，没有 ts 编译保存；参数可以没有
  eat(str: string): void {
    console.log(`${this.name}吃${str}`)
  }
}

// 实例化 Dog 类
const dog = new Dog('小黑')
dog.eat('粮食') // 小黑吃粮食

六、接口扩展

接口可以继承接口，接口之前通过关键字 extends 进行继承。

interface Animal {
  eat(): void
}

// Person接口 继承 Animal接口
interface Person extends Animal {
  work(): void
}

// People类 使用 Person接口
class People implements Person {
  public name: string
  constructor(name: string) {
    this.name = name
  }

  eat(): void {
    console.log(this.name, 'People类必须有eat方法')
  }

  work(): void {
    console.log(this.name, 'People类必须有work方法')
  }
}

const people = new People('某个人')
people.eat() // 某个人 People类必须有eat方法
people.work() // 某个人 People类必须有work方法

复杂应用示例，类继承父类并实现接口

interface Animal {
  eat(): void
}

interface Person extends Animal {
  work(): void
}

class Programmer {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  coding(code: string): void {
    console.log(this.name + code)
  }
}

// People类 继承Programmer类  使用Person接口
class People extends Programmer implements Person {
  constructor(name: string) {
    super(name)
  }

  eat(): void {
    console.log(this.name, 'People类必须有eat方法')
  }

  work(): void {
    console.log(this.name, 'People类必须有work方法')
  }
}

const people = new People('某个人')
people.eat() // 某个人 People类必须有eat方法
people.work() // 某个人 People类必须有work方法
people.coding('在工作') // 某个人在工作