Typescript的接口

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

属性类接口

// 对方法传入的参数进行约束
// 传入的参数只能为字符串
function printLabel(label:string):void {
    console.log(label);  
}
// 传入的参数只能为规定格式的json串对象
function printLabel(label:{label:string}):void {
    console.log('aaaa');
}
printLabel({label:'张三'});
// 传入对象的约束
// 定义接口
interface FullName {
    firstName:string;
    secondName:string;
}
// 函数必须传入对象
function printName(name:FullName) {
    console.log(name.firstName + "--" + name.secondName);
}
// 对象必须包含firstName和secondName
var obj={
    age:20,  // 此处多一个age也不影响,最后age不会被传进printName函数
    firstName:'张',
    secondName:'三'
}
printName(obj);
// 直接写到函数参数中时，要求对象只能有firstName和secondName
printName({
    firstName : '张',
    secondName : '三'  // 如果再加上age属性就会报错
})

可选属性：

interface FullName {
    firstName?:string;  // 属性名称后加问号.表示该属性为可选属性,可传也可不传
    secondName:string;
}
function getName(name:FullName):void {
    console.log(name);
}
// 可以不录入firstName
getName({
   secondName:'secondName' ;
});

示例程序1:使用Interface封装ajax

// 定义ajax要传入的内容对象
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}
// 定义ajax方法
function ajax(config:Config):void{
    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('成功');
            if(config.dataType == 'json') {
                console.log(JSON.parse(xhr.responseText));
            } else {
                console.log(xhr.responseText);
            }
        }
    }
}
// 调用
ajax({
    type:'get',
    url:'http://www.baidu.com',
    dataType:'json'
})

示例程序2：封装加密算法

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

只读属性：

interface Point {
    // 作为变量用时使用const，作为属性用时使用readonly
    readonly x: number;  // 只能在对象刚创建时修改其值
    readonly y: number;
}
// 使用ReadonlyArray<T>确保数组创建后不能被修改
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a; 
// ro[0] = 1;会报错
// 就算将整个ReadonlyArray赋值给一个普通数组也不可以，比如 a = ro;此时也会报错
// 如果需要将ReadonlyArray赋值给一个普通数组，可以使用类型断言重写
a = ro as number[];

可索引接口

对数组、json对象的约束

// 对数组的约束
// 约束对象的下标为数字,值为字符串,即数组对象
interface UserArr{
    [index:number]:string
}
var arr:UserArr=['aaa', 'bbb'];
console.log(arr[0]);
// 对对象的约束
// 约束对象的下标的字符串,即json对象
interface UserObj {
    [index:string]:string
}
var obj:UserObj = {'name' : 'zhangsan', sex : '男'};

类类型接口

对类的约束

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal {
    name:string;
    constructor(name:string) {
        this.name = name;
    }
    // 接口中eat虽然有参数,但是实现类中的eat可以不传参数,最后调用时则也不能传参数
    // 但是如果接口eat无参数,则实现类中的eat也必须无参数
    eat():void{
        console.log(`${this.name}吃狗粮`);
    }
}
class Cat implements Animal {
    name:string;
    constructor(name:string) {
        this.name = name;
    }
    // 接口中eat虽然有参数,但是实现类中的eat可以不传参数,最后调用时则也不能传参数
    // 但是如果接口eat无参数,则实现类中的eat也必须无参数
    eat(food:string):void{
        console.log(`${this.name}吃${food}`);
    }
}
class Cat implements Animal {
    name:string;
    constructor(name:string) {
        this.name = name;
    }
    // 接口中eat虽然有参数,但是实现类中的eat可以不传参数,最后调用时则也不能传参数
    // 但是如果接口eat无参数,则实现类中的eat也必须无参数
    eat(food:string):void{
        console.log(`${this.name}吃${food}`);
    }
}
// Dog的eat方法没有加参数,则调用时候也不能带有参数
var d = new Dog('小黑');
d.eat();
var c = new Cat('小花');
c.eat('猫粮');

接口扩展

接口继承接口

interface Animal {
    eat():void;
}
interface Person extends Animal {
    work():void;
}
class Programmer {
    name:string;
    constructor(name:string){
        this.name = name;
    }
    coding(code:string):void{
        console.log(`${this.name} write ${code}`);
    }
}
class Web extends Programmer implements Person {
    constructor(name:string) {
        super(name);
    }
    eat():void{
        console.log(`${this.name}喜欢吃馒头`);
    }
    work():void{
        console.log(`${this.name}在写代码`);
    }
}
var x = new Web('小李');
x.work();
x.coding('console.log');