typescript 接口学习

文章转载自：https://blog.csdn.net/shi_weihappy/article/details/49506717
接口是TypeScript中非常实用的东西，这里我们看一下如何使用接口（Interface），主要的内容为：

认识接口
可选参数
函数类型
数组类型
类类型
接口继承和混合类型
1、认识接口
我们看一个例子：

function printlabel(labelObj:{label:string}) {
    console.log(labelObj.label);
}

var myObj = {label:"Hello lsw"};
printlabel(myObj);

在这里例子中，我们调用可以输出 Hello lsw。但是，如果我们参数修改为 {label: 100}，那么编译就会失败，因为在输入参数中我们定义了参数label的类型是string类型。如果这样解释不是很明白的话，那我们看另外的写法，使用interface：

interface labelValue {
    label:string
}
function printlabel(labelObj:labelValue) {
    console.log(labelObj.label);
}
var myObj = {label:"Hello lsw"};
printlabel(myObj);

这里我们定义了一个接口labelValue，参数只有一个label:string。

2、可选属性
接口中的属性并不是都需要显示的，在有些情况下，我们只需要传入部分参数。使用的方式是 (age?:number)这里给出一个例子：

interface USB {
    name:string;
    age?:number;
}

function printUSB(usb:USB) {
    console.log(usb.name);
    if (usb.age) {
        console.log(usb.age);
    }
}

printUSB({name:"lsw"});

这个例子中的age就是可选参数，所以通过 ? 这个声明可以将参数声明为一个可选的参数，在输入的时候我们就可以省略这个参数的输入。

3、函数类型的接口
直接上例子

interface searchFunc {
    (source:string, subString:string):boolean;
}

var mySearch: searchFunc;

mySearch = function(src:string, sub:string) : boolean {
    var flag = src.search(sub);
    return (flag != -1);
};

在这里我们定义了匿名函数mySearch，它的类型就是接口函数类型searchFunc。

4、数组类型

interface StringList {
    [index:number]: string;
}

var myList:StringList = ["lsw", "lm"];
console.log(myList[0]);

这里我们定义了一个字符串数组接口类型

5、类类型

interface ClockInterface {
    currentTime:Date;
    setTime(d:Date);
}

class Clock implements ClockInterface {
    currentTime:Date;
    h:number;
    s:number;
    setTime(d:Date) {
        this.currentTime = d;
    }
    constructor(h:number, s:number) {
        this.h = h;
        this.s = s;
    }
    print() {
        console.log("hello lsw");
    }
}

var c:Clock = new Clock(10, 100);
c.setTime(new Date());
c.print();

这里我们定义了一个类的接口ClockInterface，它有一个参数和一个方法，实现类接口的关键字是 implements，在实现类中我们重写参数和方法就可以实现这个接口。这种实现方式和其他的语言没有什么区别。

6、接口继承和混合类型
接口可以继承，这里给出一个例子：

interface interfaceA {
    a:number;
}
interface interfaceB {
    b:string;
}
interface interfaceC extends interfaceA,interfaceB {
    c:boolean;
}

var interC:interfaceC = <interfaceC>{};
interC.a = 100;
interC.b = "lsw";
interC.c = true;

这里我们需要注意的是使用了接口继承那么调用的时候不是使用new来初始化接口，而是使用<>。同时接口也可以多继承。

对于混合类型的接口我们直接看官方的一个例子：

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

var c: Counter;
c(10);
c.reset();
c.interval = 5.0;

typescript 接口学习

猜你喜欢