typescript 接口学习

xiaoxiao2021-02-28  33

文章转载自: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;
转载请注明原文地址: https://www.6miu.com/read-2630066.html

最新回复(0)