TypeScript学习第六篇－接口的定义

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到了一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供方法的这些类就可以满足实际需要。

TypeScript中的接口类似于Java，同时还增加了更加灵活的接口类型，包括属性、函数、可索引和类等。

1. TypeScript中定义属性接口

代码语言：javascript复制

// 约束传入的对象
interface FullName{
    firstName:string;
    secondName:string;
}

// 传参的类型为约束好的接口对象
function printName (name:FullName){
    console.log(name.firstName '--' name.secondName);
}

// 如果直接将参数传入，就只能传入约束过的字段值(firstName,secondName);
printName({
    firstName:'李',
    secondName:'四'
});

// 如果需要添加一些参数，需要将所有参数封装成一个对象传入。
var obj = {
    age:20,
    firstName:'张',
    secondName:'三'
}
printName(obj);

也可以对接口中的属性定义是否可选。

代码语言：javascript复制

// 约束传入的对象
interface FullName{
    firstName:string;
    // 如果添加了问号，表示参数可传可不传
    secondName?:string;
}

// 传参的类型为约束好的接口对象
function printName (name:FullName){
    console.log(name);
}

// 由于secondName为可传可不传，所以只需要传入一个参数即可。
printName({
    firstName:'李四'
});

利用属性接口约束实现Ajax请求

代码语言：javascript复制

// 定义Ajax请求必须要传的参数
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

// 定义Ajax请求方法
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){
            if(config.dataType == 'json'){
               JSON.parse(xhr.responseText); 
            }else{
                console.log(xhr.responseText);
            }
        }
    }
};
// 调用封装方法
Ajax({
    type:'get',
    url:'http://www.baidu.com',
    dataType:'json'
})

2. TypeScript中定义函数类型接口。对方法传入的参数，以及返回值进行约束。

代码语言：javascript复制

// 定义一个加密的函数类型接口
interface encrypt{
    // 定义参数类型与返回类型
    (key:string,value:string):string
}
// 参数类型与返回类型必须符合接口规范
var MD5:encrypt = function(key:string,value:string):string{
    // 模拟操作
    return key   value;
}
console.log(MD5('username','password'));

3. TypeScript中定义可索引类型接口。实现对数组和对象的约束。

代码语言：javascript复制

// 对数组的约束
interface UserArr{
    // 约束索引为数字类型，数组中的元素为字符类型
    [index:number]:string
}

// var arr:UserArr = [123,456];
// 报错

var arr:UserArr=['Lucy','Augus'];
// OK

也可以实现对对象进行约束，用的比较少。

代码语言：javascript复制

// 对象的约束
interface UserObj{
    [index:string]:string
}

// var arr:UserObj={age:20};
// 报错

var arr:UserObj={age:'20'};
// OK

4. TypeScript中定义类类型的接口。实现对类的约束。

代码语言：javascript复制

// 定义类的属性与方法 
interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    // 可以不传参数，但是必须要定义方法
    eat(food:string){
        console.log(this.name  '吃' food);
    }
}
var dog = new Dog('小黑');
dog.eat('肉');

5. TypeScript中接口的扩展。实现接口的继承。

代码语言：javascript复制

// 定义父类接口
interface Animal{
    eat():void;
}

// 定义子类接口
interface Person extends Animal{
    work():void;
}

class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    // 必须实现父类接口Animal定义的方法
    eat(){
        console.log(this.name '吃肉');
    }
    // 必须实现子类接口Person定义的方法
    work(){
        console.log(this.name  '写代码')
    }
}

var boy = new Web('小李');
boy.eat();
// 小李吃肉

接口在实现接口约束的同时还可以实现类的继承。

代码语言：javascript复制

// 定义父类接口
interface Animal{
    eat():void;
}
// 定义子类接口
interface Person extends Animal{
    work():void;
}
// 定义一个类
class Programmer{
    public 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)
    }
    // 实现基类Animal定义的方法
    eat(){
        console.log(this.name '吃肉');
    }
    // 实现Person类定义的方法
    work(){
        console.log(this.name  '工作');
    }
}

var boy = new Web('小李');

boy.eat();
// 小李吃肉

boy.coding('写前端代码');
// 小李写前端代码

typescript 面向对象编程

0 人点赞

TypeScript学习第六篇 － 接口的定义

TypeScript学习第六篇－接口的定义