「TypeScript系列」TypeScript 接口/接口继承

文章目录

  • 一、TypeScript 接口
    • 1. 属性接口
    • 2. 方法接口
    • 3. 可选属性和只读属性
    • 4. 索引签名
  • 二、TypeScript 接口继承
    • 1. 单继承
    • 2. 多继承的替代方案
  • 三、TypeScript 接口与数组
  • 四、TypeScript 接口与联合类型
  • 五、相关链接

一、TypeScript 接口

在 TypeScript 中,接口(Interfaces)是一个非常重要的概念,它用于定义对象的形状,即对象应该有哪些属性和方法。但接口本身并不实现任何功能,它只是定义了契约,其他类型(如类、对象字面量等)必须遵循这个契约。

以下是 TypeScript 接口的一些基本用法:

1. 属性接口

定义一个只包含属性的接口:

interface Person {name: string;age: number;
}let person: Person = {name: 'Alice',age: 25
};

在这个例子中,Person 接口定义了一个对象应该具有 name(类型为 string)和 age(类型为 number)两个属性。然后,我们创建了一个 Person 类型的变量 person,并给它分配了一个满足这个接口定义的对象。

2. 方法接口

接口也可以定义方法:

interface Greeter {greet(name: string): void;
}class PersonGreeter implements Greeter {greet(name: string) {return 'Hello, ' + name;}
}let greeter: Greeter = new PersonGreeter();
console.log(greeter.greet('Alice'));  // 输出 "Hello, Alice"

在这个例子中,Greeter 接口定义了一个方法 greet,该方法接受一个 string 类型的参数,并返回 void(即不返回任何值)。然后,我们创建了一个 PersonGreeter 类,该类实现了 Greeter 接口,并提供了 greet 方法的实现。

3. 可选属性和只读属性

接口中的属性可以是可选的,也可以是只读的:

interface OptionalPerson {name: string;age?: number;  // 可选属性readonly id: number;  // 只读属性
}let optionalPerson: OptionalPerson = {name: 'Bob',id: 123
};// optionalPerson.age = 26;  // 错误,因为 age 是可选的,但并未在此处赋值
// optionalPerson.id = 456;  // 错误,因为 id 是只读的

在这个例子中,OptionalPerson 接口定义了一个可选的 age 属性和一个只读的 id 属性。注意,只读属性在第一次赋值后就不能再被修改。

4. 索引签名

接口也可以定义索引签名,用于描述对象可以有哪些索引以及这些索引的类型:

interface StringDictionary {[key: string]: string;
}let dict: StringDictionary = {firstName: 'Alice',lastName: 'Smith'
};// dict.someNumber = 123;  // 错误,因为索引签名只允许 string 类型的键和 string 类型的值

在这个例子中,StringDictionary 接口定义了一个索引签名,表示该对象可以有任意数量的字符串类型的键和对应的字符串类型的值。

二、TypeScript 接口继承

在 TypeScript 中,接口(Interfaces)是支持单继承的,即一个接口可以继承自另一个接口。但是,TypeScript 不支持接口的多继承,即一个接口不能直接继承自多个接口。这是因为多重继承在面向对象编程中往往会导致复杂的继承层次和潜在的“菱形问题”(diamond problem)。

1. 单继承

在 TypeScript 中,你可以使用 extends 关键字来定义接口的继承关系。以下是一个单继承的示例:

interface Animal {name: string;eat(): void;
}interface Dog extends Animal {bark(): void;
}let myDog: Dog = {name: 'Buddy',eat() {console.log('Dog is eating');},bark() {console.log('Woof woof!');}
};

在这个例子中,Dog 接口继承了 Animal 接口,并添加了 bark 方法。任何实现 Dog 接口的对象都必须实现 nameeatbark 这三个属性和方法。

2. 多继承的替代方案

虽然 TypeScript 不支持接口的多继承,但你可以使用交叉类型(Intersection Types)来实现类似的效果。交叉类型是将多个类型合并为一个类型,你可以将它看作是多重继承的“模拟”。

以下是一个使用交叉类型实现类似多继承的示例:

interface Bird {fly(): void;layEggs(): void;
}interface Mammal {giveBirth(): void;eat(): void;
}// 使用交叉类型合并 Bird 和 Mammal
type Bat = Bird & Mammal;let myBat: Bat = {fly() {console.log('Flying');},layEggs() {console.log('Laying eggs (even though bats don\'t really do this)');},giveBirth() {console.log('Giving birth to live young');},eat() {console.log('Eating insects');}
};

在这个例子中,我们定义了两个接口 BirdMammal,然后使用交叉类型 Bat = Bird & Mammal 创建了一个新类型 Bat,它同时包含了 BirdMammal 的方法。任何符合 Bat 类型的对象都必须实现 flylayEggsgiveBirtheat 这四个方法。

虽然交叉类型在语法上看起来类似于多重继承,但它们之间有一些重要的区别。交叉类型不会创建一个继承层次结构,而是简单地将多个类型合并为一个类型。因此,它们不会遇到多重继承可能导致的复杂性和问题。

三、TypeScript 接口与数组

接口可以定义包含数组的属性。这允许你指定数组中的元素类型以及数组自身的其他属性(尽管数组本身没有除 length 和方法之外的属性)。

interface User {name: string;age: number;
}interface UserList {users: User[]; // 定义一个User类型的数组count: number; // 可能表示用户的数量
}const userList: UserList = {users: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },],count: 2
};

在这个例子中,UserList 接口有一个 users 属性,它是一个 User 类型的数组。同时,UserList 还定义了一个 count 属性,可能用于存储用户的数量。

四、TypeScript 接口与联合类型

联合类型(Union Types)允许一个变量是几种类型之一。然而,接口本身并不直接与联合类型关联,但你可以使用接口与联合类型结合来定义复杂的类型。

联合类型通常使用 | 符号来定义,表示一个值可以是几种类型中的任何一种。

interface Square {kind: "square";size: number;
}interface Rectangle {kind: "rectangle";width: number;height: number;
}// 使用联合类型来定义一个变量可以是 Square 或 Rectangle
let shape: Square | Rectangle;shape = { kind: "square", size: 100 };
// 或者
shape = { kind: "rectangle", width: 100, height: 50 };// 使用类型守卫来区分不同的类型
function getArea(shape: Square | Rectangle): number {if (shape.kind === "square") {return shape.size * shape.size;} else {return shape.width * shape.height;}
}

在这个例子中,我们定义了两个接口 SquareRectangle,它们分别描述了正方形和矩形的属性。然后,我们定义了一个变量 shape,它可以是 SquareRectangle 类型之一。我们还定义了一个 getArea 函数,它接受一个 Square | Rectangle 类型的参数,并使用类型守卫(Type Guards)来区分不同的类型,并返回相应的面积。

需要注意的是,尽管在这个例子中我们没有直接在接口中使用联合类型,但联合类型与接口的结合使得我们可以定义更加复杂和灵活的类型系统。

五、相关链接

  1. TypeScript中文网
  2. TypeScript下载
  3. TypeScript文档
  4. 「TypeScript系列」TypeScript 简介及基础语法
  5. 「TypeScript系列」TypeScript 基础类型
  6. 「TypeScript系列」TypeScript 变量声明
  7. 「TypeScript系列」TypeScript 运算符
  8. 「TypeScript系列」TypeScript 条件语句
  9. 「TypeScript系列」TypeScript 循环
  10. 「TypeScript系列」TypeScript 函数
  11. 「TypeScript系列」TypeScript Number
  12. 「TypeScript系列」TypeScript String
  13. 「TypeScript系列」TypeScript Array(数组)
  14. 「TypeScript系列」TypeScript Map 对象
  15. 「TypeScript系列」TypeScript 元组
  16. 「TypeScript系列」TypeScript 联合类型/联合类型数组

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

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

相关文章

前端开发攻略---三种方法解决Vue3图片动态引入问题

目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址&#xff08;推荐&#xff09; 1、将图片放入public文件夹中 使用图片&#xff1a;路径为 /public 开头 <template><div><img :src"/public/${flag ? 01 : 02}.jp…

【电子学会】2023年09月图形化一级 -- 芝麻开门

芝麻开门 1. 准备工作 &#xff08;1&#xff09;删除小猫角色&#xff0c;添加角色Key&#xff1b; &#xff08;2&#xff09;删除白色背景&#xff0c;添加背景Castle 1和Pathway。 2. 功能实现 &#xff08;1&#xff09;点击绿旗&#xff0c;钥匙在舞台中间&#xff…

有序的一维数组中插入一个整数并保持其有序性

在C语言中&#xff0c;如果你想在一个有序的一维数组中插入一个整数并保持其有序性&#xff0c;你可以使用指针来操作数组元素。这里有一个基本的步骤和示例代码来展示这个过程&#xff1a; 定义一个足够大的数组&#xff08;比原数组多一个位置来存放新元素&#xff09;。 初…

SQL——SELECT相关的题目

目录 197、上升的温度 577、员工奖金 586、订单最多的客户 596、超过5名学生的课 610、判断三角形 620、有趣的电影 181、超过经理收入的员工 1179、重新格式化部门表 1280、学生参加各科测试的次数 1068、产品销售分析I 1075、项目员工I 1084、销售分析III 1327、列出指…

2024最新 Jenkins + Docker 实战教程(六)- Jenkins配置邮箱接收构建通知

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Spring Cloud 面试题(二)

1. 什么是 Hystrix&#xff1f;它如何实现容错&#xff1f; Hystrix是一个开源的容错库&#xff0c;由Netflix开发&#xff0c;用于分布式系统中的服务间调用&#xff0c;以防止任何单一服务的故障导致整个系统的崩溃。Hystrix通过提供快速失败&#xff08;fail-fast&#xff…

java适配器模式 (Adapter Pattern)示例代码

适配器模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换成客户端所期望的另一个接口。这种模式通常用于系统间接口不兼容的情况下&#xff0c;通过适配器来让它们能够一起工作。下面是一个简单的Java适配器模式示例代码。 目标接口 首先&#xff0c;我们定义了目…

【数据结构】二叉树的功能实现

文章目录 关于二叉树的创建如何创建二叉树实现二叉树的前、中、后序遍历层序遍历 关于二叉树的创建 在笔者的上一篇文章中堆进行了一个详细介绍&#xff0c;而二叉树是以堆为基础进行创建&#xff0c;它与堆的显著不同是 堆像是一个线性结构&#xff0c;堆的结构往往是一个数…

PHP生成二维码+二维码包含logo图片展示

composer require chillerlan/php-qrcode 用到的扩展自己安装&#xff08;注&#xff1a;只生成二维码只要开gd扩展就行&#xff09; 仅生成二维码看这个&#xff1a; use chillerlan\QRCode\QRCode;public function QRCode(){$qrcode new QRCode();$url "http://ww…

Beta 分布和 Gamma 分布

0. 摘要 本文主要介绍 B e t a Beta Beta 分布和 G a m m a Gamma Gamma 分布之间的关系, 以及两者的采样方法. 其实, PyTorch、Numpy、Scipy 等一些机器学习包已经实现了对这两种分布的包装, 本文主要目的是理解背后的大致原理. 1. Beta 分布 设 X ∼ B e t a ( α , β…

Flutter 中的 OutlineButton 小部件:全面指南

Flutter 中的 OutlineButton 小部件&#xff1a;全面指南 在Flutter的Material Design组件库中&#xff0c;OutlineButton是一个用于创建带边框的扁平按钮的小部件。这种按钮通常用于次要操作或在需要强调其他按钮的情况下使用。本文将为您提供一个全面的指南&#xff0c;帮助…

介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块

npm&#xff08;Node Package Manager&#xff09;模块安装机制是Node.js生态系统中非常重要的一部分&#xff0c;它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制&#xff0c;以及为什么输入npm install就可以自动安装对应的模块。 npm模…

金蝶「起舞」,AI进化

能清晰感受到的是&#xff0c;金蝶仍然在不断进化&#xff0c;甚至伴随着AI时代的到来&#xff0c;它的进化信号愈发明显。 这些进化对应的具体动作是&#xff0c;把过去多年的服务模型整合成AI模型&#xff0c;把具体的服务“工艺”整理成流程编排能力&#xff0c;以及从740…

水下哨兵 智能守护——北斗人员落水报警与快速应急响应方案

随着科技的不断发展&#xff0c;人们对于安全的需求也越来越高&#xff0c;尤其是在水域活动中&#xff0c;落水事故时有发生&#xff0c;给人们的生命和财产安全带来了很大威胁。为了更好地保障水域活动者的安全&#xff0c;北斗短报文技术被广泛应用于落水报警系统中&#xf…

Python 中的 NumPy:数值计算基础

NumPy&#xff08;Numerical Python&#xff09;是一个用于科学计算的基础包。它提供了支持高效数组和矩阵操作的强大功能&#xff0c;同时还提供了大量的数学函数库。NumPy 是许多数据科学和机器学习库&#xff08;如 Pandas、Scikit-Learn 和 TensorFlow&#xff09;的基础&a…

不平衡数据研究:分配权重 合并2个loader

分配权重&#xff08;基于实例分配&#xff0c;基于类分配&#xff09; import numpy as np import torch from torch.utils.data import DataLoader, WeightedRandomSampler, Dataset# Mock dataset class class MockDataset(Dataset):def __init__(self, data, targets):sel…

玩转OpenHarmony智能家居:如何实现开发版“碰一碰”设备控制

一、简介 “碰一碰”设备控制&#xff0c;依托NFC短距通信协议&#xff0c;通过碰一碰的交互方式&#xff0c;将OpenAtom OpenHarmony&#xff08;简称“OpenHarmony”&#xff09;标准系统设备和全场景设备连接起来&#xff0c;解决了应用与设备之间接续慢、传输难的问题&…

什么是DDoS流量清洗?

随着互联网的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;其中分布式拒绝服务&#xff08;DDoS&#xff09;攻击尤为引人关注。为了有效应对这一威胁&#xff0c;流量清洗服务应运而生&#xff0c;成为网络安全领域的一项重要技术。 流量清洗服务是一种专门针对DDoS…

昔日辉煌不再,PHP老矣,尚能饭否?

导语 | 近期 TIOBE 最新指数显示&#xff0c;PHP 的流行度降至了历史最低&#xff0c;排在第 17 名&#xff0c;同时&#xff0c;在年度 Stack Overflow 开发者调查报告中&#xff0c;PHP 在开发者中的受欢迎程度已经从之前的约 30% 萎缩至现在的 18%。“PHP 是世界上最好的语言…

WiFi蓝牙模块开发配置过程中需要注意的细节

在很多产品的应用场景中&#xff0c;WIFI网络会给我们提供很多便捷&#xff0c;MCU开发中大多使用串口WIFI蓝牙模块来实现产品接入WIFI网络中。   具体的使用模型如下图所示&#xff1a;整个系统涉及到WIFI网络、手机、服务器平台以及我们设计的产品&#xff0c;一个完整的生…