玩转 TypeScript 中【class类】的定义与使用方法解读。

news2024/11/24 22:58:20

在这里插入图片描述

目录

    • `类的概念`
    • `类的继承` ：
    • `类的存取器`：
    • `类的静态方法与静态属性`：
    • `类的修饰符`：
    • 参数属性：
    • `抽象类`：
    • `类的类型`:

类的概念

类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的类建立在原型上，但也具有某些语法和语义未与 ES5 类相似语义共享。

TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

关于ES6的 Class 类语法概念，在本章节不做过多阐述，感兴趣的的小伙伴 可以 点击这里，了解查看更多 ES6中有关Class的语法概念使用。

本章节还是主要给大家带来，在 TypeScript 中，如何去定义 Class 【类】，以及如何去使用 类身上的 属性及方法。

定义Class ： 使用 Class 定义类，使用 constructor 定义构造函数。

在 原JavaScript 中

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
new Rectangle(1, 2)   //实例化，并传入参数

上面的是，在JS中，Class 类的常用定义方式。

而在TypeScript 中定义 Class 类：

class identity {
    name: string;   //TS 中需要对要接受的参数初始化
    age: number;
    constructor(name: string, age: number) {    //为要传入的参数指定类型。不指定类型，默认为Any 类型。
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}岁`;
    }
}
let a = new identity('张三', 20);
console.log(a);    //Animal {name: '张三', age: 20}

console.log(a.sayHi());  //我叫 张三,今年20岁

类的继承 ：

使用 extends 关键字实现继承，子类中使用 super() 关键字来调用父类的构造函数和方法。

class identity {   //父类
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}岁`;
    }
}

//子类
class copy extends identity {   
    //由于我继承了 identity ，在 identity 身上已经存在了 name 和 age
    // 所以 在 copy 类里面就不用再定义 name 和 age了,继承后可以直接读取到,所继承类身上的属性方法。
    constructor(name: string, age: number) {
        super(name, age)              // super 继承
    }
}
let c = new copy("李四", 30) //实例化子类
console.log(c);  //copy {name: '李四', age: 30}

//可以调用父类身上的方法。
console.log(c.sayHi());   //我叫 李四,今年30岁

类的存取器：

使用 getter 和 setter 可以改变属性的赋值和读取行为。

存取器的作用：可以用来更专注化的控制对，对象属性方法的读取和修改。

class identity {   //父类
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    //设置读取器=》，用来读取数据
    get names() {
        return "getter" + `我叫 ${this.name},今年${this.age}岁`;
    }

    //设置存储器，用来修改数据
    set names(val: string) {
        console.log("这是set 传入进来的值", val);
    }
}

let a = new identity("张三", 18);
console.log(a.names);  //当我们访问读取器的时候会触发get，会直接得到返回的值 : getter张三18
a.names = "李四" //当我们为存储器赋值的时候，会触发 set 并且会把，赋值，当成参数，传递给 set。

使用 存储器的好处：对属性方法的读取和修改，更加的专业化，不同的存取器，负责不同的逻辑处理，这里的存取器，也相似于 Vue 中的 computed 计算属性。 以及 Object.defineProperty()的 get 和 set 方法 类似。

类的静态方法与静态属性：

有时候，我们希望 类中所定义的属性或者方法，不想被实例化后的对象读取，不需要实例化，那么，我们就可以通过 static 关键字，来把 属性或方法定义为静态成员来实现。

class identity {
    static username: string = "asdasd";    //将 username  通过 static 设置为静态属性。并为其赋值。
    name: string
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        console.log(this.username);  //也会报错，类的内部也不能拿取 username
    }

    //将方法设置为 静态方法
    static bolkfn() {
        console.log("静态方法");
    }
}



let a = new identity("张三", 18);

console.log(identity.username);  // 类自身访问静态属性，不会报错

console.log(a.username);      //实例对象访问静态属性，会报错 ：属性“username”在类型“identity”上不存在。


console.log(identity.bolkfn());  // 类自身访问静态方法，不会报错

console.log(a.bolkfn());      //实例对象访问静态方法，会报错 ：属性“bolkfn”在类型“identity”上不存在。

扩展知识点：

在ES7 中有一些关于类的新特性提案，TypeScript 也实现了它们，这里做一个简单的介绍。

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，而在 ES7 提案中可以直接在类里面定义：

class Animal {
  name = 'Jack';  //可以直接在类中定义，非必须要在 constructor 通过 this.name 来定义。

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack 可以直接读取到name属性

类的修饰符：

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

  • public :修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问，虽然 子类 可以通过 extends 继承它的私有属性，但是却无法读取。
  • protected : 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的，也依然无法在外部访问

例：
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 ：

class Animal {
    private name;   //设置私有化
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(Animal.name);  //只能自身读取

console.log(a.name);  //报错
a.name = 'Tom';   //报错

即使通过子类继承，在子类继承中也不能访问读取

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //报错，子类继承中也无法访问私有化数据
  }
}

当构造函数修饰为 private 时，该类 不 允许被继承或者实例化：

class Animal {
    public name;
    private constructor(name) {  //构造函数 private 私有化
      this.name = name;
    }
  }
  class Cat extends Animal {  //报错不能被继承
    constructor(name) {
      super(name);
    }
  }
  
  let a = new Animal('Jack');  //报错，不应该被实例化

protected：

当使用 protected 修饰，则 允许 在子类中访问：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //不会报错,子类继承中可以访问
  }
}

当构造函数修饰为 protected 时，该类只允许被继承：

class Animal {
    public name;
    protected constructor(name: string) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
}

let a = new Animal('Jack');  //报错，因为  Animal 只允许被继承。

参数属性：

上面，介绍的三种 修饰符，其实还有一种简洁的写法，被称为 属性参数写法；修饰符还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。

class Animal {
    // public name;   //可以省略此处
    protected constructor(public name: string) {  //  private   protected  同理
        // this.name = name;   //可以省略此处
    }
}

readonly : 只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';    //会报错，因为属性为 只读的，不能修改。

注意;
注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

抽象类：

概念：抽象类的概念是，专注于用来为子类服务的，抽象类是不允许被实例化的，只能通过被子类继承。
语法：abstract 关键字用于定义抽象类和其中的抽象方法

abstract class Animal {  // 通过 abstract  定义一个抽象类
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();    //并且在抽象类里面，还可以定义 抽象方法
}

let a = new Animal('Jack');  //会报错，抽象类不能被实例化

注意：抽象类中的抽象方法或属性必须被子类实现，否则在子类继承抽象类后，实例化的时候会报错

abstract class Animal {  // 通过 abstract  定义一个抽象类
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi() { };    //并且在抽象类里面，还可以定义 抽象方法
}


class B extends Animal {
    public sayHi() {   //抽象类中，所定义抽象方法，必须要在子类中实现。
        console.log("继承Animal");

    }
}
let isB = new B("")

类的类型:

给实例化的类，定义类型，简述而言，就是定义的 class 类，还可以被用来当做 一种类型，赋值给实例化的对象，用来校验类的数据完整性。

案例说明

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

// 把 Animal  当做一种类型，用来校验实例化对象 a 的规范性。
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

本章节，主要给大家介绍了，在 TypeScript 中，如何去声明 class 类，以及对 类的主要运用解析。欢迎大家交流评论。

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

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

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

相关文章

java.lang.NoSuchMethodError异常原因及解决办法

java.lang.NoSuchMethodError异常原因及解决办法

java.lang.NoSuchMethodError异常原因及解决办法 第一种简单的情况就是本类中需要调用的方法名称错误，这种情况就需要去检查方法名称是否正确，避免调用的方法和本类中的有相同的名称。 第二种情况就是jar包的问题 可能是jar包没有导入进来或者jar包导入…
阅读更多...
HTTP第17讲——Cookie机制

HTTP第17讲——Cookie机制

Cookie的诞生背景 HTTP 是“无状态”的，这既是优点也是缺点。优点是服务器没有状态差异，可以很容易地组成集群，而缺点就是无法支持需要记录状态的事务操作。 后来发明的 Cookie 技术，给 HTTP 增加了“记忆能力”。 什么是Cookie…
阅读更多...
图灵奖得主Geoffrey Hinton：我的五十年深度学习生涯与研究心法

图灵奖得主Geoffrey Hinton：我的五十年深度学习生涯与研究心法

本文介绍了Hinton非常坦诚地分享了自己的学术生涯，深度学习的未来和研究心得。 他从未正式上过计算机课程，本科在剑桥大学读的是生理学和物理学，期间曾转向哲学，但最终拿到的却是心理学方向的学士学位；他曾因为一度厌学…
阅读更多...
在OK3588的Ubuntu系统上安装Firefox浏览器

在OK3588的Ubuntu系统上安装Firefox浏览器

文章目录 概要配置上网环境安装的具体命令 概要 因为Ubuntu系统里面没有安装浏览器，为了方便使用，提高工作效率，我们安装一下Firefox浏览器。 Firefox是一款适用于Ubuntu系统的免费和开源的Web浏览器。由Mozilla Foundation和其子公司Mozil…
阅读更多...
818. 数组排序

818. 数组排序

链接： 链接 题目： 给定一个长度为 nn 的数组 aa 以及两个整数 ll 和 rr，请你编写一个函数，void sort(int a[], int l, int r)，将 a[l]∼a[r]a[l]∼a[r] 从小到大排序。 输出排好序的数组 aa。 输入格式 第一行包含三个…
阅读更多...
TiDB简述及TiKV的数据结构与存储 | 京东物流技术团队

TiDB简述及TiKV的数据结构与存储 | 京东物流技术团队

1 概述 TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 的融合型分布式数据库产品，具备水平扩容或者缩容、金融级高可用、实时 HTAP、…
阅读更多...
景区导航小程序解决方案-便捷化游览体验

景区导航小程序解决方案-便捷化游览体验

系统背景 景区导航小程序是一种基于移动设备的智能化导航系统，旨在为游客提供更加便捷、准确的导航服务。随着人们生活水平的提高，旅游业得到了快速发展，然而，在景区游览过程中，游客往往需要花费大量时间和精力来寻找…
阅读更多...
Java- IO 及其相关面试题

Java- IO 及其相关面试题

目录 一、前言二、Java IO 概述输入和输出流2.1.1 定义2.1.2 代码示例 2.2 字节流和字符流2.2.1 定义2.2.2 代码示例 2.3 标准IO和NIO 三、字节流和字符流3.1. 字节流：InputStream和OutputStream3.1.1. FileInputStream和FileOutputStream3.1.2. ByteArrayInputStre…
阅读更多...
【unity之IMGUI实践】单例模式管理面板对象【一】

【unity之IMGUI实践】单例模式管理面板对象【一】

👨‍💻个人主页：元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏：uni…
阅读更多...
30页PPT，IPv6技术一次梳理清

30页PPT，IPv6技术一次梳理清

上午好，我的网工朋友。 IPv6技术在以前的文章里，已经被老杨总说的很明白了：《都到2023年了，为啥IPv6还一直无法普及？ 》 但是IPv6的过渡技术，好像一直没给你补上。 你知道IPv4向IPv6过渡的步骤有哪些吗&…
阅读更多...
在B1中定义一个纯虚函数pvf()，重做练习1-4，并解释其结果

在B1中定义一个纯虚函数pvf()，重做练习1-4，并解释其结果

运行代码： //在B1中定义一个纯虚函数pvf()，重做练习1-4，并解释其结果。 #include"std_lib_facilities.h" //---------------------------------------------------------------------- //定义B1类。 class B1 { public:virtual vo…
阅读更多...
《Linux运维总结：Centos7.6之OpenSSH9.0升级版本至9.3》

《Linux运维总结：Centos7.6之OpenSSH9.0升级版本至9.3》

一、环境信息 说明：当前环境openssh版本为9.0p1，是从7.4p1版本直接升级上来的，先需要将9.0p1版本升级至9.3p1版本。如下所示，则为源ssh和目标ssh的信息。 -操作系统openssh版本openssh安装目录openssh安装方式openssl版本openssl…
阅读更多...
你感到迷茫吗？【笔记】

你感到迷茫吗？【笔记】

你感到迷茫吗？【笔记】 前言推荐你感到迷茫吗？原通工19级-西电电院(电子信息雷达方向-专硕三年)原计科19级-西邮计院(软件工程方向-学硕三年)原计科19级-北京360(月薪-1w)现计科20级（考研：~~不公开处理~~ 物联网）对后来…
阅读更多...
Jmeter 分布式压测，你的系统能否承受高负载？

Jmeter 分布式压测，你的系统能否承受高负载？

‍你可以使用 JMeter 来模拟高并发秒杀场景下的压力测试。这里有一个例子，它模拟了同时有 5000 个用户，循环 10 次的情况‍。 请求默认配置 如果你想学习性能测试，我这边给你推荐一套视频，这个视频可以说是B站播放全网第一的性能测…
阅读更多...
在电脑上如何调整照片kb大小？怎么压缩图片不改变清晰度？

在电脑上如何调整照片kb大小？怎么压缩图片不改变清晰度？

当我们使用图片时，如果需要压缩图片大小该怎么处理？可以使用图片压缩工具在线操作的方法解决，今天就分享一款图片在线处理工具，打开浏览器即可完成图片压缩（https://www.yasuotu.com），下面是详细…
阅读更多...
LLaMA模型指令微调 字节跳动多模态视频大模型 Valley 论文详解

LLaMA模型指令微调 字节跳动多模态视频大模型 Valley 论文详解

Valley: Video Assistant with Large Language model Enhanced abilitY 大家好，我是卷了又没卷，薛定谔的卷的AI算法工程师「陈城南」~ 担任某大厂的算法工程师，带来最新的前沿AI知识和工具，包括AI相关技术、ChatGPT、AI绘图等&…
阅读更多...
性能测试工具的重要性及其应用

性能测试工具的重要性及其应用

在现代的软件开发过程中，性能测试是不可或缺的一环。性能测试旨在评估系统或应用程序在特定负载条件下的性能表现，帮助开发团队识别潜在的性能瓶颈和问题。而性能测试工具作为辅助工具，发挥着至关重要的作用。以下是性能测试工具的重要性及其…
阅读更多...
vue 2.0 的使用

vue 2.0 的使用

day01 1. Vue简介 一套用于构建用户界面的 <font colorred>渐进式框架</font> 2. 初识Vue 2.1 搭建Vue开发环境 第一步&#xff1a;去<a href"https://v2.cn.vuejs.org/">Vue2官网</a>&#xff0c;下载依赖包。 第二步&#xff1a;在 …
阅读更多...
教你如何优雅的管理UDP接口——Python

教你如何优雅的管理UDP接口——Python

设计思路主要参考了Flask框架&#xff0c;通过 route() 装饰器来告诉 UDE触发函数的 URL&#xff0c;通过蓝图接口进行分类管理。 ude.py 代码内容 import socket import msgpackclass UDE:def __init__(self):self.urls {}# 回调函数def Callback(self, packet):try:data …
阅读更多...
vue中elementUI表单循环验证

vue中elementUI表单循环验证

进行验证的步骤 1、表单el-form 添加 :model"form" ref"form" :rules"rules"&#xff0c;注意是 :model"form"不是v-model&#xff0c;而后每个el-form-item绑定prop 2、不循环的示例在官网可看 3、循环表单的验证&#xff1a;3-1、e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023