【TypeScript】中定义与使用 Class 类的解读理解

在这里插入图片描述

目录

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

类的概念

类是用于创建对象的模板。他们用代码封装数据以处理该数据。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 类，以及对 class 类的主要运用解析。欢迎大家交流评论。

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ChatGPT“侵入”校园,教学评价体制受冲击，需作出调整

ChatGPT“侵入”校园,教学评价体制受冲击，需作出调整

北密歇根大学的教授奥曼在学生作业中发现了一篇关于世界宗教的“完美论文”。“这篇文章写得比大多数学生都要好......好到不符合我对学生的预期！”他去问ChatGPT：“这是你写的吗？”ChatGPT回答：“99.9%的概率是的。” ChatGPT“侵…
阅读更多...
Python入门三

Python入门三

目录： 内置库os内置库sys内置库文件处理内置库科学计算内置库日期与时间处理内置库json内置库正则表达式re内置库多线程threding内置库pythonlogging内置库pythonlogging高级使用venv环境管理pip环境管理常用第三方库yaml常用第三方库pymysql常用第三方库urllib3学…
阅读更多...
【微信小程序创作之路】- 小程序远程数据请求、获取个人信息

【微信小程序创作之路】- 小程序远程数据请求、获取个人信息

【微信小程序创作之路】- 小程序远程数据请求、获取个人信息 第七章 小程序远程数据请求、获取个人信息 文章目录 【微信小程序创作之路】- 小程序远程数据请求、获取个人信息前言一、远程数据请求1.本地环境2.正式域名 二、获取用户个人信息1.展示当前用户的身份信息2.获取用…
阅读更多...
启动RocketMQ报错

启动RocketMQ报错

说明：启动RocketMQ消费者时，报以下错误：java.lang.IllegalStateException：Failed to start RocketMQ push consumer. 解决：看下所有的监听器类，检查是不是有相同的消费者组名，注释掉其中一个即可…
阅读更多...
vue运行在IE浏览器空白报错SCRIPT1006: 缺少‘)‘ -【vue兼容IE篇】

vue运行在IE浏览器空白报错SCRIPT1006: 缺少‘)‘ -【vue兼容IE篇】

其他浏览器均正常，但是切换ie模式，打开空白，F12打开报错缺少‘)‘ ，如下图 在搜狗浏览器下点开报错：定格在crypto-js处 解决： 步骤一：使用npm安装babel-polyfill 依赖（已安装了可忽…
阅读更多...
访问者模式(Visitor)

访问者模式(Visitor)

访问者模式是一种行为设计模式，可封装一些作用于当前数据结构的各元素的操作，它可以在不改变数据结构的前提下定义作用于这些元素的新的操作。 Visitor is a behavior design pattern that encapsulates some operations that act on the elements of t…
阅读更多...
Stable Diffusion - SDXL 模型测试 (DreamShaper 和 GuoFeng v4) 与全身图像参数配置

Stable Diffusion - SDXL 模型测试 (DreamShaper 和 GuoFeng v4) 与全身图像参数配置

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/132085757 图像来源于 GuoFeng v4 XL 模型，艺术风格是赛博朋克、漫画、奇幻。 全身图像是指拍摄对象的整个身体都在画面中的照片&…
阅读更多...
基于arcFace+faiss开发构建人脸识别系统

基于arcFace+faiss开发构建人脸识别系统

在上一篇博文《基于facenetfaiss开发构建人脸识别系统》中，我们实践了基于facenet和faiss的人脸识别系统开发，基于facenet后续提出来很多新的改进的网络模型，arcFace就是其中一款优秀的网络模型，本文的整体开发实现流程与前文相同…
阅读更多...
wpf画刷学习1

wpf画刷学习1

在这2篇博文有提到wpf画刷， https://blog.csdn.net/bcbobo21cn/article/details/109699703 https://blog.csdn.net/bcbobo21cn/article/details/107133703 下面单独学习一下画刷； wpf有五种画刷，也可以自定义画刷，画刷的基类都…
阅读更多...
怎么修改pdf文件中的文字？分享几种编辑方法

怎么修改pdf文件中的文字？分享几种编辑方法

怎么修改pdf文件中的文字？PDF格式的文件通常具有很高的可读性和稳定性，但是如果需要修改其中的文字，就需要使用专门的PDF编辑器。本文将介绍几种PDF编辑的方法，下面就跟着我一起来看看这几款工具吧。 方法一：使用迅捷P…
阅读更多...
【Linux后端服务器开发】Reactor模式实现网络计算器

【Linux后端服务器开发】Reactor模式实现网络计算器

目录 一、Reactor模式概述 二、日志模块：Log.hpp 三、TCP连接模块：Sock.hpp 四、非阻塞通信模块：Util.hpp 五、多路复用I/O模块：Epoller.hpp 六、协议定制模块：Protocol.hpp 七、服务器模块：Server.…
阅读更多...
神策新一代分析引擎架构演进

神策新一代分析引擎架构演进

近日，神策数据已经推出全新的神策分析 2.5 版本，该版本支持分析模型与外部数据的融合性接入，构建全域数据融合模型，实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…
阅读更多...
React Native元素旋转一定的角度

React Native元素旋转一定的角度

mMeArrowIcon: {fontSize: 30, color: #999, transform: [{rotate: 180deg}]},<Icon name"arrow" style{styles.mMeArrowIcon}></Icon>参考链接&#xff1a; https://reactnative.cn/docs/transforms https://chat.xutongbao.top/
阅读更多...
HDFS集群滚动升级以及回滚相关

HDFS集群滚动升级以及回滚相关

HDFS集群滚动升级以及回滚相关 介绍不停机滚动升级非联邦HA集群联邦HA集群 停机升级--非HA集群HDFS集群降级和回滚异同点共同点不同点 HA集群降级&#xff08;downgrade&#xff09;注意事项 集群回滚操作 介绍 在hadoop v2中&#xff0c;HDFS支持namenode高可用&#xff08;H…
阅读更多...
windows编译zookeeker动态库供C++链接使用以及遇到的错误处理方法

windows编译zookeeker动态库供C++链接使用以及遇到的错误处理方法

windows下面C链接zookeeper资料不多&#xff0c;特此记录一下 编译环境VS 2015 一. 相关安装包安装下载 1. zookeeper zookeeper3.6.4 下载zip包解压即可 2. ant apache-ant-1.9.16 将包进行解压D:project\apache-ant-1.9.16&#xff0c;然后配置环境变量 新建 ANT_HOME 系…
阅读更多...
OpenSource - 一站式API服务

OpenSource - 一站式API服务

文章目录 概述功能模块运行启动Docker启动功能预览首页接口开发接口属性请求参数在线预览应用创建接口列表数据库类型限流熔断接口申请申请审批 概述 Crabc是低代码开发平台&#xff0c;企业级API发布管理系统&#xff0c;采用SpringBoot、JWT、Mybatis等框架和SPI插件机制实现…
阅读更多...
四、Unity中颜色空间

四、Unity中颜色空间

Unity中的设置 通过点击菜单Edit->Project Settings->Player页签->Other Settings下的Rendering部分进行修改&#xff0c;参数Color Space可以选择Gamma或Linear。 当选择Gamma Space时&#xff0c;Unity不会做任何处理。当选择Linear Space时&#xff0c;引擎的渲染…
阅读更多...
排序八卦炉之冒泡、快排【完整版】

排序八卦炉之冒泡、快排【完整版】

文章目录 1.冒泡排序1.1代码实现1.2复杂度 2.快速排序2.1人物及思想介绍【源于百度】2.2hoare【霍尔】版本1.初识代码2.代码分析3.思其因果 2.3挖坑版本1.初始代码2.代码分析3.思想比较 2.4指针版本1.初识代码2.代码分析3.问题探讨 2.5集体优化2.6极致优化2.7非递归版本1.初识代…
阅读更多...
【ConcurrentHashMap1.7源码】十分钟带你深入ConcurrentHashMap并发解析

【ConcurrentHashMap1.7源码】十分钟带你深入ConcurrentHashMap并发解析

ConcurrentHashMap1.7源码 四个核心要点 初始化PUT扩容GET Unsafe 初始化 五个构造方法 /*** Creates a new, empty map with the default initial table size (16).*/public ConcurrentHashMap() {}/*** Creates a new, empty map with an initial table size* accommodati…
阅读更多...
FFmpeg下载安装及Windows开发环境设置

FFmpeg下载安装及Windows开发环境设置

1 FFmpeg简介 FFmpeg&#xff1a;FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。项目的名称来自MPEG视频编码标准&#xff0c;前面的"FF"代表…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站