Typescript基础(4)——接口
前言
今天继续typescript的学习,开始ts接口部分的学习。
接口
接口的理解
首先,我们谈论一下现实生活中的接口。比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的。插座接口规定了插头的数目,那么我们的电器使用时就只能是这些数目的插头,要么是两孔,要么是三孔。很少见到有电器设备使用五孔、十孔的。因为你不符合规范,没地方使用。
同理,在编程中接口也是用来定义规范的。我们之前介绍的抽象类,也是一种规范,只不过它是对类的一种规范,它要求所有的子类都必须实现抽象类中的抽象方法。而接口不仅仅是类的规范,它是属性、类、方法等的规范。
属性类型接口
属性类型接口主要是针对对象进行约束。
在没有使用接口之前,我们定义函数时,或者使用变量时都会对类型进行校验。
function getInfo(person:{name:string,age:number}):void{
console.log(`姓名:${person.name},年龄是${person.age}`)
}
getInfo({name:'hello',age:24}) // 需要传入一个对象,对象中包含有string类型的name和number类型的age
getInfo({name:'hello'}) // 报错 缺少age属性
getInfo({name:'hello',age:'24'}) // 报错age属性为number
上面我们定义了getInfo函数。它要求传入一个对象,对象中对象中包含有string类型的name属性和number类型的age属性。其实这就是一种规范,这里规范了传入参数的类型。
我们通过接口来实现这个规范:
interface PersonInterface{
name:string; // 这里是分号;
age:number
}
// 这里的传给person的是一个对象
function getInfo(person:personInterface):void{
console.log(`姓名:${person.name},年龄是${person.age}`)
}
getInfo({name:'刘亦菲',age:30})
接口的可选属性
接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。 可选属性通常应用于函数的可选参数。
interface PersonInterface{
name:string; // 这里是分号;
age:number;
salary?:number;
}
接口的只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:
interface Point{
readonly x:number;
readonly y:number;
}
function getPoint(point:Point):void{
console.log(`坐标x:${point.x},坐标y:${point.y}`)
}
let point1:Point = {
x:13,
y:14
}
getPoint(point1)
point1.x = 100; // 报错。readonly的接口在第一次赋值后就无法进行修改了
getPoint(point)
上面定义的Point接口属性都是只读的。我们定义了point1实现了Point接口。可以正常进行调用。但是当我们打算修改point1
的值得时候。就会出现报错。因为readonly的接口在第一次赋值后就无法进行修改了。
函数类型接口
函数类型接口是对方法传入的参数以及返回值进行约束。
为了使用接口表示函数类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义,不需要function关键字,也不需要函数体。参数列表里的每个参数都需要名字和类型。
interface BarFunc{
(name:string,age:number):string;
}
定义使用函数接口的函数.其实之前的类型校验就是一种规范。通过在变量后面使用:类型进行校验。接口也是规范。
因此通过:接口就相当于对接口进行校验。
interface BarFunc{
(name:string,age:number):string;
}
// 使用函数类型的接口
let bar:BarFunc = function(name:string,age:number):string{
return `姓名:${name},年龄:${age}`
}
bar('张三',24)
可索引类型接口
可索引类型接口是对数组的约束。对数组的约束主要是对数组中元素类型进行约束。在ts中定义数组时,其实我们已经对数组元素类型进行了约束.
定义数组:对类型进行约束
let myArr:string[] = ['hello','world'];
通过接口来实现对数组元素的约束:
interface Arr {
[index:number]:string;
}
let arr:Arr = ['hello','world']
// let arr:Arr = [1,'world']; 报错。元素类型必须是strig
上面Arr接口表示索引必须是number类型。数组中元素必须是string类型。
类类型接口
类类型接口是对类的约束。和抽象类有点相似。抽象类是子类的基类,定义了子类必须实现的抽象方法。但是类接口不是针对子类,而是所有的类。类接口中定义了所有的类必须实现的属性和方法。
interface AnimalClass{
food:string;
ball:string;
eat():void;
play():void;
}
实现接口的类必须有接口中的属性和接口中的方法。
class MyDog implements AnimalClass{
food:string;
ball:string;
constructor(food:string,ball:string){
this.food = food;
this.ball = ball;
}
eat():void{
console.log('狗吃' + this.food)
}
play():void{
console.log('狗玩' + this.ball)
}
}
let myDog = new MyDog('骨头','篮球')
myDog.eat()
myDog.play()
Typescript基础(4)——接口的更多相关文章
- TypeScript基础学习
什么是TypeScript? TypeScript是一种由微软开发的自由的和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法. TypeScript支持任意浏览器, ...
- TypeScript完全解读(26课时)_4.TypeScript完全解读-接口
4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...
- TypeScript基础以及在Vue中的应用
TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...
- 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait
[源码下载] 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait 作者:webabcd 介绍速战速决 之 PHP 类基础 抽象类 接口 trait 示例1.类的相关知识点 1(基础 ...
- [.net 面向对象编程基础] (16) 接口
[.net 面向对象编程基础] (16) 接口 关于“接口”一词,跟我们平常看到的电脑的硬件“接口”意义上是差不多的.拿一台电脑来说,我们从外面,可以看到他的USB接口,COM接口等,那么这些接口的目 ...
- spring中基础核心接口总结
spring中基础核心接口总结理解这几个接口,及其实现类就可以快速了解spring,具体的用法参考其他spring资料 1.BeanFactory最基础最核心的接口重要的实现类有:XmlBeanFac ...
- typescript中的接口
说到接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心 ...
- Go语言基础之接口
Go语言基础之接口 接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现规范的细节. 接口 接口介绍 在Go语言中接口(interface)是一种类型,一种抽象的类 ...
- C#基础--类/接口/成员修饰符,多态、重载、重写,静态和非静态
C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...
随机推荐
- python自带编译器在写入文件时闪退,或者一步步执行到写入时提示8170。解决办法:
用python黑框运行程序写入文件时闪退,或一行行运行到写入时提示8170数字. 经试验,为文件路径错误导致. with open("1.doc", "wb") ...
- VMware虚拟机安装centos7
镜像下载地址:http://www.linuxdown.net/ 在vmware上开始安装CentOS系统,点击菜单新建虚拟机,进入如下图步骤进行操作. 接着进行自定义硬盘操作 最后虚拟机就创 ...
- arcgis api 4.x for js 基础工具篇之测距测面
前言 在搭建好WebGIS应用框架的时候,相信大家首先开发的都会是基础功能,此篇文章我们主要讲述的是“测距”."测面"功能. 注* 在测量单位中常规都是基于"平面坐标系& ...
- Oracle 11gR2 RAC网络配置,更改public ip、vip和scanip
Oracle 11gR2 RAC网络配置,更改public ip.vip和scanip 转载黑裤子 发布于2018-10-30 01:08:02 阅读数 2898 收藏 展开 转载. https:/ ...
- 【Https异常】This request has been blocked; the content must be served over HTTPS
一.问题出现场景 项目从http升级到https后,jsp页面存在发送http请求的情况下就会出现该异常.因为HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 ...
- [日常] ubuntu下安装php pdo扩展和导入数据库
默认安装的php不存在pdo扩展,因此在使用到的时候会报错,直接使用这个命令 apt-get install php-mysql 就可以成功安装pdo扩展 安装完数据库后需要导入sql语句,先进入数据 ...
- June 03rd, 2019. Week 23rd, Monday
There is no shame in hard work. 努力从来不丢人. Stop complaining about the current work arrangements, just ...
- WPF 精修篇 page
原文:WPF 精修篇 page 前言 前段时间看UML 大象 这本书 虽然马上看到了精华片 最后还是暂时暂停 因为这本书 很好 但是暂时对现在的我来说 有点超前 很多东西理解起来还是很难 但是 这本书 ...
- Paper | Residual Attention Network for Image Classification
目录 1. 相关工作 2. Residual Attention Network 2.1 Attention残差学习 2.2 自上而下和自下而上 2.3 正则化Attention 最近看了些关于att ...
- promise 极简版封装
Promise 优点: 解决回调地狱, 对异步任务写法更标准化与简洁化 缺点: 首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消; 其次,如果不设置回调函数,Promise内部抛出的 ...