02.TypeScript 接口
2015-10-01 10:46
302 查看
02.TypeScript 接口
TypeScript核心设计原则之一就是类型检查,而接口实际是为了这种类型检查而产生的,实际他并不会在生成的JavaScript里有半点体现。
一个简单的示例
// 定义IUser接口 interface IUser { name: string; // 姓名:字符串类型 age: number; // 年龄:数值类型 } function getUser(user: IUser) : string { return user.name + ':' + user.age; } var userInfo: string = getUser({ age: 25, name: 'Kase' }); alert(userInfo);
getUser接收的参数是一个
IUser接口,所以在传参时ts会要求里必须要出现 age 和 name。
IUser目的单纯只是为了编写TypeScript时更有效的开发,而且这种接口并不会在生成后的JavaScript有任何体现,我们来看看生成后的JavaScript:
function getUser(user) { return user.name + ':' + user.age; } var userInfo = getUser({ age: 25, name: 'Kase' }); alert(userInfo);
可选参数
如上文的示例,必须是 age 和 name 存在,这样ts才会检查通过。但有时我们又不希望接口所定义的属性都是必须的,我们可以在属性名加上?,来表示一个属性是可选项。
interface IUser { name: string; // 姓名:字符串类型 age: number; // 年龄:数值类型 sex?: boolean // 性别:布尔型,但是可选项 } function getUser(user: IUser) : string { return user.name + ':' + user.age + ':' + (user.sex ? 'm' : 'f'); } var userInfo: string = getUser({ age: 25, name: 'Kase' }); alert(userInfo);
函数类型
有时我们需要明确规定一个函数的参数和返回值时,也可以定义一个接口来实现约定。这种接口对于把某个函数做为一个第三方库被使用时,非常有用,因为他可以明确在IDE中告诉你参数类型。虽然有点遗憾ts在vs下在智能提醒时并不会包括强力的注释。// 健康状态 interface Healthy { (height: number, weight: number): boolean } var myHealthy: Healthy; myHealthy = function (height: number, weight: number) { return true; } console.log(myHealthy(170, 120));
对于调用者而言 myHealthy 必须传递两个数值类型的数据。
Class 类型
1、实现Interface
在TypeScript中也能实现类似C#中interface,用来强制实现类的结构。interface IClock { currentTime: Date; setTime(d: Date); } class Clock implements IClock { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
Clock 是 IClock 的实现类,明确约定必须要实现 currentTime 属性和 setTime 函数。
2、类static和instance区别
当使用类和接口时,类有两种类型:static(静态)部分和instance(实例)部分;由于ts只会对instance部分进行类型检查,而构造函数是属于静态部分,所以当我们使用一个带有构造签名的接口时,就会出错。interface IClock { new (h: number, m: number); } class Clock implements IClock { constructor(h: number, m: number) { } }
当然我们需要明确规定某个类在调用构造函数时参数时,我们可以这样子。。。但我不想说,因为我自己使用下来完全在违背ts的设计原则。在c#的接口中是无法约定接口的构造方法的,所以这种想法就需要提及。
3、interface继承
interface也能被继承,还可以组合继承多个接口。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; console.log(square);
相关文章推荐
- php中preg_match的isU代表什么意思
- 如何保留小数
- hdu 5433 Xiao Ming climbing bfs
- 局域网主机间发包细节
- 堆和栈的区别(转过无数次的文章)
- Android 端滴滴打车接口的开发
- Centos 升级MySQL版本或者Yum安装Mysql5.6
- linux进程管理命令总结
- 一、Android Studio Mac os 环境搭建 以及 名词解释
- uboot相关知识点汇总(持续更新中)
- 解决viewpager中一个fragment嵌套fragment出现重叠现象
- NYOJ 847 S+T
- Android判断当前线程是否是主线程的方法
- 求多边形面积 HDU2036
- 字符串的所有子字符串合集
- javaAPI文档翻译之Java.awt.BorderLayout
- java.io.IOException: Type mismatch in key from map: expected
- 与 Gloria Victis磨练你的技能, 真实中世纪开放世界的MMORPG
- python批量下载兰科植物网站的图片,并重命名文件
- 笔试