09_TypeScript 中的接口（属性接口、函数类型接口）

一、概述

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。
接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。
TypeScript 中的接口类似于 java ，同事还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
定义标准。

二、属性接口

对 json 的约束

1、ts 中定义方法

function printLabel():void {
  console.log("printLabel")
}
printLabel()

2、ts 中定义方法传入参数

function printLabel(label:string):void {
  console.log(label)
}
printLabel("printLabel")

3、ts 中自定义方法传入参数对 json 进行约束

function printLabel(labelInfo:{label:string}):void {
  console.log(labelInfo.label)
}
let obj = {label: "printLabel"}
printLabel(obj)

4、对批量方法传入参数进行约束，接口：行为和动作的规范，对批量方法进行约束

// 就是传入对象的约束 属性接口
interface FullName {
  firstName: string;
  secondName: string
}
function printName(name: FullName){
  console.log(name.firstName + name.secondName)
}
printName({firstName: '六', secondName: "3"})// 必须只能有这两个参数
var obj = {
	age: 10,
	firstName: '六',
	secondName: "3"
}
printName(obj)// 这样就只需要包含这两个参数，可以多其他的参数,传入不报错，但是使用属性的时候会报错

5、可选属性（?）

interface FullName {
  firstName: string;
  secondName?: string;
}
function printName(name: FullName){
  console.log(name.firstName + name.secondName)
}
printName({firstName: '六',})

6、接口封装 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) {
      console.log("成功啦", config.dataType=='json'?JSON.parse(xhr.responseText) :xhr.responseText)
    }
  }
}
ajax({
  type: 'get',
  url:"http://",
  dataType: 'json'
})

三、函数类型接口

对方法传入的参数以及返回值进行约束
加密的函数类型接口

interface encrypt {
  (key:string,value:string): string;
}
let md5:encrypt = function(key:string, value:string):string {//参数必须要符合接口的约束定义
  //模拟操作
  return key+value
}
console.log(md5("name", '章是'))