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()

 

Typescript 中的 接口 interface

上一篇:消费者分区分配策略


下一篇:HDU6971. I love max and multiply题解