TypeScript躬行记(2)——接口
在传统的面向对象语言中,接口(Interface)好比协议,它会列出一系列的规则(即对行为进行抽象),再由类来实现这些规则。而TypeScript中的接口更加灵活,除了包含常规的作用之外,它还能扩展其它的类、为对象的类型命名以及约束值的结构等,大大消除了许多潜在的错误。
一、属性
TypeScript中的接口可通过声明属性和其类型来限制对象的结构。例如定义一个名为Person的接口,包含一个字符串类型的name属性和一个数字类型的age属性,如下所示。
interface Person {
name: string;
age: number;
}
当声明一个Person类型的对象时,必须将两个属性都定义,并且类型也要与接口中的一致,如下所示。
let worker: Person = {
name: "strick",
age:
};
一旦在worker对象中少定义某个接口中的属性或多一个在接口中未声明的属性,那么就会在编译阶段报错。注意,TypeScript的类型检查器不会比对属性在接口和对象中的定义顺序,只要名称和类型匹配,就能编译通过。
1)可选属性
TypeScript允许接口中的属性定义为可选的,只要在属性名后跟问号(?),就能变为可选属性,如下所示。
interface Person {
school?: string;
}
可选属性既能预定义可能需要的属性,也能在捕获没有的属性时给出带有启发作用的错误提示,例如在创建worker对象时,定义一个schools属性(如下所示),在编译时就会报"'schools' does not exist in type 'Person'. Did you mean to write 'school'?"的错误。
let worker: Person = {
schools: "university"
};
由此可知,在对象中定义一个未在接口中声明的属性仍然是不允许的。
2)只读属性
如果要让对象的某个属性只能在创建时被赋值,那么可以将readonly关键字作用于相应的接口属性,使其变为只读的,如下所示。
interface Person {
readonly gender: string;
}
由于gender是一个只读属性,因此不能在对象初始化后对其进行修改,如下所示。
let worker: Person = { //正确
gender: "男"
};
worker.gender = "女"; //错误
3)任意属性
当接口需要包含任意属性时,可以通过索引的方式实现,如下所示,用方括号将索引名和索引类型包裹起来。
interface Person {
[prop: string]: string;
}
在使用Person类型时,可以传任意多个字符串类型的属性,如下所示。
let worker: Person = {
name: "strick",
gender: "男"
};
注意,一旦声明了任意属性之后,那么必选属性和可选属性都得是其类型的子类型。在下面的示例中,由于可选的age属性的类型是number,不是string的子类型,因此在编译时会报错。
interface Person {
name: string; //正确
age?: number; //错误
[prop: string]: string;
}
TypeScript除了支持字符串类型的索引之外,还支持数字类型的索引,如下所示。
interface Person {
[prop: number]: number;
}
有一点需要注意,当在接口中同时定义字符串和数字两种类型的索引时,后者对应的值类型得是前者的子类型。因为这个原因,导致下面的代码无法在编译时通过。
interface Person {
[prop: string]: string;
[prop: number]: number; //错误
}
TypeScript之所以如此限制,是因为JavaScript会将数字自动转换成字符串后再去索引对象,例如用10和“10”两个值去索引,得到的结果是一样的,所以两种索引对应的值类型要保持一致。
二、继承
1)类继承接口
与C#、Java等面向对象语言一样,TypeScript中的类也能继承接口,并且接口中的成员会让类强制实现。有了接口之后,它的任何更改都有可能导致编译错误,从而就能保证相关代码的同步。下面通过一个示例来演示类继承接口,首先创建一个名为Person的接口,包含name属性和getName()方法,如下所示。
interface Person {
name: string;
getName(): string;
}
然后再创建一个名为Member的类,通过implements关键字继承Person接口,如下所示。在编译时,一旦发现类中缺少接口的属性或方法,就会马上报错。
class Member implements Person {
name: string = "strick";
getName() {
return this.name;
}
}
类能继承多个接口,只要在类中实现它的成员,就能编译成功,如下所示,Member类继承了Person和Profile两个接口,限于篇幅原因,在其内部省略了name和getName()两个成员的实现。
interface Profile {
school: string;
}
class Member implements Person, Profile {
school: string = "university";
}
注意,类不能实现接口中的所有成员,例如在接口中定义一个构造器,再用一个类通过构造函数来实现这个接口,此时编译将会失败,代码如下所示。
interface Person {
new (name: string);
}
class Member implements Person {
constructor(name: string) { }
}
类包含静态和实例两部分,由于编译器只会对接口的实例部分进行类型检查,而constructor()函数属于类的静态部分,因此会被忽略,从而导致无法在类中找到匹配的成员来实现接口。
如果要实现接口中的构造器,那么有两种方式可供选择。第一种是参数回调,如下代码所示,Member类不再直接继承Person接口,而是作为参数传递给createPerson()函数,并且其第一个参数被声明为Person类型。
class Member {
constructor(name: string) { }
}
function createPerson(ctor: Person, name: string) {
return new ctor(name);
}
createPerson(Member, "strick");
第二种是类表达式,如下代码所示,将Man变量声明为Person类型,并把Member类赋给它。
let Man: Person = class Member {
constructor(name: string) { }
}
2)接口继承接口
接口之间也可相互继承,这样既能更细粒度的分割接口,也能最大化的重用代码。与类不同的是,只需将其它的接口成员复制过来,而不必实现它们。在下面的示例中,Square接口通过extends关键字继承了Shape接口。
interface Shape {
background: string;
}
interface Square extends Shape {
width: number;
}
一个接口还可以继承多个其它接口,创建出一个合成接口,如下所示,extends后面跟了Shape和Border两个接口。
interface Border {
color: string;
}
interface Ellipse extends Shape, Border {
angle: string;
}
3)接口继承类
当接口继承一个类时,它会继承类的所有成员(包括私有和受保护的成员),但不会去实现它们。以下面的TextBox接口为例,它继承了Control类。
class Control {
private width: number;
protected height: number;
}
interface TextBox extends Control {
type: string;
}
class Tel implements TextBox {
type: string = "tel";
}
上例中的Tel类直接继承了TextBox接口,虽然实现了接口中的type属性,但仍然会报“Type 'Tel' is missing the following properties from type 'TextBox': width, height”的错误。因为Button接口继承的width和height两个属性也需要实现。为了避免出现这些错误,可以通过Control的子类来实现TextBox接口,如下所示。
class Password extends Control implements TextBox {
type: string = "password";
}
TypeScript躬行记(2)——接口的更多相关文章
- TypeScript躬行记(3)——类
类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例.ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添 ...
- TypeScript躬行记(5)——类型兼容性
TypeScript是一种基于结构类型的语言,可根据其成员来描述类型.以结构相同的Person接口和Programmer类为例,如下所示. interface Person { name: strin ...
- TypeScript躬行记(7)——命名空间
TypeScript中的命名空间可将那些具有内在联系的接口.类或对象等代码组织在一起,既能隔离作用域,也能避免命名冲突,并且使得代码结构清晰,更易追踪.在命名空间内部,所有实体部分默认都是私有的,需要 ...
- TypeScript躬行记(8)——装饰器
装饰器(Decorator)可声明在类及其成员(例如属性.方法等)之上,为它们提供一种标注,用于分离复杂逻辑或附加额外逻辑,其语法形式为@expression.expression是一个会在运行时被调 ...
- TypeScript躬行记(6)——高级类型
本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...
- TypeScript躬行记(4)——泛型
泛型是程序设计语言中的一种风格或范式,相当于类型模板,允许在声明类.接口或函数等成员时忽略类型,而在未来使用时再指定类型,其主要目的是为它们提供有意义的约束,提升代码的可重用性. 一.泛型参数 当一个 ...
- TypeScript躬行记(1)——数据类型
TypeScript不仅支持JavaScript所包含的数据类型,还额外扩展了许多实用的数据类型,例如枚举.空值.任意值等. 一.JavaScript的数据类型 JavaScript的数据类型包括6种 ...
- ES6躬行记 笔记
ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向
- ES6躬行记(1)——let和const
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...
随机推荐
- Jsp自学2
Jsp简单来说就是java代码与Html代码的组合,类,方法,属性跟网页展示夹杂在一起.Jsp就是Servlet,但比Servle简单,不需要配置web.xml(当然也可以配置).Jsp由模板数据与元 ...
- [TCP] TCP协议族的学习 and TCP协议
1.TCP协议族这个大家庭,每个协议在OSI5层模型中所处的位子 其中,网络层里的 ICMP = Internet Control Message Protocol,即因特网控制报文协议, IGMP ...
- Redis 工具 redis-port 使用
redis-port 是一个 Redis 工具,通过解析 rdb 文件,实现 Redis 主节点和从节点的数据同步. 摘要: 一个可以将redis主从集群,cluster上的数据实时迁移到 cod ...
- nyoj 52-无聊的小明 (模拟, SET)
52-无聊的小明 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:1 submit:3 题目描述: 这天小明十分无聊,没有事做,但不甘于无 ...
- SpringBoot学习(二)—— springboot快速整合spring security组件
Spring Security 简介 spring security的核心功能为认证(Authentication),授权(Authorization),即认证用户是否能访问该系统,和授权用户可以在系 ...
- PHP中16个高危函数
php中内置了许许多多的函数,在它们的帮助下可以使我们更加快速的进行开发和维护,但是这个函数中依然有许多的函数伴有高风险的,比如说一下的16个函数不到万不得已不尽量不要使用,因为许多“高手”可以通过这 ...
- Ubuntu--pip3 -V 问题
问题原因:可能是因为重新下载或更新python版本的时候,将系统的‘软连接’破坏掉了 解决办法: 1.重新创建--软连接: 进入bin目录:cd /usr/bin 删除pip3连接:rm pip3 重 ...
- 基于loghub的消息消费延迟监控
我们可以把loghub当作一个消息中间件来使用.如果能知道当前的消费进度,自然好了,否则消费情况一无所知,总是有点慌! loghub消费分两种情况,一是普通消费,二是消费组消费: 消费组消费,logh ...
- Base系列编码浅析【base16 base32 base64 base85 base36 base 58 base91 base 92 base62】
Base系列编码浅析 [base16 base32 base64 base85 base36 base 58 base91 base 92 base62] base编码 ...
- 使用 buildx 构建多平台 Docker 镜像
原文链接:使用 buildx 构建多平台 Docker 镜像 在工作和生活中,我们可能经常需要将某个程序跑在不同的 CPU 架构上,比如让某些不可描述的软件运行在树莓派或嵌入式路由器设备上.特别是 D ...