前言

今天继续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)——接口的更多相关文章

  1. TypeScript基础学习

    什么是TypeScript? TypeScript是一种由微软开发的自由的和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法. TypeScript支持任意浏览器, ...

  2. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  3. TypeScript基础以及在Vue中的应用

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...

  4. 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait

    [源码下载] 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait 作者:webabcd 介绍速战速决 之 PHP 类基础 抽象类 接口 trait 示例1.类的相关知识点 1(基础 ...

  5. [.net 面向对象编程基础] (16) 接口

    [.net 面向对象编程基础] (16) 接口 关于“接口”一词,跟我们平常看到的电脑的硬件“接口”意义上是差不多的.拿一台电脑来说,我们从外面,可以看到他的USB接口,COM接口等,那么这些接口的目 ...

  6. spring中基础核心接口总结

    spring中基础核心接口总结理解这几个接口,及其实现类就可以快速了解spring,具体的用法参考其他spring资料 1.BeanFactory最基础最核心的接口重要的实现类有:XmlBeanFac ...

  7. typescript中的接口

    说到接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心 ...

  8. Go语言基础之接口

    Go语言基础之接口 接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现规范的细节. 接口 接口介绍 在Go语言中接口(interface)是一种类型,一种抽象的类 ...

  9. C#基础--类/接口/成员修饰符,多态、重载、重写,静态和非静态

    C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...

随机推荐

  1. python自带编译器在写入文件时闪退,或者一步步执行到写入时提示8170。解决办法:

    用python黑框运行程序写入文件时闪退,或一行行运行到写入时提示8170数字. 经试验,为文件路径错误导致. with open("1.doc", "wb") ...

  2. VMware虚拟机安装centos7

    镜像下载地址:http://www.linuxdown.net/ 在vmware上开始安装CentOS系统,点击菜单新建虚拟机,进入如下图步骤进行操作.   接着进行自定义硬盘操作   最后虚拟机就创 ...

  3. arcgis api 4.x for js 基础工具篇之测距测面

    前言 在搭建好WebGIS应用框架的时候,相信大家首先开发的都会是基础功能,此篇文章我们主要讲述的是“测距”."测面"功能. 注* 在测量单位中常规都是基于"平面坐标系& ...

  4. Oracle 11gR2 RAC网络配置,更改public ip、vip和scanip

    Oracle 11gR2 RAC网络配置,更改public ip.vip和scanip 转载黑裤子 发布于2018-10-30 01:08:02 阅读数 2898  收藏 展开 转载. https:/ ...

  5. 【Https异常】This request has been blocked; the content must be served over HTTPS

    一.问题出现场景 项目从http升级到https后,jsp页面存在发送http请求的情况下就会出现该异常.因为HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 ...

  6. [日常] ubuntu下安装php pdo扩展和导入数据库

    默认安装的php不存在pdo扩展,因此在使用到的时候会报错,直接使用这个命令 apt-get install php-mysql 就可以成功安装pdo扩展 安装完数据库后需要导入sql语句,先进入数据 ...

  7. June 03rd, 2019. Week 23rd, Monday

    There is no shame in hard work. 努力从来不丢人. Stop complaining about the current work arrangements, just ...

  8. WPF 精修篇 page

    原文:WPF 精修篇 page 前言 前段时间看UML 大象 这本书 虽然马上看到了精华片 最后还是暂时暂停 因为这本书 很好 但是暂时对现在的我来说 有点超前 很多东西理解起来还是很难 但是 这本书 ...

  9. Paper | Residual Attention Network for Image Classification

    目录 1. 相关工作 2. Residual Attention Network 2.1 Attention残差学习 2.2 自上而下和自下而上 2.3 正则化Attention 最近看了些关于att ...

  10. promise 极简版封装

    Promise 优点: 解决回调地狱, 对异步任务写法更标准化与简洁化 缺点: 首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消; 其次,如果不设置回调函数,Promise内部抛出的 ...