TypeScript -- 类

news2024/11/24 3:18:30

文章目录

    • TypeScript -- 类
    • TS -- 类的概念
      • 创建一个简单的ts类
      • 继承
    • public / private / protected-- 公共/私有/受保护的
      • public -- 公共
      • private -- 私有的
      • protected -- 受保护的
    • 其他特性
      • readonly -- 只读属性
      • 静态属性 -- static修饰
      • ts的getter /setter
      • 抽象类abstract

TypeScript – 类

JavaScript 通过构造函数实现类的概念,通过原型链实现继承。而在 ES6 中,我们终于迎来了 class。
TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。

TS – 类的概念

1. (Class):定义了一件事物的抽象特点,包含它的属性和方法
2. 对象(Object):类的实例,通过 new 生成
3. 面向对象(OOP)的三大特性:封装、继承、多态
 * 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。
 * 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
 * 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。
4. 存取器(getter & setter):用以改变属性的读取和赋值行为
5. 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
6. 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。
   抽象类中的抽象方法必须在子类中被实现
7. 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。
   接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

创建一个简单的ts类

class 定义类,使用 constructor 定义构造函数。
通过 new 生成新实例的时候,会自动调用构造函数。
class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

继承

使用 extends 关键字实现继承,子类中使用 super 关键字来调用父类的构造函数和方法。
class Animal {
    public name: string
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name); // 调用父类的 constructor(name)
    }
    sayHi() {
        return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
    }
}

public / private / protected-- 公共/私有/受保护的

public – 公共

'public'修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 'public'
class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private – 私有的

当成员被标记成private时,它就不能在声明它的类的外部访问,简单的说,只有
自己的class内部可以访问,即使是自己的'实例''继承的子类' 都无法访问被'private'
修饰的内容
class Animal {
    private name: string;
    constructor(name: string) {
        this.name = name // 能调用private修饰的
    }
    public getName(){
        return `我的名字${this.name}` // 能调用private修饰的
    }
}

class Cat extends Animal {
    constructor(name: string) {
        super(name)
    }
    getTest(){
        console.log(this.name) // 错误提示:属性“name”为私有属性,只能在类“Animal ”中访问。
    }
}

const dog= new Animal ('dog')
// dog.name = "Anne" // 提示错误:属性“name”为私有属性,只能在类“Animal”中访问。
console.log(dog.getName()) // 可以访问,打印结果:我的名字Anne

const cat = new Cat ('cat')
// cat.getTest() // 这里是错误的 因为Cat 类也无法使用继承父类的私有属性或者方法

protected – 受保护的

1.修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许
被访问的,简单的 说'子类是可以访问protected 修饰的' 实例是不可以的
2.修饰的是'constructor' 则当前类不能创建实例
class Animal {
    protected name: string
    protected constructor(name: string) {
        this.name= name
    }
    protected getName() {
        return this.name
    }
}
//protected 修饰constructor不能创建实例 报错提示:类“Animal”的构造函数是受保护的,仅可在类声明中访问。
// const cat = new Animal (18) 

class Dog extends Animal {
    constructor(name: string) {
        console.log(super.getName()) // 可以访问父类中的protected方法
    }
}
const dog= new Dog('Laura')

其他特性

readonly – 只读属性

可以使用readonly关键字将属性设置为只读的。
class Animal {
    readonly name;
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom'; // 错误 name是只读的

静态属性 – static修饰

1.'ts' 提供了 静态属性,属性和方法都是'static' 修饰
2.静态方法没法直接调用类里面的属性,当想要调用类里面的属性的时候需要声明静态的属性
class Animal {
    public static getName() {
        return Animal.name
    }
    private static name: string= 18
    constructor() {}
}
const p = new Animal()
// console.log(p.age) // age 是静态的属性 所以实例是不能访问的
// console.log(Animal.age) // 虽然有了类但是也是不能访问的,因为用了private修饰用public可以访问

ts的getter /setter

使用 getter 和 setter 来改变属性的赋值和读取行为
class Animal {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

抽象类abstract

1.抽象类是不允许被实例化的
2.继承抽象类的类必须去实现实例中的抽象类中的'抽象方法''抽象属性'
abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}

class Cat extends Animal {
    public sayHi() { // 实现抽象类的抽象方法
        console.log(`Meow, My name is ${this.name}`);
    }
}
let cat = new Cat('Tom');

在这里插入图片描述

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

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

相关文章

【ArcGIS Pro二次开发】(53):村规制表、制图【福建省】

这篇算是村规入库的一个延续。 村庄规划中有一些图纸是需要严格按照规范制图,或形成一定规范格式的。 这些图纸的制作基本算是机械式的工作,可以用工具来代替人工。 一、要实现的功能 如上图所示,在【村庄规划】组,新增了两个工…

虚拟机中的win10连不上网怎么办?

安装VMware 16和在其中安装win10系统参考这篇,很有详细且有用。 这篇主要记录我安装后发现虚拟机中win10连不上网了,查了好多,终于有一个方法弄好了。 1.打开主机的网络连接 双击所连接的网络的属性——>共享 ,将小勾勾全部勾…

UE5 动画蓝图模板(Animation Blueprint Template)

文章目录 前言准备内容创建动画蓝图使用动画蓝图模板示例1示例2总结前言 本文基于虚幻5.2版本介绍制作动画蓝图模板,本教程要求使用虚幻5.0及以上版本。 准备内容 使用第三人称游戏内容包,已添加可忽略。 选择第三人称游戏,添加到项目。 创建动画蓝图 在 Characters 文件…

前端vue2 全局水印效果

最近写项目遇到一个需求,全局显示水印,不管在哪个路由都要显示。 想要实现的效果: 新建shuiyin.js文件 // 定义水印函数 const addWatermark ({container document.body, // 水印添加到的容器,默认为 bodywidth "200px&…

java代码审计6之ssrf

文章目录 1、java支持的网络请求协议:2、Java 中能发起⽹络请求的类2.1、仅⽀持 HTTP/HTTPS 协议的类2.2、⽀持 sun.net.www.protocol 所有协议的类2.3、审计关键词 3、靶场3.1、漏洞代码13.2、ftp协议读取技巧3.3、无回显之探测内网3.4、无回显之探测文件 之前的文…

代码随想录额外题目| 链表 ●234回文链表●143重排链表 ●141环形链表

#234回文链表 简单方法很简单&#xff08;转成vector判断&#xff09;&#xff0c;难的方法有点难, 很巧妙 简单方法&#xff1a; bool isPalindrome(ListNode* head) {vector<int> vec;ListNode* curhead;while(cur){vec.push_back(cur->val);curcur->next;}i…

Window和linux使用samba实现文件共享

开发环境 开发平台&#xff1a;IMX6 虚拟机环境&#xff1a;Ubuntu16.04 Samba版本&#xff1a;3.4.17 目的 实现无论IMX6作为客户端还是服务端&#xff0c;IMX6系统下与window系统、ubuntu系统文件共享。 Samba移植 下载Samba源码,这个网上一搜大把&#xff0c;我用的版本…

C++ | 构造与析构

目录 普通构造 构造函数基础 显示调用与隐式调用 explicit关键字 初始化列表 拷贝构造 拷贝构造的写法 深拷贝和浅拷贝 拷贝构造的调用时机 返回值优化 析构函数 析构函数基础 析构函数的作用 注意事项 如果无法调用构造函数&#xff0c;那么就无法实例化出对象…

python进阶书籍的推荐 知乎,python入门后如何进阶

本篇文章给大家谈谈python进阶书籍的推荐 知乎&#xff0c;以及python入门后如何进阶&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 1、Python应该怎么学_python应该怎么学 想要学习Python&#xff0c;需要掌握的内容还是比较多的&#xff0c;对于自学的同…

java设计模式之模板模式(结合示例)

文章目录 &#x1f4cb;模板模式概念&#x1f4d6;组成要素&#x1f516;代码示例 &#x1f4c8;总结 &#x1f4cb;模板模式概念 在Java中&#xff0c;模板模式&#xff08;Template Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法框架&#xf…

Unity游戏源码分享-街机捕鱼2017版本

Unity游戏源码分享-街机捕鱼2017版本 完整的单机游戏 功能玩法&#xff0c;积分系统都已经齐全的了。 项目源码地址&#xff1a;https://download.csdn.net/download/Highning0007/88105459

音视频——帧内预测

H264编码(帧内预测) 在帧内预测模式中&#xff0c;预测块P是基于已编码重建块和当前块形成的。对亮度像素而言&#xff0c;P块用于44子块或者1616宏块的相关操作。44亮度子块有9种可选预测模式&#xff0c;独立预测每一个44亮度子块&#xff0c;适用于带有大量细节的图像编码&…

C语言中的函数(超详细)

C语言中的函数&#xff08;超详细&#xff09; 一、函数概述二、C语言中函数的分类1.库函数2.自定义函数三、函数的参数1.实际参数&#xff08;实参&#xff09;2.形式参数&#xff08;形参&#xff09;四、函数的调用1.传值调用2.传址调用五、函数的嵌套调用和链式访问1.嵌套调…

【手机】三星手机刷机解决SecSetupWizard已停止

三星手机恢复出厂设置之后&#xff0c;出现SecSetupWizard已停止的解决方案 零、问题 我手上有一部同学给的三星 GT-S6812I&#xff0c;这几天搞了张新卡&#xff0c;多余出的卡就放到这个手机上玩去了。因为是获取了root权限的&#xff08;直接使用KingRoot就可以&#xff0…

C++ 提高编程

C 提高编程 主要针对C泛型编程和STL技术 一、 模板 1、 概念 模板就是建立通用的模具&#xff0c;大大提高代码的复用性 模板特点 模板不可以直接使用&#xff0c;它只是一个框架 ​ 模板的通用并不是万能的 2、 函数模板 C 另一种编程思想为泛型编程&#xff0c;主要利用的…

ChatGPT如何帮助学生学习

​ 一些教育工作者担心学生可能使用ChatGPT作弊。因为这个AI工具能写报告和计算机代码&#xff0c;画出复杂图表……甚至已经有许多学校把ChatGPT屏蔽。 研究发现&#xff0c;学生作弊的主要原因是想考得好。是否作弊与作业和考试的打分方式有关&#xff0c;所以这与技术的便…

浅谈前端跨平台框架

概述 前端跨端实践是指在开发过程中&#xff0c;使用统一的代码库或框架来实现在不同平台上运行的应用程序。 这种实践旨在减少重复开发和维护成本&#xff0c;并提高开发效率和用户体验。 以下是一些前端跨端实践的方法和技术&#xff1a; 响应式设计&#xff08;Responsiv…

0-虚拟机补充知识

虚拟机克隆 如果想要构建服务器集群&#xff0c;没有必要一台一台的去进行安装&#xff0c;只要通过克隆就可以。 快速获得多台服务器主要有两种方式&#xff0c;分别为&#xff1a;直接拷贝操作和vmware的克隆操作 直接拷贝 将之前安装虚拟机的所有文件进行拷贝&#xff0…

聊聊单片机编程测量电机的电流

要测量电机的电流&#xff0c;可以使用电流传感器来实现。常见的电流传感器有霍尔效应传感器和电阻式传感器。 在单片机编程中&#xff0c;可以通过 ADC&#xff08;模拟数字转换器&#xff09;模块来实现对电流传感器输出电压的采样和转换。下面是一个简单的步骤&#xff1a;…

笔记本充满电后,充电器可以长期不拔,会有安全隐患吗?

笔记本充满电后&#xff0c;一直插着不拔 1.建议人在身边可以暂时不拔&#xff0c;偶尔还是要使用电池当笔记本电池充满之后&#xff0c;电脑会自动使用电源供电&#xff0c;不会使用电池供电 2.笔记本电池都带有电池保护机制&#xff0c;在电池充满电后会自动停止充电 3.现在…