TypeScript之类

news2024/9/22 21:30:44

一、是什么

类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础

类是一种用户定义的引用数据类型,也称类类型

传统的面向对象语言基本都是基于类的,JavaScript 基于原型的方式让开发者多了很多理解成本

在 ES6 之后,JavaScript 拥有了 class 关键字,虽然本质依然是构造函数,但是使用起来已经方便了许多

但是JavaScript 的class依然有一些特性还没有加入,比如修饰符和抽象类

TypeScript 的 class 支持面向对象的所有特性,比如 类、接口等

二、使用方式

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

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

如下例子:

class Car {
    // 字段
    engine:string;

    // 构造函数
    constructor(engine:string) {
        this.engine = engine
    }

    // 方法
    disp():void {
        console.log("发动机为 :   "+this.engine)
    }
}

继承

类的继承使用过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也能够使用Animalmove方法

同样,类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写,通过super关键字是对父类的直接引用,该关键字可以引用父类的属性和方法,如下:

class PrinterClass {
   doPrint():void {
      console.log("父类的 doPrint() 方法。")
   }
}

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

修饰符

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

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

#私有修饰符

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

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

#受保护修饰符

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

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

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

#只读修饰符

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

除了实例属性之外,同样存在静态属性

#静态属性

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

class Square {
    static width = '100px'
}

console.log(Square.width) // 100px

1
2
3
4
5

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

#抽象类

抽象类做为其它派生类的基类使用,它们一般不会直接被实例化,不同于接口,抽象类可以包含成员的实现细节

abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法,如下所示:

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

1
2
3
4
5
6

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

class Cat extends Animal {

    makeSound() {
        console.log('miao miao')
    }
}

const cat = new Cat()

cat.makeSound() // miao miao
cat.move() // roaming the earch...

三、应用场景

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

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

由于组件需要传入 props 的类型 Props ,同时有需要设置默认 props 即 defaultProps,这时候更加适合使用class作为接口

先声明一个类,这个类包含组件 props 所需的类型和初始值:

// props的类型
export default class Props {
  public children: Array<React.ReactElement<any>> | React.ReactElement<any> | never[] = []
  public speed: number = 500
  public height: number = 160
  public animation: string = 'easeInOutQuad'
  public isAuto: boolean = true
  public autoPlayInterval: number = 4500
  public afterChange: () => {}
  public beforeChange: () => {}
  public selesctedColor: string
  public showDots: boolean = true
}

当我们需要传入 props 类型的时候直接将 Props 作为接口传入,此时 Props 的作用就是接口,而当需要我们设置defaultProps初始值的时候,我们只需要:

public static defaultProps = new Props()

Props 的实例就是 defaultProps 的初始值,这就是 class作为接口的实际应用,我们用一个 class 起到了接口和设置初始值两个作用,方便统一管理,减少了代码量

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

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

相关文章

关于我React项目热更新没起效果的问题

最近&#xff0c;我拉下来一个react项目&#xff0c;嗯&#xff0c;什么都可以运行&#xff0c;然后自己熟悉一下代码之后写一个自己页面&#xff0c;然后每修改一下代码我都要重新启动&#xff0c;然后网上搜一大串子我都没成功&#xff0c;而且人家原来代码里边也有热更新处理…

Python 常用内置函数详解(一):isinstance()函数----判断对象是否是类或子类

目录 一、功能二、语法和示例三、补充&#xff1a;issubclass()函数---判断是否是其他类的子类 一、功能 isinstance() 函数用于判断对象是否是类或者类型元组中任意类元素的实例。 二、语法和示例 语法结构如下&#xff1a; isinstance(object, classinfo) # ① object&a…

可可爱爱的polo领卫衣,女儿穿也太好看了吧

分享女儿的时尚穿搭—卫衣 Polo领半拉链设计 满满的学院风和学生气息 乖巧甜美的少女感瞬间突显 灰色经典宽松版型&#xff0c;不挑人穿的哦

购物车死了吗?拼多多的社交电商革命

亲爱的小伙伴们&#xff0c;大家好&#xff01;我是小米&#xff0c;今天要和大家聊一聊一个备受关注的话题&#xff1a;拼多多为什么没有购物车&#xff1f;这是一个网易产品经理面试题&#xff0c;但也是一个备受争议的话题。让我们一起来探讨一下吧&#xff01; 拼多多的购…

计算机网络-IP地址

文章目录 子网划分定长子网划分子网划分的方法子网掩码 可变长子网划分 无类别编址网络前缀路由聚合 特殊用途的IP地址专用网络地址链路本地地址运营商级NAT共享地址用于文档的测试网络地址 IP地址的规划和分配IP地址的规划和分配方法IP地址的规划和分配实例 子网划分 定长子网…

Leetcode刷题详解——三步问题

1. 题目链接&#xff1a;面试题 08.01. 三步问题 2. 题目描述&#xff1a; 三步问题。有个小孩正在上楼梯&#xff0c;楼梯有n阶台阶&#xff0c;小孩一次可以上1阶、2阶或3阶。实现一种方法&#xff0c;计算小孩有多少种上楼梯的方式。结果可能很大&#xff0c;你需要对结果模…

AD 过滤器

应用场景&#xff1a; 只想选择某一层的内容只选择布线只选择焊盘… 因此&#xff0c;有时候AD选中不了对象&#xff0c;也有可能是过滤器打开过滤掉了。

TFN 2.5G SDH传输分析仪 FT100-D300S

今天给大家带来一款TFN 2.5G SDH传输分析仪--TFN FT100-D300S. D300S SDH测试模块&#xff0c;是FT100智能网络测试平台产品家族的一部分&#xff0c;是一个坚固耐用、锂电池超长供电的传统PDH/SDH测试解决方案&#xff0c;支持2.5Gbps到2.048Mbps速率的传输链路测试。支持在线…

MA网络下,静态路由仅配出接口,不配下一跳是否可行

在MA网络模式下&#xff0c;静态路由只配置出接口&#xff0c;不配置下一跳地址是否可行 如下拓扑图&#xff1a; 如图所示&#xff0c;在R1上配置一条去往4.4.4.4的静态路由&#xff0c;此时如果静态路由只配置出接口&#xff0c;不配置下一跳地址&#xff1a; ip route-stat…

为什么 MySQL 选择 Repeatable Read 作为默认隔离级别

为什么 MySQL 选择 Repeatable Read 作为默认隔离级别&#xff1f; 我们知道&#xff0c;ANSI/ISO SQL-92 标准定义了 4 种隔离级别&#xff0c;从低到高依次为&#xff1a; 读未提交(Read Uncommitted)、读已提交(Read Committed)、可重复读(Repeatable Reads)、序列化(Serial…

如何使用grequests库

grequests是一个基于gevent的异步HTTP请求库&#xff0c;它允许同时发送多个HTTP请求并异步处理响应。以下是使用grequests库的基本步骤&#xff1a; 安装grequests库&#xff1a;可以使用pip命令在命令行中安装grequests库。 pip install grequests 导入grequests模块&#x…

实时电商数据采集API接口的分析和应用【附代码实例可加参数测试】

互联网的发展改变了我们的生活方式&#xff0c;也改变了企业商家们的营销方式&#xff0c;越来越多的企业商家把产品营销从线下转到线上&#xff0c;选择在线商城、移动APP、微信公众号等互联网工具进行营销活动。而随着营销模式的多元化和电子支付渠道的进一步发展&#xff0c…

通讯网关软件032——利用CommGate X2OPC实现OPC客户端访问Modbus TCP设备

本文介绍利用CommGate X2OPC实现OPC客户端连接Modbus TCP设备。CommGate X2OPC是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;SCADA系统上位机、PLC、设备具备Modbus TCP通讯接口&#xff…

使用 systemctl 管理 MySQL 服务

文章目录 前言1. 安装 MySQL1.1 下载安装包1.2 下载自动化脚本1.3 安装 MySQL 2. 配置 systemd2.1 配置含义介绍2.2 配置 systemd2.3 管理 MySQL 服务 前言 systemd 是 Linux 系统推出的初始化&#xff08;init&#xff09;系统&#xff0c;MySQL 使用 RPM 或者 Debian 包安装…

修改目录权限

CentOS8的目录结构&#xff1b; 虚拟机的克隆&#xff1b; 深克隆&#xff1b;完整克隆&#xff1b;浅克隆&#xff1b;终端命令格式及颜色&#xff1b;/etc/bashrc修改主机名&#xff1b;/etc/hostname linux内核版本号: JDK的版本号&#xff1b; JDK版本号分析&#xff1b; …

030.Python面向对象_类补充_只读属性

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

Android NDK开发详解之调试和性能分析的通过Android Studio调试

Android NDK开发详解之调试和性能分析的通过Android Studio调试 启用调试功能在设备上启用调试功能。运行可调试的 build 变体。 更改调试程序类型AutoJavaNative&#xff08;仅适用于 C/C 代码&#xff09;设备支持 run-as。设备启用了 ptrace。 Dual&#xff08;仅适用于 C/C…

电脑录像功能在哪?一文帮你轻松破解

“电脑录像功能在哪里呀&#xff1f;最近因工作上的原因&#xff0c;需要使用电脑来录像&#xff0c;但是找了一上午都找不到在哪里&#xff0c;眼看已经快没时间了&#xff0c;现在真的很急&#xff0c;希望大家帮帮我。” 电脑已经成为了人们生活和工作中必不可少的工具&…

YB4606最大2A电流的可编程过压保护开关IC

概述&#xff1a; YB4606的前端是过电压和过电压电流保护装置。它实现了宽输入电压范围从2.5Voc到40Voc。过电压阈值可以外部编程或设置为内部默认设置。的超低电阻集成电源路径nFET开关确保更好电池充电系统应用性能。它可以提供高达2A的电流&#xff0c;以满足电池供应系统。…