TypeScript（三）：TypeScript面向对象

TypeScript面向对象

类的定义

  • 与JS不同的是，成员属性需要在前面进行提前声明
class Person{//需要在前面对成员变量进行声明name: string//声明的时候，可以对值进行初始化，初始化可以带有类型注解，也可以省略age = 18//constructor中的变量依旧要进行类型注解constructor(name:string,age:number) {this.name = name,this.age = age}
}const p1 = new Person("zhangcheng", 20)console.log(p1)

类的继承

  • 与JS中的继承是一样的
  • 使用 extends进行继承
  • 可以使用super

类的成员修饰符

在TypeScript中，类的属性和方法支持三种修饰符：public、private、protected

  • public：修饰的是在任何地方可见，公有的属性或方法，默认编写的属性就是public
  • private：修饰的仅在同一类中可见，私有的属性或者方法
  • protected：修饰的是仅在类自身以及子类中可见，受保护的属性或者方法
class Person{//可以自由访问，默认就是publicpublic name: string//仅能在Person类中进行访问private age = 18//仅能在Person中，以及Person的子类中进行访问protected address:string = "河北省"constructor(name:string,age:number,address:string) {this.name = name,this.age = age,this.address = address}
}

只读属性readonly

  • 正常情况下，类创建的实例是可读可写的
  • 我们可以定义一个成员属性为只读属性
class Person{//这样name就只能读取，不能修改了readonly name: stringconstructor(name:string) {this.name = name,}
}

getters/setters

  • 主要是对私有属性，进行设置
  • 其目的是为了拦截，防止一些非法的操作发生
class Person{private _age: numberconstructor(_age: number) {this._age = _age}//对值进行设置set age(newValue: number) {//若设置的年龄过大或者过小则直接忽略if (newValue > 0 && newValue < 150) {this._age = newValue}}get age(): number{return this._age}
}const p1 = new Person(18)
console.log(p1.age)
p1.age = 1000
console.log(p1.age)

参数属性

  • 前面我们知道在定义一个类中的成员属性，需要在前面进行声明
  • 而TS提供了一种语法糖，可以使代码看起来比较简洁
    • 在 constructor中的变量前面，用写明修饰符public、private、protected、readonly即可
class Person{private _age: numberconstructor(_age: number) {this._age = _age}
}//相当于以下写法
class Person{constructor(private _age: number) {this._age = _age}
}

抽象类abstract

  • 抽象类的特点
    • 抽象类不能通过new创建实例
    • 抽象类可以包含抽象方法，也可以包含实现的具体方法
    • 有抽象类的方法，必须是一个抽象类
    • 抽象方法必须在子类中实现
  • 现在有这样一个需求
    • 定义一个 shape抽象类，里面有一个getArea的抽象方法
    • 分别定义 三角形，圆形，长方形等多种形状的类
abstract class Shape {//抽象方法，必须存在于抽象类中，抽象类不必具体实现abstract getArea():number
}//圆形
class Circle extends Shape{//继承自抽象类的子类，要具体实现其抽象方法getArea(): number {return 3.14*3*3}
}//长方形
class Juxing extends Shape{getArea(): number {return 3*4}
}function getShapeArea(shape: Shape) {//只需要调用Shape中的方法即可求出面积console.log(shape.getArea());
}const c1 = new Circle()
const j1 = new Juxing()
console.log(getShapeArea(c1))
console.log(getShapeArea(j1))

image.png

类的特性

  • 可以通过new 创建实例对象
  • 可以当作类型注解
  • 可以当作有 构造签名的函数
class Person{ }//通过Person创建一个实例对象
const p = new Person()//当作一个类型注解
function printPerson(p: Person) { }//当作一个有构造签名的函数
function factory(ctor: new () => void) { }
factory(Person)

对象类型的修饰符

  • 在创建对象类型的时候，其属性也可以进行修饰
  • 可选属性，在属性后面加?
  • 只读属性，在属性签名加readonly
type objType = {name?:string//可选属性readonly age:number//只读属性
}
interface Iobj{name?:string//可选属性readonly age:number//只读属性
}

对象类型的索引签名

  • 通常用于定义不明确对象中属性的类型
  • 只能通过 string或者number进行访问
//对象类型的索引签名
interface IObj{//可以通过字符串key进行访问，value可以是number类型或者boolean类型[key: string]: number | boolean//因为length属于用string访问，其返回值应当是上面中的子类length:boolean
}//对象类型的索引签名
interface IArr{//可以通过字符串key进行访问，value可以是number类型或者boolean类型[key: number]: number | boolean//因为length属于用string访问，其返回值应当是上面中的子类length:boolean
}

接口继承

  • 使用 interface定义接口，是可以通过extends继承的
    • 可以减少代码量
    • 使用第三方库的时候，可以使用定义好的接口，同时可以定义自己的属性
interface Iobj{name?:string//可选属性readonly age:number//只读属性
}interface Iobj2 extends Iobj{address:string
}

接口被类实现

  • 定义的接口，是可以被类实现的
  • 通过implements关键字进行接口的实现
  • 同时一个类可以实现多个接口
interface Person{name: stringage: numberaddress: stringrunning:()=>void
}//通过字面量直接实现
let p1:Person = {name: "zhangcheng",age: 18,address: "河北省",running() {console.log("running")}
}interface IWalk {walk:()=>void
}
//通过类进行实现
//好处是可以直接通过new创建，省去了字面量创建的繁琐
//同时可以实现多个接口
class PersonClass implements Person,IWalk{constructor(public name:string,public age:number,public address:string) {this.name = namethis.age = agethis.address = address}running() {console.log("123");}walk() {console.log("456");}
}const p2 = new PersonClass("zhangcheng", 18, "河北省")
console.log(p2.running());
console.log(p2.walk());

严格字面量赋值检测

  • 在TS中，有一个十分奇怪的现象
interface IPerson{name: stringage:number
}let p1:IPerson = {name: "zhangcheng",age: 18//若增加下面的属性则会报错//height:1.88
}//但是进行如下操作不会报错
let p2 = {name: "zhangcheng",age: 18,height:1.88
}
let p3: IPerson = p2function test(person: IPerson) { }test({ name: "zhangcheng", age: 18 })
//依旧不会报错
test(p2)
  • 上面的代码中，我们使用interface创建了一个对象的类型
  • 同时用这个类型通过字面量方式以及赋值的方式，分别创建了几个对象
  • 发现通过 字面量创建的时候，会进行严格字面量的检测
  • 而通过赋值的方法，则不会进行检测
  • 这是因为，TS认为通过字面量创建的，就是新鲜的（这是TS成员在GitHub上面一个issue中提及的）

枚举类型

  • 在TS中有一种类型叫枚举类型
  • 通常用于枚举一些常量
//在其内部实际上是从0开始计数的
//我们可以改变其默认值
enum EList {UP = 100,DOWN = "DOWN",LEFT,RIGHT,
}function test(payload: EList) {switch (payload) {case EList.DOWN:console.log(123)break}
}//传递的也是其内部的值
const p: EList = EList.DOWN
test(p)

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

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

相关文章

常见面试题：TCP的四次挥手和TCP的滑动窗口

常见面试题：TCP的四次挥手和TCP的滑动窗口

说一说 TCP 的四次挥手。 挥手即终止 TCP 连接&#xff0c;所谓的四次挥手就是指断开一个 TCP 连接时。需要客户端和服务端总共发出四个包&#xff0c;已确认连接的断开在 socket 编程中&#xff0c;这一过程由客户端或服务端任意一方执行 close 来触发。这里我们假设由客户端…
阅读更多...
Linux：sed进阶（12）

Linux：sed进阶（12）

Linux&#xff1a;shell脚本&#xff1a;基础使用&#xff08;5&#xff09;《正则表达式-sed工具》_linux脚本表达式s-CSDN博客https://blog.csdn.net/w14768855/article/details/132347574?ops_request_misc%257B%2522request%255Fid%2522%253A%252217084222871680019707523…
阅读更多...
MySQL错误-this is incompatible with sql_mode=only_full_group_by完美解决方案

MySQL错误-this is incompatible with sql_mode=only_full_group_by完美解决方案

项目场景 有时候&#xff0c;遇到数据库重复数据&#xff0c;需要将数据进行分组&#xff0c;并取出其中一条来展示&#xff0c;这时就需要用到group by语句。 但是&#xff0c;如果mysql是高版本&#xff0c;当执行group by时&#xff0c;select的字段不属于group by的字段的…
阅读更多...
强化学习：仿真环境Gym的安装和测试

强化学习：仿真环境Gym的安装和测试

接下来进行强化学习方面的研究和学习&#xff1a; 首先是安装学习RL最常用的仿真环境——Gym 推荐安装的Gym版本如下&#xff0c;使用pip命令进行安装&#xff1a; pip install gym0.26.2 pip install pygame2.3.0 环境安装完成后&#xff0c;可以使用下面的测试代码进行测试&…
阅读更多...
Stable Diffusion 绘画入门教程（webui）-图生图

Stable Diffusion 绘画入门教程（webui）-图生图

通过之前的文章相信大家对文生图已经不陌生了&#xff0c;那么图生图是干啥的呢&#xff1f; 简单理解就是根据我们给出的图片做为参考进行生成图片。 一、能干啥 这里举两个例子 1、二次元头像 真人转二次元&#xff0c;或者二次元转真人都行&#xff0c; 下图为真人转二次…
阅读更多...
香港Web3:香港虚拟货币 OTC 业务如何合规开展？

香港Web3:香港虚拟货币 OTC 业务如何合规开展？

撰文&#xff1a;刘红林 文章来源Techub News专栏作者&#xff0c;搜Tehub News下载查看更多Web3资讯。 香港虚拟货币监管两手抓 2024 年 2 月 2 日&#xff0c;香港财经事务及库务局局长许正宇表示&#xff0c;政府认为有需要把虚拟货币场外交易所 (OTC) 纳入监管&#xff0…
阅读更多...
Bert基础(一)--自注意力机制

Bert基础(一)--自注意力机制

1、简介 当下最先进的深度学习架构之一&#xff0c;Transformer被广泛应用于自然语言处理领域。它不单替代了以前流行的循环神经网络(recurrent neural network, RNN)和长短期记忆(long short-term memory, LSTM)网络&#xff0c;并且以它为基础衍生出了诸如BERT、GPT-3、T5等…
阅读更多...
cockpit install

cockpit install

Running Cockpit — Cockpit Project ip:9090 如果9090端口被占用&#xff0c;可以改为9091 cat /etc/systemd/system/sockets.target.wants/cockpit.socket [Unit] DescriptionCockpit Web Service Socket Documentationman:cockpit-ws(8) Wantscockpit-motd.service[Socket…
阅读更多...
VScode写LaTeX配置，实测有效

VScode写LaTeX配置，实测有效

环境配置请看LaTeX环境配置-TexLive&#xff0c;实测有效http://t.csdnimg.cn/0txlL VScode写LaTeX配置 0.smatra pdf下载 如果使用外部pdf查看器&#xff0c;比如我用的sumatra pdf,官网是Sumatra PDF reader download page 下载对应版本&#xff0c;比如64位&#xff0c;下…
阅读更多...
数据结构之线性表插入与删除运算

数据结构之线性表插入与删除运算

线性表 线性表的定义 线性表&#xff0c;或称表&#xff0c;是一种非常灵便的结构&#xff0c;可以根据需要改变表的长度&#xff0c;也可以在表中任何位置对元素进行访问、插入或删除等操作。另外&#xff0c;还可以将多个表连接成一个表&#xff0c;或把一个表拆分成多个表…
阅读更多...
Solidworks：钣金设计中的参数设定

Solidworks：钣金设计中的参数设定

利用草图工具画一个折线&#xff0c;夹角135度、边长为5mm。参见下图&#xff1a; 然后利用此草图创建钣金基本法兰&#xff1a; 调整视图角度&#xff0c;看一下钣金件与草图的关系&#xff1a; 可以看出&#xff0c;默认情况下草图中的线段对应钣金件的外侧。可以调整“钣…
阅读更多...
Innodb底层原理与Mysql日志机制深入剖析

Innodb底层原理与Mysql日志机制深入剖析

MySQL的内部组件结构 大体来说&#xff0c;MySQL 可以分为 Server 层和存储引擎层两部分。 Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023