TypeScript--接口

接口

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

Typescript中的接口

标准写法

//定义接口
interface FullName{
    firstName:string;
    secodeName:string;
}
//声明方法,传入的参数为接口中定义的类型
function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
//调用方法，传入定义好的接口，参数
printName({
    firstName:'aa',
    secodeName:'bb'
});

顺序可调乱

interface FullName{
    firstName:string;
    secodeName:string;
}

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
printName({
    secodeName:'bbb',
    firstName:'aaa',
});

另一种正确写法，传入的参数可比定义的多

interface FullName{
    firstName:string;
    secodeName:string;
}

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
var obj = {
    age:20,
    firstName:'cc',
    secodeName:'dd'
}
printName(obj);

错误写法

数据类型不一致

数量不一致

可选参数?

interface FullName{
    firstName:string;
    secodeName?:string;
}

function printName(name:FullName){
    console.log(name);
}

printName({
    firstName:'aa'
})

printName({
    firstName:'aa',
    secodeName:'bb'
})

属性类型接口(ajax)

interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

function ajax(config:Config) {
    var 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('chengong');
            if (config.dataType == 'json') {
                console.log(JSON.parse(xhr.responseText));
            }
            else {
                console.log(xhr.responseText);
            }
        }
    };
}

//可选参数data,不传data
ajax({
    type: 'get',
    url: 'http://a.itying.com/api/productlist',
    dataType: 'json'
});
//可选参数data,传data
ajax({
    type: 'get',
    data: 'name=zhangsan',
    url: 'http://a.itying.com/api/productlist',
    dataType: 'json'
});

函数类型口

对方法传入的参数，以及返回值进行约束
可能批量，对应多个方法

interface encrypt{
    (key:string,value:string):string;
}

var md5:encrypt = function(key:string,value:string):string{
    return key+value;
}

console.log(md5('name','lisi'));

var sha1:encrypt = function(key:string,value:string):string{
    return key+'---'+ value;
}
console.log(sha1('name','wanwu'));

可索引接口

数组

正确

interface UserArr{
    [index:number]:string
}

var arr:UserArr=['123','456'];
console.log(arr[0]);

错误

interface UserArr{
    [index:number]:string
}
var arr:UserArr=[123,'bbb'];
console.log(arr[0]);

对象

interface UserObj{
    [index:string]:string;
}

var arr:UserObj= {name:'list'};
console.log(arr.name)

类类型接口

1. 对类的约束
2. 和抽象类抽象有点相似，比抽象类更强大
3. implements为类实现接口
4. 接口中的属性和方法都要有

正确

interface Animall{
    name:string;
    eat(str:string):void;
}

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}

var dd = new Dogg('小黑');
dd.eat();


class Catt implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){
        console.log(this.name + '吃' + food);
    }
}

var cc = new Catt('小花猫');
cc.eat('老鼠');

错误

类中没有对应的方法

interface Animall{
    name:string;
    eat(str:string):void;
}

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
}

var dd = new Dogg('小黑');
dd.eat();

接口拓展:接口可以继承接口

一个类实现二个接口

// 动物接口
interface Animalll{
    eat():void;
}
//人接口，人属性动物
interface Person extends Animalll{
    work():void;
}
//前端类
class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name +'吃米粉');
    }
    work(){
        console.log(this.name + '写js');
    }
}

var w = new Web('小李');
w.eat()
w.work()

一个类继承父类，并实现2个接口(一个接口继承另一个接口)

// 动物接口
interface Animalll{
    eat():void;
}
//人接口，人属性动物
interface Person extends Animalll{
    work():void;
}
//程序员类
class Programmer{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    conding(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 + '写js');
    }
}

var w = new Web('小李');
w.eat()
w.work()
w.conding('写代码')