【 TypeScript 】对TypeScript中类的理解?应用场景?

1. 是什么

类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础
类是一种用户定义的引用数据类型,也称类类型
传统的面向对象语言基本都是基于类的,JavaScript基于原型的方式让开发者多了很多理解成本在ES6之后,JavaScript拥有了class关键字,虽然本质依然是构造函数,但是使用起来已经方便了许多
但是JavaScript的class依然有一些特性还没有加入,比如修饰符和抽象类TypeScript的class支持面向对象的所有特性,比如类、接口等

2. 使用方式

定义类的关键字为class ,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

  • 字段: 字段是类里面声明的变量。字段表示对象的有关数据。
  • 构造函数: 类实例化时调用,可以为类的对象分配内存。
  • 方法:方法为对象要执行的操作

如下例子:

class Car {// 字段engine:string;// 构造函数constructor(engine:string) {this.engine = engine}// 方法disp():void {console.log(" : "+this.engine)}}

2.1 继承

类的继承使用extends的关键字

class Animal {move(distanceInMeters: number = 0) {console.log(`Animal moved ${distanceInMeters}m.`); } 
}
class Dog extends Animal {bark() {console.log('Woof! Woof!'); } 
}
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Dog是一个派生类,它派生自Animal基类,派生类通常被称作子类,基类通常被称作超类Dog类继承了Animal类,因此实例dog也能够使用Animal类move方法
同样,类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写,通过super关键字是对父类的直接引用,该关键字可以引用父类的属性和方法,如下:

class PrinterClass {doPrint():void {console.log(" 父类方法 ")} 
}
class StringPrinter extends PrinterClass {doPrint():void {super.doPrint() // 调用父类的函数console.log(" 子类方法 ") } 
}

2.2 修饰符

可以看到,上述的形式跟ES6十分的相似,typescript在此基础上添加了三种修饰符:

  • 公共public:可以自由的访问类程序里定义的成员
  • 私有private:只能够在该类的内部进行访问
  • 受保护protect:除了在该类的内部可以访问,还可以在子类中仍然可以访问

2.3 私有修饰符

只能够在该类的内部进行访问,实例对象并不能够访问

class Father {private name:Stringconstructor(name:String){this.name =name}
}
const father =new Father('superrui')
father.name //报错 属性“name"为私有属性,只能在类“Father”中访问。

并且继承该类的子类并不能访问,如下图所示:

class Father {private name:Stringconstructor(name:String){this.name =name}
}class Son extends Father{say(){// 报错 属性"name"为私有属性,只能在类“Father”中访问。console.log(`my name is ${this.name}`)}
}

2.4 受保护的修饰符

跟私有修饰符很相似,实例对象同样不能访问受保护的属性,如下:

class Father{protected name:Stringconstructor(name:String){this.name =name}
}
const father =new Father('huihui')
//报错 属性“name“受保护,只能在类“Father”及其子类中访问
father.name

有一点不同的是protected成员在子类中仍然可以访问

class Father {protected name:Stringconstructor(name:String){this.name =name}
}class Son extends Father{say(){// 可以正常访问name 属性console.log(`my name is ${this.name}`)}
}

除了上述修饰符之外,还有只读修饰符

2.5 只读修饰符

通过readonly关键字进行声明,只读属性必须在声明时或构造函数里被初始化,如下:

class Father {readonly name:Stringconstructor(name:String){this.name =name}
}
const father =new Father('superrui')
father.name //报错 属性“name"为只读属性

2.6 静态属性

这些属性存在于类本身上面而不是类的实例上,通过static进行定义,访问这些属性需要通过类型.静态属性的这

种形式访问,如下所示:
class Square{static width='100px'
}
console.log(Square.width) //

上述的类都能发现一个特点就是,都能够被实例化,在typescript中,还存在一种抽象类

2.7 抽象类

抽象类做为其它派生类的基类使用,它们一般不会直接被实例化,不同于接口,抽象类可以包含成员的实现细节
abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法,如下所示:

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

这种类并不能被实例化,通常需要我们创建子类去继承,如下:

class Cat extends Animal {makeSound() {console.log('miao miao') }
}
const cat = new Cat()
cat.makeSound() // miao miao
cat.move() // roaming the earch...

3. 应用场景

除了日常借助类的特性完成日常业务代码,还可以将类(class)也可以作为接口,尤其在React工程中是很常用的,如下:

export default class Carousel extends React.Component<Props,State>{}

由于组件需要传入props的类型Props,同时有需要设置默认props即defaultProps,这时候更加适合使用class作为接口
先声明一个类,这个类包含组件props所需的类型和初始值

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

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

相关文章

C++ 生成随机数 srand 和 time 函数

C 生成随机数&#xff0c;通常采用 srand 和 time 函数来设置随机数种子。 一、 srand 函数&#xff1a; srand 函数用于设置伪随机数生成器的种子。伪随机数生成器是一个算法&#xff0c;它根据特定的种子生成看似随机的数值序列。在每次程序运行时&#xff0c;如果使用相同…

4种小众的能力,帮你更好地适应未来

新年伊始&#xff0c;又是一个全新的开始。 未来的社会究竟需要什么样的能力&#xff1f;这已经是一个很老的话题&#xff0c;已经有许许多多讨论了。但这其中&#xff0c;可能有一些是容易被人忽略的&#xff0c;或者不容易被注意到的。 我想跟你一起分享&#xff0c;我对这个…

python面向对象练习3

第一题 这是一个电商网站的库存管理问题&#xff0c;我们需要管理商品的库存信息。每个商品都有商品编号、名称和库存数量。 商品编号 商品名称 数量1 手机 102 电视 53 耳机 20现在有一个用户购买了商品编号为1的商品5件&#xff0c;需…

前端代码整洁与规范之CSS篇

一、代码整洁 1. 命名规范 CSS 类名的命名应该简洁清晰&#xff0c;能够准确描述元素的作用。避免使用无意义的名称&#xff0c;例如“a”、“b”等&#xff0c;而应该使用有意义的英文单词或单词缩写。同时&#xff0c;也要避免使用驼峰命名法和下划线命名法混杂使用&#x…

十大经典排序之选择排序

文章目录 概要整体架构流程代码实现小结 概要 选择排序是一种简单直观的排序算法&#xff0c;无论什么数据进去都是 O(n) 的时间复杂度。所以用到它的时候&#xff0c;数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。 整体架构流程 首先在未排序序列中找到…

NAND闪存市场格局或将发生变化

随着供应商有效减产&#xff0c;内存价格开始反弹&#xff0c;半导体内存市场终于呈现复苏迹象。从市场动态和需求变化来看&#xff0c;作为两大内存产品之一的NAND闪存正经历新一轮变革。 供应商不断采取行动&#xff0c;提高价格并调整产能利用率。自2023年第三季度以来&…

Live800:企业如何与客户建立长期、稳定关系,实现双赢

在当今的商业环境中&#xff0c;企业不仅需要吸引新客户&#xff0c;更需要与现有客户建立长期、稳定的关系。这样的关系可以带来持续的收入&#xff0c;提高企业的利润性。然而&#xff0c;如何建立和维护这样的关系呢&#xff1f;文章将从三个方面进行深入探讨&#xff1a;提…

SpringBoo和vue项目blob传参未生效

学无止境&#xff0c;气有浩然 文章目录 前言展示问题代码问题解决打完收工&#xff01; 前言 工作里做的一个小工具&#xff0c;axios传参&#xff0c;使用FormData传参到后端&#xff0c;没有办法映射除字段值&#xff0c;但是从控制台看&#xff0c;传的字段值都是正确的&a…

Milvus向量数据库检索

官方文档&#xff1a;https://milvus.io/docs/search.md   本节介绍如何使用 Milvus 搜索实体。   Milvus 中的向量相似度搜索会计算查询向量与具有指定相似度度量的集合中的向量之间的距离&#xff0c;并返回最相似的结果。您可以通过指定过滤标量字段或主键字段的布尔表达…

Javaweb-MyBatis

一、概念 MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC开发 MyBatis本是Apache的一个开源项目iBatis&#xff0c;2010年这个项目由apache software found迁移到了google code&#xff0c;并且改名为MyBatis。2013年11月迁移到Github 持久层 负责将数据到保存到数…

科技云报道:两会热议的数据要素,如何拥抱新技术?

科技云报道原创。 今年全国两会上&#xff0c;“数字经济”再次成为的热点话题。 2024年政府工作报告提到&#xff1a;要健全数据基础制度&#xff0c;大力推动数据开发开放和流通使用&#xff1b;适度超前建设数字基础设施&#xff0c;加快形成全国一体化算力体系&#xff1…

低代码与数字化工具:重塑软件开发的新范式

随着信息技术的飞速发展&#xff0c;软件开发已成为推动数字化转型的核心力量。在这个变革的时代&#xff0c;低代码与数字化工具逐渐崭露头角&#xff0c;它们不仅简化了开发过程&#xff0c;还大大提高了开发效率&#xff0c;成为推动软件开发领域变革的重要力量。 低代码&am…

面试经典-11-接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,…

2024自动化测试的痛点与发展趋势!

前几天在技术交流群里&#xff0c;大家讨论了很多关于自动化测试落地面临的痛点和如何创造价值的话题&#xff0c;颇有感触。 自动化测试这个话题&#xff0c;从出现到在国内大规模开展实践&#xff0c;有很长的一段时间了。早期&#xff0c;大家对自动化测试的理解和使用目的…

java:学生管理系统

一、介绍 该功能是实现学生信息的添加&#xff0c;查看&#xff0c;修改&#xff0c;删除以及退出系统的简单操作。 二、代码实现 public class Student {private String sid;//学号private String name;//姓名private String age;//年龄private String address;//地址publi…

通过NFS 实现windows共享linux目录

一、配置WIndows 1.进入程序和功能 2.勾选NFS服务&#xff0c;安装客户端 二、安装NFS Service 在ubuntu 1.查看apt源是否存在nfs服务端安装包 sudo apt-cache madison nfs-kernel-server 2. 安装nfs-kernel-server sudo apt install nfs-kernel-server 3.建立共享目录&…

Compose UI 之 BottomAppBar 底部应用栏

BottomAppBar 底部应用栏 BottomAppBar 是一个在 Jetpack Compose 中用于创建底部应用栏的组件。它提供了一个高度可定制且功能丰富的底部导航解决方案。 它的使用方式与 TopAppBar 类似。下面的图是 BottomAppBar 的基本样式图。 常见使用场景 BottomAppBar 在应用中常用于…

代码随想录算法训练营第22天 | 235. 二叉搜索树的最近公共祖先、701. 二叉搜索树中的插入操作、450. 删除二叉搜索树中的节点

235. 二叉搜索树的最近公共祖先 题目链接 235. 二叉搜索树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 思路 因为二叉搜索树是有序的&#xff0c;那么就可以向二分法一样去有向的搜索。 //---------------------------递归法---------------------------// cl…

人工智能课题、模型源码

人工智能研究生毕业&#xff5e;深度学习、计算机视觉、时间序列预测&#xff08;LSTM、GRU、informer系列&#xff09;、python、人工智能项目代做和指导&#xff0c;各种opencv图像处理、图像分类模型&#xff08;vgg、resnet、mobilenet、efficientnet等&#xff09;、人脸检…

ESD静电测试闸机-筑成电子厂防静电管理的第一道防线

ESD静电测试闸机是一种用于防止静电对电子产品和设备造成损害的重要设备。在电子厂等对静电敏感的场所&#xff0c;ESD静电测试闸机扮演着防静电管理的第一道防线的角色&#xff0c;确保生产环境的安全和产品质量的稳定。本文将从静电监测和消除、刷卡/身份证认证、指纹/人脸识…