TypeScript笔记 6--接口
接口定义
接口和Java语言一样,都是通过关键字interface定义的,如下例子:
interface People {
name: string;
age: number;
hobby?: string; // 可选属性
readonly sex: string; // 只读属性
run: (steps: number) => void; // 箭头函数
play():void; // 普通函数
}
接口使用
function test(people:People) {
// content
people.sex = 'xxx'; // 编译器报错
}
let p = {
age: 1, name: 'z', sex: 'x',
run: (s: number) => {
return 1;
},
play:function() {
},
height:180
}
demo(p);
如上例子,当前对象p
作为参数传入函数test
中时,编译器只会检查那些必需的属性(函数也是一种属性)是否存在,类型是否匹配,如果缺少必要的属性,编译器会报错。至于多出的属性height
,编译器则不会检查,这点我们可以这样理解:对象p
是People
的实现,也就是其子类。height是子类中的属性,这样的话很容易理解。
可选属性
接口里的属性不全都是必需的。属性名后面加上?
表示是一个可选属性。
有些是只在某些条件下存在,或者根本不存在.如上述例子中hobby
属性,我们在构造p对象时就算没有传入hobby属性,编译器不会报错。
只读属性
只读属性用readonly
修饰,一旦该属性赋值后,就不能再修改了,否则编译器报错。
前几章中学习了常量const
,它们没有什么差别,最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。
函数
关于函数的声明有两种,箭头函数和普通方式。在上面的例子中,我们声明了两个函数run
和play
,虽然生命方法不一样,但是使用方法是一样的,只是作用域不一样,究竟有什么不一样,以后再讲。
接口实现和继承
类可以实现接口,接口也可以继承接口并且只能描述公有属性,这些都是和Java是一样的。
class Player implements People {
name: string;
age: number;
readonly sex: string; // 只读属性
constructor() {
}
run= (steps: number) => {
} // 箭头函数
play():number {
return 100;
}
}
interface Player extends People {
item:string;
}
接口继承类,多继承
在Java中接口只能继承接口,而且只能继承一个接口,但是ts中的接口可以继承类,同时支持多继承。接口继承只能继承类中的属性和函数(不继承其实现)。父类中的私有属性和受保护属性也能继承,但是如果这样的继承的话,这个接口类型只能被这个类或其子类所实现。
class Animal {
name: string;
private age: string;
run(): void {
console.log('running...');
}
}
interface Person extends Animal {}
function eat(p: Person) {}
let p = { name: '', age: 'x', sayHello: function () { return '' } };
eat(p); // 编译报错
上述代码会报错,因为age是私有属性,而对象p中age是公有的,这样会产生冲突。所以接口Person必须是Animal的子类所实现。
要想编译不报错,有两种方法:第一是将age属性改为公有,第二种是新增一个类,该类是Animal子类, 如下:
class Animal {
name: string;
private age: string;
run(): void {
console.log('running...');
}
}
interface Person extends Animal {
say(): void;
}
class Child extends Animal {
say(): void {
}
}
function eat(p: Person) { }
let p = new Child();
eat(p);// 这样不会报错
TypeScript笔记 6--接口的更多相关文章
- TypeScript笔记[5]泛型+Dictionary 转
TypeScript笔记[5]泛型 在C++.C#.Java等主流编程语言中,一般对泛型编程提供了支持.合理利用泛型,可以提高开发效率.提升代码质量. 例如在C++编程语言中,常常利用下面的结构表 ...
- typescript中的接口
说到接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心 ...
- 【TypeScript】TypeScript 学习 2——接口
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: func ...
- 笔记-python-redis接口
笔记-python-redis接口 1. python 与redis接口 redis是redis数据库的python接口包,为python提供的redis的调用接口. 注:文档内容主要基于h ...
- TypeScript完全解读(26课时)_4.TypeScript完全解读-接口
4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...
- typescript属性类型接口
/* typeScript中的接口 - 1.属性类接口 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定 ...
- 探索typescript的必经之路-----接口(interface)
TypeScript定义接口 熟悉编程语言的同学都知道,接口(interface)的重要性不言而喻. 很多内容都会运用到接口.typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包 ...
- TypeScript 高级类型 接口(interface)
在代码的实现或者调用上能设定一定的限制和规范,就像契约一样.通常,我们把这种契约称为接口. TypeScript的核心原则之一是对值所具有的结构进行类型检查. 有时称为“鸭式辨型法”或“结构性子类型化 ...
- TypeScript学习笔记之接口类型
TypeScript的接口,个人理解就是一种约束,包括各种类型的契约或者代码定义上的契约.当然,和java中的用法基本一致,接口可以被继承也可以被实现. 定义一个简单的interface interf ...
- TypeScript Handbook 2——接口1(翻译)
接口(Interfaces) One of TypeScript's core principles is that type-checking focuses on the 'shape' that ...
随机推荐
- ElasticSearch 学习记录之如任何设计可扩容的索引结构
扩容设计 扩容的单元 一个分片即一个 Lucene 索引 ,一个 Elasticsearch 索引即一系列分片的集合 一个分片即为 扩容的单元 . 一个最小的索引拥有一个分片. 一个只有一个分片的索引 ...
- date 命令详解
date - print or set the system date and time Display the current time in the given FORMAT, or set th ...
- 第三节 - centos 内核启动、救援模式、 ls 、目录结构
Linux 第三节一.CentOS 启动: 1.内核引导: 1.win/linux 通电,2.BISO自检(CPU,内存,硬盘等 | U盘.光驱.网卡.硬盘启动 通过MBR知道内核内存硬件驱动位置并加 ...
- .net 委托的使用方法以及使用委托的好处
使用方法: //无返回值无参数委托的定义方法 public delegate void NoReturnPara(); 给委托赋值的几种方式 //实例化委托,并传入方法 NoReturbNoPara ...
- JMeter 插件 Json Path 解析HTTP响应JSON数据
一.基本简介 JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为JSON数据格式.JSON 简介,JSON 教程. JSON 已经成为数 ...
- SQL2005 到 SQL2008R2 发布订阅----发布'xxxxx'的初始快照尚不可用。
步骤略! SQL2005 到 SQL2008R2 发布订阅----发布'xxxxx'的初始快照尚不可用. 发布库快照已经创建完成为什么到订阅就快照不可用呢! 订阅通过日志读取代理解析! 查了下代理安全 ...
- vue2 computed set与get函数
大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发. getter:获取值时触发,与setter是没有必然联系的. <templ ...
- Exception: Unexpected End Of File(crontab)
Exception: Unexpected End Of File [solphire@hadoop02 tools]$ crontab -l 1 * * * * source /etc/profil ...
- chrome浏览器解决ajax跨域问题
方法一 1.右键谷歌快捷方式,选择"属性". 2.打开属性窗口,切换到"快捷方式"选项卡. 3.在目标路径的后面添加[ --disable-web-securi ...
- ES6解构之复杂数据
今天在写代码的是否,碰到如下的数据,我要取值 fvkey,fn,url. { , , "fl":Object{...}, , "ip":"106.39 ...