前言

今天继续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. spring的简易实现(一)

    [练习]spring的简易实现(一) 在第一部分我们实现读取xml的配置,然后实例化xml中的bean 首先定义一个xml和相关的class类 <?xml version="1.0&q ...

  2. Docker 系列之 常用镜像

    Ubuntu 实战 操作 # 拉取 18.04 版本的 Ubuntu 镜像 docker pull ubuntu:latest # 以交互方式运行并进入 ubuntu 容器环境 docker run ...

  3. ASP.NET是什么?

    ASP.NET简介 简单来说,ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. 微软在2001年开发的第一个版本的ASP.NET,是一种建立在 ...

  4. PlayJava Day021

    容器: Collection接口:定义了存取一组对象的方法,其子接口Set和List分别定义了存储方式 List:存储数据有序且可重复 ----> ArrayList Set:存储数据无序且不可 ...

  5. Python:多态、协议和鸭子类型

    多态 问起面向对象的三大特性,几乎每个人都能对答如流:封装.继承.多态.今天我们就要来说一说 Python 中的多态. 所谓多态:就是指一个类实例的相同方法在不同情形有不同表现形式.多态机制使具有不同 ...

  6. Typescript使用字符串联合类型代替枚举类型

    TypeScript宗旨 我觉得Typescript的宗旨是 任何一个 TypeScript 程序,在手动删去类型部分,将后缀改成 .js 后,都应能够正常运行.Typescript是javascri ...

  7. JAVA微信企业付款到零钱(十分钟搞定),附完整DEMO下载

    最近帮朋友做了一个简单的微分销系统,实现从企业付款到零钱分润的功能,简单记录一下微信企业付款到零钱的开发过程, 主要就是按规则封装好请求参数调用微信接口,涉及一些签名校验: A.接口流程 1. 获取用 ...

  8. 简单快速上手Jackson使用

    1简介 Jackson具有比较高的序列化和反序列化效率,据测试,无论是哪种形式的转换,Jackson > Gson > Json-lib,而且Jackson的处理能力甚至高出Json-li ...

  9. 深入理解计算机系统cp1:存储单位与编码

    摘要: 理解计算机是如何存储数据的. 原文:深入理解计算机系统cp1:存储单位与编码 作者:Chor Fundebug经授权转载,版权归原作者所有. 1. 存储单位 位:即 bit,表示二进制位,要么 ...

  10. 微信小程序中换行,空格(多个空格)写法

    在小程序中HTML的网页实体无法正常使用,小程序中的写法为: 一.空格,换行 <text>你好!\t七月流火啊!\n我在下一行</text> \t 空格( 多个只会显示一个空格 ...