typescrip接口 interface详解,以及ts实现多态

ts 接口

当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的
示例如下

当一个对象类型被多次使用时,可以看到,很明显代码有大量的冗余

let personTom: { name: string, age?: number, sayHi(name: string): void } = {name: 'Tom',sayHi(name: string) {console.log(`Hi, ${name}`)}
}
let personJack: { name: string, age?: number, sayHi(name: string): void } = {name: 'Tom',sayHi(name: string) {console.log(`Hi, ${name}`)}
}

这个时候可以将这个对象定义为接口,以进行复用,可以看到,这样代码就少了很多冗余

interface Person {name: stringage?: numbersayHi(name: string): void
}
let personTime: Person = {name: 'time',sayHi(name: string) {console.log(`hello ${name}`)}
}let personJohn: Person = {name: 'John',sayHi(name: string) {console.log(`hello ${name}`)}
}
  1. 使用interface关键字来声明接口
  2. 接口名称(比如,此处的Person)可以是任意合法变量名称
  3. 声明接口后,直接使用接口名称作为变量的类型
  4. 因为每一行只有一个属性类型,因此,属性类型后没有分号或逗号

interface 与 type 类型别名的区别

在 TypeScript中,interface和type都可以用来定义类型的别名

  • 定义方式:type别名可以用来给一个类型起新名字,使用type创建类型别名。它更加灵活,可以用来定义任意类型的别名,包括原始类型、函数、对象等。而interface则是命名数据结构的另一种方式,仅限于描述对象类型,声明语法也不同于type的声明语法。
  • 使用范围:与type不同,interface仅限于描述对象类型。也就是说,interface无法用来定义非对象类型的别名,如原始类型、函数等。type则没有这些限制,可以用来定义各种类型的别名。
  • 组合类型:在TypeScript中,type可以使用交叉类型(intersection type)和联合类型(union type)来组合多个类型,而interface则不能。这意味着type可以创建更复杂和灵活的类型结构,而interface在这方面的能力较弱。
    总的来说,type和interface在TypeScript中都可以用来定义类型的别名,但它们在定义范围、组合类型的能力等方面存在明显的差异。

interface(接口)和type(类型别名)的对比

  • 相同点: 都可以给对象指定类型
  • 不同点:
    - 接口只能为对象指定类型
    - 类型别名,不仅可以为对象指定类型,实际上可以给任意类型指定别名

代码示例

interface Person {name: stringage?: numbersayHi(name: string): void
}type animal = {name: stringage?: numbersayHi(name: string): void
}

在编译器中使用,两者都可以实现对对象的类型监测
在这里插入图片描述

接口的继承

如果两个接口之间有相同的属性或方法,可以将公共的属性或方法,抽离出来,通过继承来实现复用
比如,这两个接口都有x,y两个属性,重复写两次,可以,但是很繁琐

	interface Point2D { x: number, y: number }interface Point3D { x: number, y: number, z: number }

这个时候就可以使用extends继承来让Point3D 继承Point2D 就可以省去x和y的定义了
如下

	interface Point2D { x: number, y: number }// interface Point3D { x: number, y: number, z: number }interface Point3D extends Point2D { z: number }

在这里插入图片描述

tips:

  1. 使用extends(继承)关键字实现了接口Point3D 继承Point2D
  2. 继承后,Point3D 就有了Point2D的所有方法和属性了(此时Point3D 同时有x,y,z三个属性)

继承多个接口

一个接口可以继承多个接口,如下 video3D继承了video接口和3D接口 ,继承后,Video3D接口就同时拥有两个接口的所有属性和方法了

interface Point2D { x: number, y: number }
// interface Point3D { x: number, y: number, z: number }
interface Point3D extends Point2D { z: number }interface Video { video: object }interface Video3D extends Video, Point3D {lookAt(target: Point3D): void;
}let v: Video3D = { video: {}, x: 10, y: 10, z: 10, lookAt: (t) => { } } 

typescript 多态

先看下面这个例子

interface Animal {  name: string;  age: number;  sound: () => void;  
}  interface Dog extends Animal {  breed: string;  
}  let myDog: Dog = {  name: "Rex",  age: 3,  breed: "German Shepherd",  sound: () => console.log("Bark!")  
};

在这个例子中,Dog 接口继承了 Animal 接口。这意味着,Dog 对象必须包含 Animal 接口定义的所有属性和方法,也就是 name、age 和 sound。然后,Dog 接口还定义了自己的额外属性,即 breed。
这是一个很有意思的现象,因为这已经是静态类型语言才能实现多态的基础了

如上在 TypeScript 中,接口继承可以实现多态性。如果你有一个函数接受 Animal 类型的参数,那么你也可以传入一个 Dog 类型的参数,因为 Dog 是 Animal 的子类型。这是基于 Liskov 替换原则,也就是子类型必须能够替换它们的基类型。
原理有了,开始实现

	//定义基类interface Animal {name: string;age: number;sound: () => void;}//定义基础interface Dog extends Animal {breed: string;}let myDog: Dog = {name: "Rex",age: 3,breed: "German Shepherd",sound: () => console.log("Bark!")};//实现多态function polymorphicDisplay(a: Animal) {a.sound();}polymorphicDisplay(myDog);

输出成功, js牛逼! ,不对ts牛逼
在这里插入图片描述

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

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

相关文章

Web 整合

HTML span 行内元素 p 块级元素 br/ 强制换行 i em倾斜 b strong 加粗 u 下划线 mark 高亮 超链接 a :a href"链接地址" target"_blank" alt"可替文本" title"文字提示" tartget:_self 自己界面打开 _…

JVM G1垃圾回收器学习笔记

前言 最近在工作中遇到频繁FullGC且YoungGC时间有时特别长的情况,而自己对JVM的垃圾回收也是一知半解,因此需要对JVM做系统的了解,为快速解决工作中的问题,能有效分析GC日志和业务代码,先从G1垃圾回收器开始学习&…

基于Python机器学习、深度学习提升气象、海洋、水文领域实践应用

Python是功能强大、免费、开源,实现面向对象的编程语言,能够在不同操作系统和平台使用,简洁的语法和解释性语言使其成为理想的脚本语言。除了标准库,还有丰富的第三方库,Python在数据处理、科学计算、数学建模、数据挖…

【操作系统笔记】程序运行机制CPU指令集

内存地址 指针 / 引用 指针、引用本质上就是内存地址,有了内存地址就可以操作对应的内存数据了。 不同的数据类型 字节序 大端序(Big Endian):字节顺序从低地址到高地址顺序存储的字节序小端序(Little Endian&#…

Spring Boot2.7生成用于登录的图片验证码

先在 pom.xml 注入依赖 <dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version> </dependency>然后 需要在配置文件中声明一下DefaultKaptcha 的 bean对象 然后 我们…

76、SpringBoot 整合 MyBatis------使用 sqlSession 作为 Dao 组件(就是ssm那一套,在 xml 写sql)

就是 ssm 那套&#xff0c;在xml 上面写sql ★ 基于SqlSession来实现DAO组件的方式 - MyBatis提供的Starter会自动在Spring容器中配置SqlSession&#xff08;其实SqlSessionTemplate实现类&#xff09;、并将它注入其他组件&#xff08;如DAO组件&#xff09;- DAO组件可直接…

前端-防止多次点击

前端-防止多次点击 原理&#xff1a;设置一个状态变量&#xff0c;为true的时候才能触发&#xff0c;false不能触发&#xff0c;运用setTimeout延时修改状态变量状态&#xff0c;达到不能连点的效果。 注释&#xff1a; 这里封装了一个js文件 全局注册 用的时候比较方便 1.封…

js-nginx配置字段适配前端服务

当我们有这样一个需求&#xff0c;前端同一套代码&#xff0c;但要根据一些特殊字段展示不同的内容&#xff0c;比如我们有一个场id&#xff0c;暂时这个场id放在前端&#xff0c;后端根据这个场id返回不同的数据&#xff0c;这里前端部署用的是yaml文件&#xff0c;平台是ranc…

如何使用Python构建OTP验证系统?

即使您的密码被盗&#xff0c;OTP验证系统也可以充当安全的关键要素。它让您无需记住密码&#xff0c;充当额外的安全层&#xff0c;并降低了网络钓鱼的风险。 不妨学习用Python建立一个OTP验证系统&#xff0c;它会向您的手机号码发送一个OTP&#xff0c;有效期只有两分钟&am…

目标检测YOLO实战应用案例100讲-机载SAR复杂场景目标高效检测方法研究(续)

目录 3.3 实验分析 3.3.1 实验设置 3.3.2 实验结果 3.3.3 性能分析 SAR复杂场景高效成像检测 <

linux 文件锁

建议锁,强制锁,记录锁的概念 建议锁&#xff1a; 如果某一个进程对一个文件持有一把锁之后&#xff0c;其他进程仍然可以直接对文件进行操作(open, read, write)而不会被系统禁止&#xff0c;即使这个进程没有持有锁。只是一种编程上的约定。建议锁只对遵守建议锁准则的进程生…

知识付费平台开发技术实践:构建数字学习的未来

引言 知识付费平台的兴起正在塑造着数字学习的未来。本文将介绍一些关键的技术实践&#xff0c;帮助开发者构建强大的知识付费平台&#xff0c;提供出色的数字学习体验。 1. 选择适当的技术栈 在开始知识付费平台的开发之前&#xff0c;首要任务是选择适当的技术栈。这包括…

TS中的数据类型

一、number类型 let c: number; c 10; c "hello"; // 不能复制string类型 二、string类型 let d: string; d "hello"; d 10; // 不能复制number类型 三、boolean类型 let e: boolean true; e false; e 10; // 不能赋值true和false以外的值 四…

嵌入式裸机轻量级架构探索总结

为什么会想着探索下嵌入式裸机的架构呢&#xff1f;是因为最近写了一个项目&#xff0c;项目开发接近尾声时&#xff0c;发现了一些问题&#xff1a; 1、项目中&#xff0c;驱动层和应用层掺杂在一起&#xff0c;虽然大部分是应用层调用驱动层&#xff0c;但是也存在驱动层调用…

七、图覆盖

工程学中的很多原理和打棒球一样。你不一定非常强壮才能打出全垒打&#xff0c;你只需要打在球的正中心。 7.1 概述 有向图是许多覆盖准则的基础。边的初始节点有时被称为前驱节点&#xff0c;终止节点被称为后继节点&#xff0c;路径是一个节点序列。 测试路径&#xff1a;…

【运维面试100问】(二)你最擅长什么?对某某擅长吗?---请设计一个符合公司使用的lvs架构

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

笔试面试相关记录(4)

&#xff08;1&#xff09;实现防火墙的主流技术有哪些&#xff1f; 实施防火墙主要采用哪些技术 - 服务器 - 亿速云 (yisu.com) &#xff08;2&#xff09; char arr[][2] {a, b, c, d}; printf("%d", *(arr1)); 输出的是谁的地址&#xff1f;字符c 测试代码如下…

ThreeJS-3D教学一基础场景创建

Three.js 是一个开源的 JS 3D 图形库&#xff0c;用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上&#xff0c;并提供了丰富的功能和工具&#xff0c;使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API&#xff0…

JUC中创建的组件 多线程使用“哈希表”

JUC中创建的组件 JUC中创建的组件这些内容都不太常用&#xff0c;偶尔用到面试的时候&#xff0c;偶尔用到&#xff01;到时候自行查找即可&#xff0c;本文主要来快速的过一下&#xff0c;留个印象即可~ JUC&#xff08;java.util.concurrent&#xff09;和多线程相关的工具…

uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符

问题描述&#xff1a;比如图片的尺寸是1125*2001像素&#xff0c;这样用微信开发者工具下载下来的图片尺寸是1125*2001像素&#xff0c;用不同的手机去操作&#xff0c;下载出来的图片尺寸都不一样&#xff0c;和原图片尺寸差距很大。 解决方案&#xff1a;canvas写入的时候是…