Typescript 中的 接口 interface

接口的作用：

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

1. 属性类接口

interface FullName {
    firstName:string; // 注意;结束
    secondName:string;
}

function printName(name:FullName) {
    // 必须传入对象 firstName secondName
    console.log(`${name.firstName}---${name.secondName}`)
}

  var obj = {

      firstName: '许',

      secondName: '三多'

  }

  printName(obj); // 传入的参数必须包含 firstName、secondName

 

  function printInfo(name:FullName) {

      console.log(`${name.firstName}===${name.secondName}`)

  }

  var obj1 = {

      firstName: '王',

      secondName: '里'

  }

  printInfo(obj1)

  可选属性

interface FullName {
    firstName:string;
    secondName?:string;
}
function getName(name:FullName) {
    console.log(name);
}
var obj = {
    firstName: 'firstName',
}
getName(obj)

   原生封装ajax

// 原生封装ajax
interface Config {
    type:string;
    url:string;
    data?:string;
    dataType:string;
}
function ajax(config:Config) {
    let xhr = new XMLHttpRequest();
    xhr.open(config.url, config.url, true);
    xhr.send(config.data);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            console.log('成功')
            if (config.dataType == 'json') {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log(xhr.responseText)
            }
        }
    }
}
ajax({
    type:'get',
    url:'http://s.iting.com',
    data:'name=zhangsan',
    dataType:'json',
})

 

2. 函数类接口：对方法传入的参数以及返回值进行约束

// 加密的函数类型接口
interface encrypt {
    (key:string,value:string):string; // 参数必须是 key value，返回值必须是string
}
var md5:encrypt = function(key:string,value:string):string{
    return key+value;
}
console.log(md5('name','张三'));

3. 可索引接口：数组、对象的约束

 数组的约束：

interface UserArr{
    [index:number]:string; // 数组的 index 是 number, 值是string
}
var arr:UserArr = ['aaa', 'bbb'];
console.log(arr[0])

对 对象的约束：

interface UserObj {
    [index:string]:string;
}
var obj:UserObj = {name: '张三'}
console.log(obj)

 

4. 类类型接口：对类的约束，和抽象类有点类似

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal {
    name:string;
    constructor(name:string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + '吃狗粮')
    }
}
var dog = new Dog('萨摩')
dog.eat()

 

5.  接口扩展：接口可以继承接口

 

interface Animal{
    eat():void;
}
interface Person extends Animal {
    work():void;
}
class Programmer {
    public name:string;
    constructor(name:string) {
        this.name = name;
    }
    coding() {
        console.log(this.name + '写代码')
    }
}
class Web extends Programmer implements Person {
    constructor(name:string) {
        super(name);
    }
    eat() {
        console.log(this.name + '吃土')
    }
    work() {
        console.log(this.name + '搬砖')
    }
    coding() {
        console.log(this.name + '写ts代码')
    }
}
var w = new Web('贝贝')
w.eat()
w.work()
w.coding()