TypeScript 接口之class接口定义

文章目录

  • 前言
  • 可索引的类型
  • 类类型
  • 实现接口
  • 类静态部分与实例部分的区别
  • 扩展接口
  • 混合类型
  • 接口继承类
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Typescript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

可索引的类型

与使用接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如a[10]或ageMap[“daniel”]。 可索引类型具有一个 索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。 让我们看一个例子:

interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray = ["Bob", "Fred"];let myStr: string = myArray[0];

上面例子里,我们定义了StringArray接口,它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

共有支持两种索引签名:字符串和数字。 可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时,JavaScript会将它转换成string然后再去索引对象。 也就是说用 100(一个number)去索引等同于使用"100"(一个string)去索引,因此两者需要保持一致。

class Animal {name: string;
}
class Dog extends Animal {breed: string;
}// Error: indexing with a 'string' will sometimes get you a Dog!
interface NotOkay {[x: number]: Animal;[x: string]: Dog;
}

字符串索引签名能够很好的描述dictionary模式,并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj[“property”]两种形式都可以。 下面的例子里, name的类型与字符串索引类型不匹配,所以类型检查器给出一个错误提示:

interface NumberDictionary {[index: string]: number;length: number;    // 可以,length是number类型name: string       // 错误,`name`的类型不是索引类型的子类型
}

最后,你可以将索引签名设置为只读,这样就防止了给索引赋值:

interface ReadonlyStringArray {readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

你不能设置myArray[2],因为索引签名是只读的。


类类型

实现接口

与C#或Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {currentTime: Date;
}class Clock implements ClockInterface {currentTime: Date;constructor(h: number, m: number) { }
}

你也可以在接口中描述一个方法,在类里实现它,如同下面的setTime方法一样:

interface ClockInterface {currentTime: Date;setTime(d: Date);
}class Clock implements ClockInterface {currentTime: Date;setTime(d: Date) {this.currentTime = d;}constructor(h: number, m: number) { }
}

接口描述了类的公共部分,而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。


类静态部分与实例部分的区别

当你操作类和接口的时候,你要知道类是具有两个类型的:静态部分的类型和实例的类型。 你会注意到,当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误:

interface ClockConstructor {new (hour: number, minute: number);
}class Clock implements ClockConstructor {currentTime: Date;constructor(h: number, m: number) { }
}

这里因为当一个类实现了一个接口时,只对其实例部分进行类型检查。 constructor存在于类的静态部分,所以不在检查的范围内。

因此,我们应该直接操作类的静态部分。 看下面的例子,我们定义了两个接口, ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock,它用传入的类型创建实例。

interface ClockConstructor {new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {tick();
}function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute);
}class DigitalClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log("beep beep");}
}
class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log("tick tock");}
}let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

因为createClock的第一个参数是ClockConstructor类型,在createClock(AnalogClock, 7, 32)里,会检查AnalogClock是否符合构造函数签名。


扩展接口

和类一样,接口也可以相互扩展。 这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。

interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

一个接口可以继承多个接口,创建出多个接口的合成接口。

interface Shape {color: string;
}interface PenStroke {penWidth: number;
}interface Square extends Shape, PenStroke {sideLength: number;
}let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型

先前我们提过,接口能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点,有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是,一个接口可以同时做为函数和对象使用,并带有额外的属性。

interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter {let counter = <Counter>function (start: number) { };counter.interval = 123;counter.reset = function () { };return counter;
}let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

接口继承类

当接口继承了一个类类型时,它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员,但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时,这个接口类型只能被这个类或其子类所实现(implement)。

这是很有用的,当你有一个很深层次的继承,但是只想你的代码只是针对拥有特定属性的子类起作用的时候。子类除了继承自基类外与基类没有任何联系。 例:

class Control {private state: any;
}interface SelectableControl extends Control {select(): void;
}<p>class Button extends Control implements SelectableControl {
</p><p>    select() { }
</p><p>}
</p><p>class TextBox extends Control {
</p><p>    select() { }
</p><p>}
</p><p>// 错误:“Image”类型缺少“state”属性。
</p><p>class Image implements SelectableControl {
</p><p>    select() { }
</p><p>}
</p><p>class Location {
</p><p>}</p>

在上面的例子里,SelectableControl包含了Control的所有成员,包括私有成员state。 因为 state是私有成员,所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state,这对私有成员的兼容性是必需的。

在Control类内部,是允许通过SelectableControl的实例来访问私有成员state的。 实际上,SelectableControl就像Control一样,并拥有一个select方法。 ButtonTextBox类是SelectableControl的子类(因为它们都继承自Control并有select方法),但ImageLocation类并不是这样的。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/191621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FL Studio21.2汉化永久中文语言包

FL Studio21.2这款软件在国内被广泛使用&#xff0c;因此又被称为"水果"。它提供音符编辑器&#xff0c;可以针对作曲者的要求编辑出不同音律的节奏&#xff0c;例如鼓、镲、锣、钢琴、笛、大提琴、筝、扬琴等等任何乐器的节奏律动。此外&#xff0c;它还提供了方便快…

《opencv实用探索·八》图像模糊之均值滤波简单理解

1、前言 什么是噪声&#xff1f; 该像素与周围像素的差别非常大&#xff0c;导致从视觉上就能看出该像素无法与周围像素组成可识别的图像信息&#xff0c;降低了整个图像的质量。这种“格格不入”的像素就被称为图像的噪声。如果图像中的噪声都是随机的纯黑像素或者纯白像素&am…

C++ 蓝桥杯历届试题 —— 装西瓜

题目背景 地上有一排西瓜&#xff0c;每个西瓜都有自己的重量。淘淘有一个包&#xff0c;包的容量是固定的&#xff0c;淘淘希望尽可能在包里装更多的西瓜&#xff08;当然要装整个的&#xff0c;不能切开装&#xff09;&#xff0c;请问淘淘的包最多能装下多少个西瓜&#xff…

Oracle(2-7)Instance and Media Recovery Structures

文章目录 一、基础知识1、体系结构详解2、Database Files 数据库文件3、Database Other Files 其他数据文件4、Dynamic Views 动态视图5、Large Pool6、DB Buffer Cache,DBWn7、Configuring Tablespaces 配置表空间8、Redo Log Buffer, LGWR9、Database Checkpoints 数据库检查…

wordpress忘记密码怎么办?

有的时候&#xff0c;我们会忘记网站的密码&#xff0c;所以网站的密码要记住&#xff0c;那记不住&#xff0c;怎么样才可以登录后台呢&#xff1f;下面来给大家说一下方法&#xff0c;第一种方法&#xff0c;就是进入数据库里面修改密码&#xff0c;第二种就是从新搭建&#…

Redis--10--Pipeline

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Pipeline举例比较普通模式与 PipeLine 模式小结&#xff1a; Pipeline 前面我们已经说过&#xff0c;Redis客户端执行一条命令分为如下4个部分:1&#xff09;发送命…

echarts 地图

效果图 业务组件 <template><mapEcharts :itemStyle"mapProps.itemStyle" :emphasisLabelStyle"mapProps.emphasisLabelStyle":emphasisItemStyle"mapProps.emphasisItemStyle" :labelInfo"mapProps.labelInfo":rippleEffec…

LeetCode 2661. 找出叠涂元素:多次映射

【LetMeFly】2661.找出叠涂元素&#xff1a;多次映射 力扣题目链接&#xff1a;https://leetcode.cn/problems/first-completely-painted-row-or-column/ 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。arr 和 mat 都包含范围 [1&#xff0c;m * n] 内…

.[[backup@waifu.club]].wis勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 随着科技的不断发展&#xff0c;网络安全威胁也变得愈发严峻。最近&#xff0c;一种名为.[[backupwaifu.club]].wis的勒索病毒愈演愈烈&#xff0c;给用户的数据安全带来了极大的威胁。本文将深入介绍.[[backupwaifu.club]].wis病毒的特征、如何应对数据加密…

帆软的控件参数-笔记1

1.帆软的控件参数 变量可以通过模板->模板参数定义添加需要给变量赋值的控件&#xff0c;如下拉控件时&#xff0c;将控件名称命名为与模板参数同名帆软就会自行匹配。也可以不添加模板参数&#xff0c;直接给控件名称命名&#xff0c;该命名就是变量名&#xff0c;该变量名…

Vmware17虚拟机安装windows10系统

不要去什么系统之家之类的下载镜像&#xff0c;会不好安装&#xff0c;镜像被魔改过了&#xff0c;适合真实物理机上的系统在PE里安装系统&#xff0c;建议下载原版系统ISO文件 安装vmware17pro 下载地址https://dwangshuo.jb51.net/202211/tools/VMwareplayer17_855676.rar 解…

pandas基础1

​ Pandas 是非常著名的开源数据处理库&#xff0c;我们可以通过它完成对数据集进行快速读取、转换、过滤、分析等一系列操作。除此之外&#xff0c;Pandas 拥有强大的缺失数据处理与数据透视功能&#xff0c;可谓是数据预处理中的必备利器。 ​ Pandas 是非常著名的开源数据处…

Vue3中定义变量是选择ref还是reactive?

Ref 与reactive 在 Vue 3 中&#xff0c;reactive 和 ref 是用于创建响应式数据的两个不同的 API。它们都是 Vue 3 Composition API 的一部分。 ref&#xff1a; ref 用于创建一个包装基本数据类型的响应式对象。它接受一个初始值&#xff0c;并返回一个包含 value 属性的对…

Effective C++(一): Const Correctness, Const成员函数和Const Cast

文章目录 一、Const成员函数二、Const Correctness三、Const Cast 有关 const 的用法是 cpp 中一个非常经典且易错的部分&#xff0c;在面试和日常工作中各种各样的 const 经常让人摸不着头脑&#xff0c;今天就来根据 const 扮演的不同角色来归纳有关 const 的不同用法 一、C…

泊车功能专题介绍 ———— 汽车全景影像监测系统性能要求及试验方法(国标未公布)

文章目录 术语和定义一般要求功能要求故障指示 性能要求响应时间图像时延单视图视野范围平面拼接视图视野平面拼接效果总体要求行列畸变拼接错位及拼接无效区域 试验方法环境条件仪器和设备车辆条件系统响应时间试验图像时延试验单视图视野范围试验平面拼接视图视野试验平面拼接…

Ubuntu 22.04安装Go 1.21.4编译器

lsb_release -r看到操作系统版本是22.04,uname -r看到内核版本是uname -r。 sudo wget https://studygolang.com/dl/golang/go1.21.4.linux-amd64.tar.gz下载编译器。 sudo tar -zxf go1.21.4.linux-amd64.tar.gz -C /goroot将文件解压到/goroot目录下&#xff0c;这个命令…

生成带依赖Jar 包的两种常用方式:IDEA打包工具:Artifacts 和 maven-shade-plugin

文章目录 前言1、IDEA打包工具&#xff1a;Artifacts1.1 创建Artifacts1.2 选择第三方jar文件1.3 打包Artifacts1.4 测试jar包 2、maven-shade-plugin2.1、pom文件添加2.2、打包2.3、测试jar包 总结 前言 当我们编写完Java程序后&#xff0c;为了提高执行效率通常会将应用程序…

冒泡排序详解

1.引入 当我们创建一个数组时&#xff0c;我们可能会发现这个数组的元素顺序可能不固定&#xff0c;这个时候就需要我们给数组排序&#xff0c;给数组排序的方法有很多种&#xff0c;这里今天我们先来介绍一下最简单的一种排序方法&#xff0c;即冒泡排序。 冒泡排序顾名思义&a…

vscode配置c++环境

我现在觉得vscode确实很好用&#xff0c;所以python和c都是用的这个。 首先是安装vs&#xff1a; 官网寻找即可&#xff1a;https://code.visualstudio.com/ 安装好后需要装一些插件&#xff1a; 装上这两个插件&#xff0c;c/c&#xff0c;code runner 接着安装c编译器mi…

canvas基础:绘制虚线

canvas实例应用100 专栏提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。 canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例…