认识TypeScript 中的接口和类

news2025/1/15 18:30:51

   

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

目录

接口


江城开朗的豌豆

在 TypeScript 中,接口(Interfaces)和类(Classes)是实现面向对象编程(Object-Oriented Programming,OOP)的基础工具。这些工具提供了一种方式来定义和组织复杂的数据结构和行为。

TypeScript 是一种静态类型的编程语言,它在 JavaScript 的基础上添加了类型系统和一些其他特性。在 TypeScript 中,接口(Interface)和类(Class)是非常重要且常用的概念。

接口(Interface): 接口是用来描述对象的形状和结构的,它定义了对象应具有的属性和方法。使用接口可以使代码更加清晰、可读性更高,并确保对象具备所需的属性和方法。

示例:

interface Person { 
name: string; 
age: number; greet(): void; 
} 
class Student implements Person { 
name: string; age: number; 
constructor(name: string, age: number) { 
this.name = name; this.age = age; 
} 
greet() { 
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } const student = new Student("John", 20); 
student.greet(); // 输出:Hello, my name is John and I'm 20 years old.

在上面的示例中,定义了一个 Person 接口,它规定了对象应具有 nameage 属性,以及 greet 方法。然后创建了一个 Student 类实现了 Person 接口,构造函数接收 nameage 参数并赋值给类的属性。并且 Student 类必须实现 Person 接口中定义的 greet 方法。

类(Class): 类是一种面向对象编程的基本概念,它是对象的蓝图,定义了对象的属性和方法。在 TypeScript 中,类可以包含构造函数、属性、方法、访问修饰符等。

示例:

 
class Animal { 
protected name: string; 
constructor(name: string) { 
this.name = name; } 
move(distance: number = 0) { 
console.log(`${this.name} moved ${distance} meters.`); } } 
class Dog extends Animal { bark() { 
console.log(`${this.name} is barking.`); 
} } const dog = new Dog("Max"); 
dog.move(10); 
// 输出:Max moved 10 meters. dog.bark(); // 输出:Max is barking.

在上面的示例中,定义了一个 Animal 类,它有一个 name 属性和一个 move 方法。另外创建了一个 Dog 类继承自 Animal 类,并添加了一个 bark 方法。注意在 Animal 类中,name 属性使用了 protected 访问修饰符,表示该属性可以在继承类中访问,但在类外部不可访问。

接口

接口在 TypeScript 中扮演着关键的角色,用于强类型系统的支持。接口可以描述对象的形状,使我们可以编写出预期的行为。接口可用于描述对象、函数或者类的公共部分。

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

在这个例子中,LabelledValue接口就像一个名片,告诉其他代码,只要一个对象有label属性,并且类型为string,那么就可以认为它是LabelledValue

接口也可以描述函数类型:

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

此外,接口还能用于描述数组和索引类型:

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

interface Dictionary {
  [index: string]: string;
}

let myDict: Dictionary;
myDict = { "key": "value" };

与传统的 JavaScript 一样,TypeScript 也使用类(Classes)来定义对象的行为。然而,TypeScript 的类具有一些额外的特性,如访问修饰符(Access Modifiers)、静态属性(Static Properties)、抽象类(Abstract Classes)等。

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

TypeScript 还引入了访问修饰符 publicprivate 和 protected。如果没有指定访问修饰符,则默认为 public

class Animal {
  private name: string;
  constructor(theName: string) { this.name = theName; }
}

TypeScript 类还支持继承,通过extends关键字可以创建一个子类。子类可以访问和改变父类的属性和方法:

class Animal {
  name: string;
  constructor(theName: string) { this.name = theName; }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Dog extends Animal {
  constructor(name: string) { super(name); }
  bark() {
    console.log('Wo

of! Woof!');
  }
}

const dog = new Dog('Tom');
dog.bark();
dog.move(10);
dog.bark();

为了实现多态,TypeScript 提供了抽象类的概念。抽象类是不能被实例化的类,只能作为其他类的基类。抽象类中可以定义抽象方法,抽象方法必须在派生类中实现:

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log('roaming the earth...');
  }
}

class Dog extends Animal {
  makeSound() {
    console.log('Woof! Woof!');
  }
}

const myDog = new Dog();
myDog.makeSound();
myDog.move();

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

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

相关文章

Linux小程序--进度条

目录 1.知识补充 1.1回车和换行 1.2缓冲区 2.实现倒计时 3.实现进度条 1.知识补充 1.在制作小程序进度条之前,我们先了解一下,回车换行和行缓冲区的概念。 2.动态效果,在同一个位置刷新不同的图像,实现一个倒计时的效果。…

Stable Diffusion——基础模型、VAE、LORA、Embedding各个模型的介绍与使用方法

前言 Stable Diffusion(稳定扩散)是一种生成模型,基于扩散过程来生成高质量的图像。它通过一个渐进过程,从一个简单的噪声开始,逐步转变成目标图像,生成高保真度的图像。这个模型的基础版本是基于扩散过程…

剪辑视频调色软件有哪些 剪辑视频软件哪个最好 剪辑视频怎么学 剪辑视频的方法和步骤 会声会影2024 会声会影视频制作教程

看了很多调色教程,背了一堆调色参数,可最终还是调不出理想的效果。别再怀疑自己了,不是你的剪辑技术不行,而是剪辑软件没选对。只要掌握了最基本的调色原理,一款适合自己的视频剪辑软件是很容易出片的。 有关剪辑视频…

3个密码学相关的问题

一、离散对数问题(Discrete Logarithm Problem, DLP) 问题描述:给定 有限阿贝尓群 G中的2个元素a和b,找出最小的正整数x满足:b a ^^ x (或者证明这样的x不存在)。 二、阶数问题(O…

自定义表单工作流的优势特点有啥?

低代码技术平台是提升办公效率的得力武器,在当今竞争激烈的社会中获得了很多中小企业的喜爱与支持。流辰信息是一家专业研发低代码技术平台的服务商,IBPS开发平台用于很多行业中,助力企业实现了办公流程化。自定义表单工作流的优势多、简单灵…

宝塔nginx配置SpringBoot服务集群代理

宝塔nginx配置SpringBoot服务集群代理 1、需求: 现有一个springboot服务需要部署成集群,通过nginx负载均衡进行访问,其中这个springboot服务内置了MQTT服务、HTTP服务、TCP服务。 MQTT服务开放了1889端口 HTTP服务开放了8891端口 HTTP服务开…

加固平板电脑在森林勘探上的应用|亿道三防onerugged

随着对森林资源的重视和需求的增长,森林勘探成为了一项重要的工作。在这个领域中,加固平板电脑的应用为森林勘探工作带来了显著的改善。 首先,三防平板电脑具备良好的耐用性和适应性,能够在恶劣的环境条件下稳定运行。在森林勘探…

LeetCode--代码详解 54.螺旋矩阵

54.螺旋矩阵 题目 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5]示例 2: 输入&#xff…

STM32 UART详细解读(代码的编写)

文章目录 前言一、查询方式编写串口发送和接收的代码二、中断方式编写串口发送和接收的代码总结 前言 本篇文章来给大家讲解USART的代码详细讲解和使用步骤。 一、查询方式编写串口发送和接收的代码 串口查询发送函数: HAL_StatusTypeDef HAL_UART_Transmit(UART…

第2.4章 StarRocks表设计——分区分桶与副本数

目录 一、数据分布 1.1 概述 1.2 数据分布方式 1.2.1 Round-Robin 1.2.2 Range 1.2.3 List 1.2.4 Hash 1.3 StarRocks的数据分布方式 1.3.1 不分区 Hash分桶 1.3.2 Range分区Hash分桶 三、分区 3.1 分区概述 3.2 创建分区 3.2.1 手动创建分区 3.2.2 批量创建分区…

MIT-BEVFusion系列九--CUDA-BEVFusion部署2 create_core之参数设置

目录 加载命令行参数main 函数中的 create_core图像归一化参数体素化参数稀疏卷积网络参数真实世界几何空间参数 (雷达坐标系下体素网格的参数)解码后边界框的参数构建 bevfusion::Core 存储推理时需要的参数 本章开始,我们将一起看CUDA-BEVFusion的代码流程&#x…

Sample Pairing(ICLR 2018)

paper:Data Augmentation by Pairing Samples for Images Classification 本文的创新点 本文提出了一种新的应用于图像分类的数据增强方法SamplePairing,这种简单的数据增强技术显著提高了所有测试的数据集的分类精度。此外当训练集中的样本数量非常少…

vue3+element Plus+ts 自定义主题色,以及生成主题色各种透明度

目录 思路 安装css-color-function【接收一个颜色值,生成不同的透明度】 获取后台配置的主题色或者使用ColorPicker修改主题色 最终结果如下 思路 本篇文章的主体思路是从element Plus官网引申而来。结合了我以前用vue2element-ui配置主题色生成透明度&#x…

fastApi笔记01-路径参数

路径参数 使用与 Python 格式化字符串相同的语法来声明路径"参数"或"变量" from fastapi import FastAPIapp FastAPI()app.get("/items/{item_id}") def read_item(item_id):return {"item_id": item_id} http://127.0.0.1:8000/i…

年薪最高开到160万,鸿蒙开发人才紧缺!

华为鸿蒙开发人才紧缺 如今,鸿蒙与安卓彻底切割时间似乎越来越近,一批嗅觉灵敏的互联网厂商已经完成或开始启动开发鸿蒙原生App,包括美团、网易、今日头条、钉钉等。随着头部App厂商启动鸿蒙(HarmonyOS)原生应用开发&…

智慧公厕管理系统:让城市智慧驿站更加智慧舒适

智慧公厕管理系统是城市智慧驿站中不可或缺的一部分,它通过全方位的信息化解决方案,为公共厕所的使用、运营和管理提供了一种智能化的方式。作为城市智慧驿站的重要组成部分,智慧公厕管理系统发挥着重要的作用,为城市社会民生提供…

提升生产3D渲染效率与品质:挖掘渲染农场的潜力

在当今数字化时代,3D渲染已成为跨越多个领域不可缺少的技术,无论是在建筑视觉化、电影制作、互动媒体还是虚拟现实领域。随着对动态、逼真视觉效果的需求不断增长,3D渲染农场因其出色的运算能力和经济性成为行业中的关键解决方案。本篇文章旨…

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出 本文章的第三弹,由于LangChain本文不支持直接使用通义千问API进行多轮对话和流式输出,但是自建知识库呢,还需要LangChain,因此我尝试了一下,自建知识库用LangCh…

Spring源码:手写SpringIOC

文章目录 一、分析二、实现1、版本1:实现Bean注入IOC容器,并从容器中获取1)定义BeanDefinition2)定义BeanDefinition实现类3)定义BeanDefinitionRegistry4)定义Beanfactory5)定义默认Beanfactor…

学会Requests库,就学会了Python接口自动化

在 Python 中进行网络请求是日常开发中的一个常见任务,而 requests 库是处理这类任务的一种强大工 具。requests 提供了简单而灵活的接口,使得发送 HTTP 请求和处理响应变得非常容易。在这篇文章中,我们将深入研究如何使用 requests 库执行各…