typescript中的接口，接口实现继承

typescript中的接口定义

定义：在面向对象编程中，接口是一种规范的定义，她定义了行为和动作的规范；

在程序设计中，接口起到一种限制和规范的作用，接口定义了某一批类所需要的遵守的规范，接口不关心这些类的内部状态数据，也不关心类里面方法的实现细节，

她只规定这批类必须提供某些方法，提供这些方法的类就可以满足实际需要，ts中的接口类似java，同时还增加了零活的接口类型（属性，函数，可索引和类）

 

★ typescript中定义方法

//ts中定义方法
 function add ():void{
    console.log('add方法')
 }
 add()

★ typescript中方法传参

 //ts中方法传参
 function add (num: number):void{
    console.log('add方法')
 }
 add(12)
 // add('12')  //报错，参数类型为number

 //*** 指定的某一个参数进行约束，ts可以对参数对象进行约束

★ typescript对参数对象进行约束

// ts 对对象参数约束
function add (model: {name: string}):void{
    console.log(model.name)
 }
 let model = {
    name: '张三',
    age: 18
 }
 add(model)    //这种可以携带多余的参数
 add({ name: '李四'})  //这种只能传约束的参数

 

interface关键字实现接口

★★★ 接口是行为和动作的规范，对批量方法进行约束；

属性类接口：

// typescript对批量参数进行约束
interface fullName {
    firstName: string;
    secondName: string
}

function Person(name: fullName){
        //必须传入 firstName  secondName
    console.log(name.firstName+'--'+name.secondName)
}

// 1、只要包含接口的参数
var obj ={
    age: 20,
    firstName: '欧阳',
    secondName: '娜娜'
}

Person(obj);

// 2、严格按照接口约束，不能有其他参数
Person({
    firstName: '欧阳',
    secondName: '娜娜'
})

★ 接口可选属性  在参数后面加 ? 为可传可不传参数

★ 接口中  参数顺序没有具体要求

//*** ts实现 ajax接口

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

function ajax(config: Config){
    var xhr:any;
    if(window.XMLHttpRequest){
        xhr = new window.XMLHttpRequest();
    } else if(window.ActiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open(config.type, config.url, true);

    xhr.send(config.data)

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200 ){
            console.log(xhr.response)
        }
    }
}

ajax({
    type: 'GET',
    url: 'api/getUserInfo',
    data: { account: 'admin', password: '123456'},
    dataType: 'json'
})

 

---

函数类型接口：

★对方法传入的参数以及返回值进行约束，批量约束

// 对方法传入的参数  以及返回值进行约束
interface encrypt{
    (key: string, age: number): string
}

//escape()和unescape()编码&解码
var esc:encrypt = function(key:string, age:number):string{
    let params = key + age
    return escape( params );
}
console.log(esc('张三', 18))
console.log(unescape(esc('张三', 18))) // 解码)


//引入base64.js   base64加密 
var base:encrypt = function(key:string, age:number):string{
    let params = key + age
    return Base64.encode(params); 
}
console.log(esc('小舞', 16))
console.log(Base64.decode(base('小舞', 16)))


//引入md5.js  md5加密  此加密是不可逆的
var md5:encrypt = function(key:string, age: number): string{
    let params = key + age
    return md5(params)
}
console.log(md5("泰隆", 8))

 

---

可索引接口：

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

//*** ts定义数组的方式
// var arr:number[] = [1,12];
// var arr1:Array<string> = ['123', '12']

// 对数组的约束
interface ArrInfo{
    // 定义一个索引为number 值为string的数组接口
    [index:number]:string 
}

var arr:ArrInfo = ['zhang','wang']
console.log(arr)


// 对对象的约束
interface Model{
    // 定义一个索引为number 值为string的对象接口
    [index:string]:string 
}

// var m:Model = ['12','wang']   //报错
var m:Model = { name:'唐三', age:'18' }
console.log(m)

 

---

类类型接口：

★ 对类的约束 和 抽象类类似

★  类实现接口用implements关键字

//*** 类类型接口  implements关键字来实现父接口
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 d= new Dog('小豆豆');
d.eat();

class Cat implements Animal{
    name: string;                // 属性
    constructor(name: string){   // 构造函数  接收实例化的参数
        this.name = name;
    }
    eat(food: string){
        console.log(this.name + food)
    }
}

var c= new Cat('大黄');
c.eat('土豆片');

 

---

 

接口的扩展：

接口可以继承接口

// Animal 接口
interface Animal{
    eat(): void;
}

// Person 接口 继承 Animal 接口
interface Person extends Animal{
    work(): void;
}

//  实现Person接口
class Man implements Person{
    public name: string;
    constructor(name:string){
        this.name = name
    }

    eat(){
        console.log(this.name + '大米饭')
    }

    work(params: string='写代码'){
        console.log(this.name + params)
    }
}

var m = new Man('小岳岳');
m.eat();
m.work();

interface Animal{
    eat(): void;
}

interface Person extends Animal{
    work(): void;
}

class Program{
    public name:string;
    constructor(name:string){
        this.name = name
    }
    coding(code: string='经常写bug'){
        console.log(this.name + code)
    }
}

// 继承 Program类 并实现 Person 接口
class Girl extends Program implements Person{
    constructor(name:string){
        super(name)
    }

    eat(){
        console.log(this.name + '爱吃蔬菜')
    }

    work(params: string='喜欢逛街'){
        console.log(this.name + params)
    }
}

var g = new Girl("阳阳");
g.eat();
g.work();
g.coding();

以上大家多实践一下，基础知识一定要记牢，后续使用少走弯路！

---