TypeScript学习笔记(五):接口
2015-10-26 07:28
447 查看
使用接口
在前面的笔记中我们知道可以使用Object Type来指定参数的属性,如下:function printLabel(labelledObj: {label: string}) { console.log(labelledObj.label); } var myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
这种做法也可以通过接口实现:
interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } var myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
这里很有意思的一点是,传递的参数可以不实现该接口,仅仅带有接口的属性即可。
可选属性
TypeScript的接口还支持可选属性,这在之前的参数中已经说过,如下:interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { var newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.collor; // Type-checker can catch the mistyped name here } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } var mySquare = createSquare({color: "black"});
我们传递的类型可带有也可不带有可选的属性。
函数类型
这里在之前其实已经说到了,如果你对C#比较熟悉的话,可以将函数类型看做C#中的委托,如下:interface SearchFunc { (source: string, subString: string): boolean; } var mySearch: SearchFunc; mySearch = function(source: string, subString: string) { var result = source.search(subString); if (result == -1) { return false; } else { return true; } }
即定义为SerrchFunc类型的函数只能被赋值为在接口中定义好的参数和返回值一致的函数。
数组类型
我们可以通过接口来指定一个存放指定类型的数组:interface StringArray { [index: number]: string; } var myArray: StringArray; myArray = ["Bob", "Fred"];
数组类型的写法是固定的,前面表示索引,返回值表示数组中可以存放的类型,当然其实TypeScript的数组是支持泛型的,所以使用泛型会更加方便一点。
Class类型
终于说到接口最核心的使用方法了,即通过接口来规范类的类型:interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
实现接口使用implements关键字,同时一个类可以实现多个接口,实现了同一接口的类都可以赋值给该接口类型的变量,这里和Java、C#等语言用法一致。
规范构造函数
这也是TypeScript中比较独特的地方了,可以通过接口来指定构造函数的参数,我们先看下面的写法:interface ClockInterface { new (hour: number, minute: number); } class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { } }
这个写法会报错,这在TypeScript中是不允许的写法。
规范构造函数的接口不能使用implemnets实现,而是作为类型存在,如下:
interface ClockStatic { new (hour: number, minute: number); } class Clock { currentTime: Date; constructor(h: number, m: number) { } } var cs: ClockStatic = Clock; var newClock = new cs(7, 30);
这样的写法就能达到我们想要的效果了。
接口继承
接口之间可以继承,同时支持多重继承,如下:interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } var square = <Square>{}; square.color = "blue"; square.sideLength = 10; square.penWidth = 5.0;
这里要注意一下,square并不是实现了该接口的类,所以不能使用new来实现,而是使用<Square>{}的写法来创建,这里要注意一下。
混合类型
我们可以指定一个对象的类型,如下:interface Counter { (start: number): string; interval: number; reset(): void; } var c: Counter; c(10); c.reset(); c.interval = 5.0;
相关文章推荐
- 模拟赛记录(1):10.24 T3 有趣的有趣的家庭菜园 (线段树优化DP)
- 如何快速定位自己热爱的工作
- control + D 退出linux 当前命令(行)
- OSChina 周一乱弹 —— 六天颓废一天看剧
- 网页 基础
- 前端优化带来的思考,浅谈前端工程化
- 拇指接龙游戏升级记录01(CocoStudio 1.4.0.1+Cocos2d-x 2.2.3=>Cocos Studio 2.3.2+Cocos2d-x 3.8.1)
- 快讯:农作物精准育种技术的重大进展
- Leetcode: Two Sum
- 关于字符串(2)
- C#编程 MWArray 报错 原因以及解决办法
- DevExpress学习1
- uva 10047 The Monocycle BFS
- 回归分析
- 浅谈程序员创业(要有一个自己的网站,最好的方式还是自己定位一个产品,用心把这个产品做好)
- 拉格朗日对偶简介
- hdu 1025 Constructing Roads In JGShining's Kingdom 最长上升子序列
- PPT 学习资源
- Android Api Demos登顶之路(110)View-->Lists-->Transcript
- [转载]LaTeX中\ref{}引用标号不正确的问题