typescript 高级类型-class类详解

class 简介

typescript 全面支持es2015中引入的class关键字,并为其添加了类型注解,和其它语法(比如,可见性修饰符等),
class 基本使用,如下
在这里插入图片描述
tips
1. 根据ts中的类型推论,可以知道Person的实例对象p的类型是Person
2. ts中的class,不仅提供了class的语法功能,也作为一种类型存在

class 初始化

ts中class初始化有两种,一种指定类型,一种直接赋初始值

	//给类成员指定类型class Person {name: stringage: number}//直接赋初始值,让类成员类型推论,省略类型注解class Animal {type = '小狗'age = 18//age:number=18 ??? 这里当然能这样写,但是能使用类型推论,为什么还要手写呢?}

总结: 在ts中创建类和js中一样,都使用class关键字来创建,同样的,创建实例对象都通过new关键字实现,
添加类成员,有两种方法

  1. 给类成员指定类型
  2. 省略掉类型注解,直接给类赋值,让成员通过类型推论确认类型

class 构造函数 constructor

构造函数(Constructor)是一种特殊的方法,用于在创建新对象时初始化类。在TypeScript(和JavaScript)中,构造函数是类的默认方法,当你创建一个类的新实例时,它会被自动调用。

构造函数通常以类的名称命名,并且没有返回类型注释。在TypeScript(和ES6 JavaScript)中,构造函数可以通过使用 constructor 关键字来定义

示例如下

class Person {name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}
}
  1. 成员初始化(比如,age:number)后才可以通过this.age来访问实例成员
  2. 需要为构造函数指定类型注解,否则会被隐式推断为any;构造函数不需要返回值类型

class 实例方法

在TypeScript(及其基础语言JavaScript)中,类的实例方法是定义在类中的方法,它们被用于操作类的实例。这些方法可以使用this关键字引用类的实例。

实例方法是在类的定义中定义的方法,而不是在类的实例上直接定义的方法。这意味着每个类的实例都有自己的实例方法副本。

class Person {name: stringage: number//实例方法的类型注解(参数和返回值)与函数用法相同sayHello() {// 实例方法通过this访问成员变量console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`)}constructor(name: string, age: number) {this.name = namethis.age = age}
}

tips 实例方法的类型注解(参数和返回值)与函数用法相同

每个实例都拥有实例方法的副本
如下,使用new关键字,创建两个实例对象,他们都能调用自己的sayHello方法

在这里插入图片描述

class 类继承 extends 继承父类

在TypeScript(及其基础语言JavaScript)中,类继承是一种实现代码重用和抽象的重要技术。通过类继承,您可以创建一个新类(子类),该类从已存在的类(父类)继承属性和方法。这样,子类就可以重用父类的代码,同时还可以添加或覆盖父类的特性以满足特定的需求。

tips js中只有extends ,而implements是ts提供的

实例如下
在这里插入图片描述
如上实例,当dog类继承了anilmal类时,dog类就有了anilmal类的所有方法,
注意,如果类继承时,父类有构造函数时,需要使用super关键字来调用父类的方法
上面super关键字调用父类的构造函数时没有传参是因为父类构造函数本身没有形参

class 类继承 implements (实现接口)

在TypeScript中,一个类可以实现一个接口。这意味着类需要定义接口中所有的方法和属性。这种技术在JavaScript中也被广泛使用,因为它允许开发者创建具有特定行为和属性的对象。

示例如下

// 定义一个Animal接口,包含两个属性:name和greet  
interface Animal {  // name是一个字符串类型的属性  name: string;  // greet是一个没有返回值(void)的方法  greet(): void;  
}  // 定义一个Dog类,这个类实现了Animal接口  
class Dog implements Animal {  // name是Dog类的属性,与Animal接口中的name对应  name: string;  // 构造函数,用于创建Dog类的实例并初始化name属性  constructor(name: string) {  this.name = name;  }  // greet是Dog类的方法,与Animal接口中的greet对应  greet() {  // 该方法用于在控制台打印一条问候语,包含实例的name属性  console.log(`Hello, I am ${this.name}.`);  }  
}
  1. 通过implements 关键字让class 实现接口
  2. Dog类实现接口Animal意味着,Dog类中必须提供Animal中指定的所有方法和属性

class 成员的可见性修饰符 public/protected/private

在TypeScript中,类成员的可见性修饰符用于控制类成员的访问权限。以下是TypeScript中可用的可见性修饰符:

  1. public:成员是公共的,可以在任何地方访问。这是默认的可见性修饰符。
  2. protected:成员是受保护的,只能在类本身和它的子类中访问。
  3. private:成员是私有的,只能在类本身中访问。

public 表示公有的,公开的,公有成员可以被任何地方访问,默认可见性

// 定义一个名为 Animal 的类  
class Animal {  // 定义一个公共属性 name,类型为字符串  // 这里 public 是默认修饰符,可以省略不写  public name: string;   // 定义一个构造函数,接收一个字符串参数 name  constructor(name: string) {  // 将传入的参数 name 赋值给属性 name  this.name = name;  }  
}  // 定义一个名为 Dog 的类,它继承自 Animal 类  
class Dog extends Animal {  // 定义一个公共属性 species,类型为字符串  public species: string;  // 定义一个构造函数,接收两个参数:name 和 species  constructor(name: string, species: string) {  // 使用 super 关键字调用父类 Animal 的构造函数,传入参数 name  super(name);  // 将传入的参数 species 赋值给属性 species  this.species = species;  }  
}  // 创建一个新的 Animal 实例,并传入参数 "xiaohei"  
let animal = new Animal("xiaohei");  // 创建一个新的 Dog 实例,并传入参数 "xiaobai" 和 "dog"  
let dog = new Dog("xiaobai", "dog");  // 打印 animal 实例的 name 属性值,输出 "xiaohei"  
console.log(animal.name);  // 打印 dog 实例的 name 属性值,输出 "xiaobai"  
console.log(dog.name);

可以看到,Animal 被public修饰符修饰的species属性成员,可以在任何地方被访问,

protected 受保护的,仅对其声明所在的类和子类中(非实例对象)可见

在这里插入图片描述
如上,可以看见,当我将父类Anilmal的属性name 使用protected 修饰符修饰后,实例对象就不能访问该属性了

tips : 当然子类可以通过实例方法来修改protected 修饰符修饰的属性,因为那是在内部通过this修改

  1. 在类属性或方法前面添加protected关键字,来修饰该属性或,方法是受保护的
  2. 在子类的方法内部可以通过this来访问父类中受保护的成员,但是对实例不可见!!!

private: 表示私有的,只在当前类中可见,对实例对象以及子类也是不可见的。

在这里插入图片描述
tips

  1. 在类属性或方法前面添加 private 关键字,来修饰该属性或方法是私有的
  2. 私有的属性或方法只在当前类中可见,对子类和实例对象也都是不可见的!

class 总结

  1. 成员初始化(比如,age:number)后才可以通过this.age来访问实例成员
  2. 需要为构造函数指定类型注解,否则会被隐式推断为any;构造函数不需要返回值类型

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

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

相关文章

【云计算】虚拟私有云 VPC

虚拟私有云 VPC 1.前言1.1 基本介绍1.2 VPC 的作用1.3 VPC 的适用人群 2.VPC 基本概念2.1 VPC 相关基本概念2.2 其他相关基本概念 3.VPC 通信场景3.1 VPC 内部互通3.2 VPC 间互通3.2.1 对等连接3.2.2 Transit Gateway 或者云联网 3.3 访问 Internet3.3.1 Internet 网关3.3.2 NA…

阿里云服务器价格更新,轻量应用服务器108元,云服务器182.04元起

阿里云服务器价格更新了,不同时期阿里云服务器的租用价格不同,目前阿里云在官网活动中新增加了一款经济型e实例规格的云服务器,现在购买阿里云轻量应用服务器最低为108元,购买云服务器最低为182.04元,换算到每天只要0.…

2023.9.8 基于传输层协议 UDP 和 TCP 编写网络通信程序

目录 UDP 基于 UDP 编写网络通信程序 服务器代码 客户端代码 TCP 基于 TCP 编写网络通信程序 服务器代码 客户端代码 IDEA 打开 支持多客户端模式 UDP 特点: 无连接性:发送端和接收端不需要建立连接也可相互通信,且每个 UDP 数据包都…

自定义实现:头像上传View

看看效果: 非常简单:代码直接贴在下面,有需要的直接带走 /*** 带有自定义字体TextView。*/ class EditAvatarUploadView : AppCompatTextView {lateinit var paint:Paintconstructor(context: Context) : this(context, null){iniPaint()}con…

字符串函数和内存函数详解(1)

🐵本文将通过函数原型、用法、模拟实现等多个方面全面讲解字符串的库函数 1.strlen📚 1.1函数用法📗 strlen函数用来计算字符串的长度,它会从接收到字符的地址开始读取直到遇到\0,每读取一个非\0的字符长度1&#xff…

Harmony Codelab 样例—弹窗基本使用

一、介绍 本篇 Codelab 主要基于 dialog 和 button 组件,实现弹窗的几种自定义效果,具体效果有: 1. 警告弹窗,点击确认按钮弹窗关闭。 2. 确认弹窗,点击取消按钮或确认按钮,触发对应操作。 3. 加载…

Java基于SpringBoot的在线考试系统的研究与实现(附源码,教程)

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 第一章第二章.主要技术第三章第四章 系统设计4.1功能结构4.2 数据库设计4.2.1 数据库E/R图4.2.2 数…

数据变换:数据挖掘的准备工作之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据…

《Python趣味工具》——自制emoji3

今日目标 在上次,我们绘制了静态的emoji图。并且总结了turtle中的常用函数。 本次我们将尝试制作一个动态的emoji,让你的表情包动起来! 文章目录 一、动画原理:二、制作动画:1. 修改eyes_black()函数:2. 绘…

软考和PMP哪个含金量更高?

软考中,能和pmp一起来比较的是软考高项,软考高级信息系统项目管理师,和PMP的共同点,基本来说都是项目管理类的证书。本质也都是适用于项目经理岗位的证书,软考高项中大部分考试内容是PMPIT技术两部分,其中项…

【STL容器】list

文章目录 一、list定义二、list的迭代器三、list的元素操作四&#xff0c;list的优缺点 一、list定义 list本质是一个双向带头循环链表 template<class T> struct list_node {list_node* prev;T val;list_node* next; };template<class T> class list {typedef lis…

如何打造可视化警务巡防通信解决方案

近年来&#xff0c;科学技术飞速发展&#xff0c;给予了犯罪分子可乘之机。当面临专业化的犯罪分子、高科技的犯罪手段&#xff0c;传统警务模式似乎不能满足警方打击犯罪的需要&#xff0c;因此当今公安工作迫切需要构建智能化、系统化、信息化的警务通信管理模式。 警务人员…

python 第一次作业

1.使用turtle换一个五环 2.设计这样一个程序&#xff1a;输入一个数字 判断它是不是一个质数 使用turtle换一个五环&#xff1a; >>> import turtle #导入模块 >>> turtle.width(10) #设置圆圈宽度 >>> turtle.color("blue&qu…

JDK10特性

文章目录 JAVA10概述语法层次的变化局部变量的类型推断不能使用类型推断的场景变量的声明初始值nulllambda表达式方法引用为数组静态初始化成员变量不能使用其他不可以的场景 API层次的变化集合的copyOf方法 总结 JAVA10概述 2018年3月21日&#xff0c;Oracle官方宣布JAVA10正…

HTML整站规划与规范

文章目录 命名规则命名命名书写 包含样式规范样式重置样式引入页面结构页面宽度页面高度与背景页面设计 网址图标 命名规则 命名 根据每块元素的主题、功能、页面上的位置命名&#xff0c;便于后期更改与维护。 另外&#xff1a;如果所有样式放在同一文件下&#xff0c;可以给…

BUUCTF:[GYCTF2020]FlaskApp

Flask的网站&#xff0c;这里的功能是Base64编码解码&#xff0c;并输出 并且是存在SSTI的 /hint 提示PIN码 既然提示PIN&#xff0c;那应该是开启了Debug模式的&#xff0c;解密栏那里随便输入点什么报错看看&#xff0c;直接报错了&#xff0c;并且该Flask开启了Debug模式&am…

qt自定义可删除标签控件、自适应布局

自定义标签&#xff0c;支持删除、设置/获取数据、自适应布局操作。 如图&#xff0c;可点击删除按钮操作、拖拽窗口自适应&#xff1b; 代码参考

21天学会C++:Day11----运算符重载

CSDN的uu们&#xff0c;大家好。这里是C入门的第十一讲。 座右铭&#xff1a;前路坎坷&#xff0c;披荆斩棘&#xff0c;扶摇直上。 博客主页&#xff1a; 姬如祎 收录专栏&#xff1a;C专题 目录 1. 知识引入 2. 运算符重载 2.1 operator<() 2.2 operator() 2.3 o…

Vue的详细教程--基础语法【上】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Vue的相关操作吧 一.插值 1.文本 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>插值</title>&l…

python爬虫爬取电影数据并做可视化

思路&#xff1a; 1、发送请求&#xff0c;解析html里面的数据 2、保存到csv文件 3、数据处理 4、数据可视化 需要用到的库&#xff1a; import requests,csv #请求库和保存库 import pandas as pd #读取csv文件以及操作数据 from lxml import etree #解析html库 from …