typescript 接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。接口起到一个限制和规范的作用
type（类型别名）跟interface差不多

什么是接口

现实中的接口.png

接口差不多就这样，你大小宽度什么的得对应起来

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

定义的变量比接口少了一些属性是不允许的：

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可见，赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};
or
let tom: Person = {
    name: 'Tom',
    age: 25
}; 
//都可

这时仍然不允许添加未定义的属性：

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。

🌰

interface FullName{
  firstName:string; //⚠️：分号结束
  secondName:string; 
}
function printName(name:FullName){
  //必须传入对象 firstName secondName
  console.log(name.firstName+'--'name.secondName)
}
printName({
  firstName:'赵',
  second:'四',
  age:20 //这个会报错，因为接口没有定义这个
})

但是 如果这样写：
let obj = {
   firstName:'赵',
   second:'四',
   age:20
}
printName(obj) //不报错
//至于为啥，我也不造

🌰 ts封装ajax

interface Config{
  type:string;
  url:string;
  data?:string;
  dataType:string;
}
function ajax(config:Config){
  let xhr = new HMLHttpRequest();
  xhr.open(config.type,config.url,true);
  xhr.send(config.data);
  xhr.onReadyStatusChange = function(){
     if(xhr.readyState === 4 && xhr.status === 200) {
      console.log('success')
      if(config.dataType =='JSON'){
        return JSON.parse(xhr.responeseText)
      } else{
        return xhr.responeseText
      }
    }
  }
}
ajax({
  type:'get',
  url:'http://www.xxx.com',
  dataType:'json'
})

函数类型接口

对方法传入的参数已经返回值进行约束
实现一个加密的函数类型接口

interface encrypt{
  (key:string,value:string):string;
}
//参数是key和value，必填。返回值是string

var md5:encrypt = function(key:string,value:string):string{
  return key+value;
}
md5('name','zhangsan') //namezhangsan

var sha1:encrypt = function(key:string,value:string):string{
  return value+key
}
sha1('name','zhangsan') //zhangsanname

可索引接口

对数组、对象的约束（不常用）

interface UserArr{
  [index:number]:string
}

类类型接口

父定义一个标准，子实现。下面的例子，如果缺少name或者eat 就会报错。（与抽象类抽象方法类似）

interface Animal{
  name:string;
  eat(str:string):void;
}
class Dog implements Animal{
  constructor(name:string){
    this.name = name
  }
  eat(){
    console.log(`${this.name}吃狗粮`)
  }
}
let d = new Dog('小黑') 
d.eat(); //小黑吃狗粮

class Cat implements Animal{
  name:string;
  constructor(name:string){
    this.name = name
  }
  eat(food:string):void{
    console.log(`${this.name}吃${food}`)
  }
}
let c = new Cat('小猫');
c.eat('鱼') //小猫吃鱼

接口扩展（继承）

interface Animal{
  eat():void
}
interface Person extends Animal{
  work():void;
}
class Web implements Person{
  name:string;
  constructor(name:string){
    this.name = name
  }
  eat(){
    console.log(this.name+'喜欢吃棉条')
  };
  work(){
    console.log(this.name+'敲代码')
  }
}
let w = new Web('李四')
w.work(); //李四敲代码

interface Animal{
  eat():void
}
interface Person extends Animal{
  work():void;
}
class Programmer{
  name:string;
  constructor(name:string){
    this.name = name
  }
  coding(code:string){
    console.log(this.name+code)
  }
}
class Web extends Programmer implements Person{
  constructor(name:string){
    super(name)
  }
  eat(){
    console.log(this.name+'喜欢吃棉条')
  };
  work(){
    console.log(this.name+'敲代码')
  }
}
let w = new Web('李四')
w.work(); //李四敲代码
w.coding('写ts') //李四写ts