TypeScript(三)面向对象

news/2024/5/4 14:11:50/文章来源:https://blog.csdn.net/weixin_65402230/article/details/128006437

TypeScript

类的定义

我们可以使用class关键字来定义一个类;
我们可以声明类的属性:在类的内部声明类的属性以及对应的类型
如果类型没有声明,那么它们默认是any的;
我们也可以给属性设置初始化值;
在默认的strictPropertyInitialization模式下面我们的属性是必须初始化的,如果没有初始化,那么编译时就会报错;
如果我们在strictPropertyInitialization模式下确实不希望给属性初始化,可以使用 name!: string语法;

类可以有自己的构造函数constructor,当我们通过new关键字创建一个实例时,构造函数会被调用;
构造函数不需要返回任何值,默认返回当前创建出来的实例;
类中可以有自己的函数,定义的函数称之为方法;

class Person {//成员属性:声明成员属性name!: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}eating() {console.log(this.name);}
}//实例对象 instance
const p1 = new Person('kobe', 30);

类的继承

面向对象的其中一大特性就是继承,继承不仅仅可以减少我们的代码量,也是多态的使用前提。
我们使用extends关键字来实现继承,子类中使用super来访问父类。

我们来看一下Student类继承自Person:
Student类可以有自己的属性和方法,并且会继承Person的属性和方法;
在构造函数中,我们可以通过super来调用父类的构造方法,对父类中的属性进行初始化;

class Student extends Person {constructor(name: string, age: number) {super(name, age);}studying() {console.log('在学习', this.name);}
}

类的成员修饰符

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

public 修饰的是在任何地方可见、公有的属性或方法,默认编写的属性就是public的;
private 修饰的是仅在同一类中可见、私有的属性或方法;
protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法;

public是默认的修饰符,也是可以直接访问的,我们这里来演示一下protected和private。

class Person {protected name: string;private age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}//方法变成私有方法 只有在类内部才能访问private eating() {console.log('吃东西');}
}const p = new Person('kobe', 18);

只读属性readonly

如果有一个属性我们不希望外界可以任意的修改,只希望确定值后直接使用,那么可以使用readonly:

class Person {readonly name: stringconstructor(name: string) {this.name = name}
}const p = new Person('kobe')

当我们改变p.name值时 会报错

getters/setters

在前面一些私有属性我们是不能直接访问的,或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程,这个时候我们可以使用存取器。

class Person {private _name: stringset name(newName) {this._name = newName}get name(){return this._name}constructor(name: string) {this.name = name}
}const p = new Person('kobe')
p.name = 'james'
console.log(p.name)

参数属性(Parameter Properties)

TypeScript 提供了特殊的语法,可以把一个构造函数参数转成一个同名同值的类属性
这些就被称为参数属性(parameter properties);
你可以通过在构造函数参数前添加一个可见性修饰符 public private protected 或者 readonly 来创建参数属性,最后这些类
属性字段也会得到这些修饰符;

class Person {//语法糖constructor(public name: string, private age: number, readonly height: number) {}running() {console.log(this.age, 'eating');}
}
const p = new Person('kobe', 18, 1.88);
console.log(p.name, p.height);console.log(p.name);

抽象类abstract

我们知道,继承是多态使用的前提。
所以在定义很多通用的调用接口时, 我们通常会让调用者传入父类,通过多态来实现更加灵活的调用方式。
但是,父类本身可能并不需要对某些方法进行具体的实现,所以父类中定义的方法,,我们可以定义为抽象方法。

什么是 抽象方法? 在TypeScript中没有具体实现的方法(没有方法体),就是抽象方法。
抽象方法,必须存在于抽象类中;
抽象类是使用abstract声明的类;

抽象类有如下的特点:
抽象类是不能被实例的(也就是不能通过new创建)
抽象方法必须被子类实现,否则该类必须是一个抽象类;

abstract class Shape {abstract getArea();
}class Rectangle extends Shape {constructor(public width: number, public height: number) {super();}getArea() {return this.width * this.height;}
}class Circle extends Shape {constructor(public radius: number) {super();}getArea() {return this.radius ** 2 * Math.PI;}
}class Triangle extends Shape {getArea() {return 100;}
}//通用的函数
function calcArea(shape: Shape) {return shape.getArea();
}calcArea(new Rectangle(10, 20));
calcArea(new Circle(5));
calcArea(new Triangle());

类的类型

类本身也是可以作为一种数据类型的:
ts对于类型检测使用的是鸭子类型
鸭子类型:如果一只鸟 走起路来像鸭子 看起来像鸭子 那么你就可与认为它是鸭子
鸭子类型 只关心属性和行为 不关心具体的类型

class Person {constructor(public name: string, public age: number) {}
}class Dog {constructor(public name: string, public age: number) {}
}function printPerson(p: Person) {console.log(p.name, p.age);
}printPerson(new Person('james', 18));
printPerson({ name: 'kobe', age: 30 });
printPerson(new Dog('旺财', 3));const person: Person = new Dog('果汁', 5);

对象类型的属性修饰符(Property Modifiers)

对象类型中的每个属性可以说明它的类型、属性是否可选、属性是否只读等信息。
可选属性(Optional Properties)
我们可以在属性名后面加一个 ? 标记表示这个属性是可选的;
只读属性(Readonly Properties)
在 TypeScript 中,属性可以被标记为 readonly,这不会改变任何运行时的行为;
但在类型检查的时候,一个标记为 readonly的属性是不能被写入的。

类的作用
1.可以创建类对应的实例对象
2.类本身可以作为这个实例的类型
3.类也可以当作有一个构造签名的函数

class Person {}const name: string = 'aaa';
const p: Person = {};
function printPerson(p: Person) {}
function factory(ctor: new () => void) {}
factory(Person);
type IPerson = {//属性?:可选的属性name?: string;//readonly:只读属性readonly age: number;
};
interface IKun {name?: string;readonly slogan: string;
}
const p: IPerson = {name: 'kobe',age: 18,
};

索引签名(Index Signatures)

什么是索引签名呢?
有的时候,你不能提前知道一个类型里的所有属性的名字,但是你知道这些值的特征;
这种情况,你就可以用一个索引签名 (index signature) 来描述可能的值的类型;

interface ICollection {// 索引签名[index: string]: number;length: number;
}const names: number[] = [111, 222, 333];
console.log(names[0]);
console.log(names[1]);
console.log(names[2]);

一个索引签名的属性类型必须是 string 或者是 number。
虽然 TypeScript 可以同时支持 string 和 number 类型,但数字索引的返回类型一定要是字符索引返回类型的子类型;

要满足下面两个要求
1 数字类型必须是比字符串类型更加确定的类型(需要是字符串类型的子类型)
2 如果索引签名中有定义其他属性 其他属性返回的类型 必须符合string类型返回的属性

interface IIndexType {[index: number]: string;[key: string]: number | string;aaa: number;bbb: string;// ccc: boolean; // 错误类型
}

对于如下情况
情况一 不会报错

interface IIndexType {//返回值类型的目的是告知通过索引去获取到的值是什么类型[index: number]: string;
}const names: IIndexType = ['abc', 'cba', 'nba'];

情况二 不会报错

interface IIndexType {//返回值类型的目的是告知通过索引去获取到的值是什么类型[index: number]: string;[index: string]: any;
}const names: IIndexType = ['abc', 'cba', 'nba'];

情况三 会报错 names.forEach => names['forEach] => function 不符合

interface IIndexType {//返回值类型的目的是告知通过索引去获取到的值是什么类型[index: number]: string;[index: string]: string;
}const names: IIndexType = ['abc', 'cba', 'nba'];

接口类型

接口和类一样是可以进行继承的,也是使用extends关键字:
并且我们会发现,接口是支持多继承的(类不支持多继承)

interface IPerson {name: string;age: number;
}
interface IKun extends IPerson {slogan: string;
}

//可以重其他的节后中继承过来属性
1 减少了相同代码的重复编写
2 如果使用第三方库 给我们定义了一些属性 自定义一个接口拥有第三方某一个类型中所有的属性可以使用继承来完成

接口的实现

接口定义后,也是可以被类实现的:
如果被一个类实现,那么在之后需要传入接口的地方,都可以将这个类传入;
这就是面向接口开发;

interface ISwim {swimming: () => void;
}interface IRun {running: () => void;
}//作用 接口被类实现
class Person implements ISwim, IRun {swiming() {}running() {}
}

严格的字面量赋值检测

对于对象的字面量赋值,在TypeScript中有一个非常有意思的现象:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为什么会出现这种情况呢
每个对象字面量最初都被认为是“新鲜的(fresh)”。
当一个新的对象字面量分配给一个变量或传递给一个非空目标类型的参数时,对象字面量指定目标类型中不存在的属性是错误的。
当类型断言或对象字面量的类型扩大时,新鲜度会消失。

TypeScript枚举类型

枚举类型是为数不多的TypeScript特性有的特性之一:
枚举其实就是将一组可能出现的值,一个个列举出来,定义在一个类型中,这个类型就是枚举类型;
枚举允许开发者定义一组命名常量,常量可以是数字、字符串类型;

enum Direction {LEFT,RIGHT,
}
const d1: Direction = Direction.LEFT;function turnDirection(direction: Direction) {switch (direction) {case Direction.LEFT:console.log('角色向左移动一个格子');break;case Direction.RIGHT:console.log('角色向右移动一个格子');break;}
}//监听键盘的点击
turnDirection(Direction.LEFT);

枚举类型的值

枚举类型默认是有值的,比如上面的枚举,默认值是这样的:
当然,我们也可以给枚举其他值:
这个时候会从100进行递增;
我们也可以给他们赋值其他的类型:

enum Direction {LEFT = 0,RIGHT = 1,TOP = 2,BOTTOM = 3,
}
enum Direction {LEFT = 100,RIGHT,TOP,BOTTOM,
}
enum Direction {LEFT,RIGHT,TOP = 'TOP',BOTTOM = 'BOTTOM',
}

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

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

相关文章

网页开发——淘宝首页导航

这篇博文主要是重新学习&#xff08;复习&#xff09;前端知识&#xff0c;通过写淘宝购物首页导航为案例。 html主要书写内容&#xff1a; 1.首先我写了一个大盒子&#xff0c;用于存放所用的全部标签 <div class"nav">主要内容 </div> 2.插入一张淘宝…

xilinx PL测 DP 点屏 /接收(二)--RX

环境&#xff1a; a)硬件&#xff1a;官方ZCU106开发板 , tb-fmch-vfmc-dp子卡。 b)软件&#xff1a;vivado2021.1&#xff0c;vitis2021.1&#xff0c;裸机程序。 1、官方例程&#xff1a; 2、DP RX IP &#xff1a; 3、DP RX寄存器&#xff1a; 4、时钟&#xff1a; 5、像素&…

高通导航器软件开发包使用指南(9)

高通导航器软件开发包使用指南&#xff08;9&#xff09;8参数说明8.1最小条件参数8.2光学流量数据图8.3光学流量估算数据图8.4光学流量估算图8.5 pos_hold_mode内存8.6体积参数8.7障碍物输出参数8.8速度平滑曲线8参数说明 每辆车必须在适当的位置有运行时参数文件&#xff0c…

MCE | LYTAC 与靶向蛋白降解技术

靶向蛋白降解 (TPD) 是一种有效性的&#xff0c;高度选择性的诱发蛋白降解方式。近年来&#xff0c;以 PROTAC 为代表的 TPD 技术的研究如火如荼。PROTAC 主要降解的是胞内蛋白&#xff0c;实际上&#xff0c;有 40% 的基因产物为胞外和膜相关蛋白&#xff0c;如生长因子、细胞…

Java面向对象三大基本特征之多态

多态性是面向对象编程的又一个重要特征&#xff0c;那么多态是什么呢&#xff1f; 一、多态的概念 1.概念&#xff1a;多态是指在父类中定义的属性和方法被子类继承之后&#xff0c;可以具有不同的数据类型或表现出不同的行为&#xff0c;这使得同一个属性或方法在父类及其各…

数商云采购协同系统邀请招标实施步骤 | 助力建筑工程企业采购工作降本增效

建筑工程行业作为拉动我国工业发展与国民经济发展的重要支柱产业之一&#xff0c;目前已进入稳定发展阶段。在新基建热潮下&#xff0c;建筑工程行业加速向自动化、智能化方向发展&#xff0c;如何借助数字化技术提升管理水平&#xff0c;实现新价值增长&#xff0c;成为行业企…

220kV降压变电所电气部分初步设计33号

目录 1 绪论 5 &#xff11;.&#xff11; 概述 5 &#xff11;.&#xff12; 本次设计内容 5 &#xff11;.&#xff13; 本次设计任务 5 2 变电站总体分析 6 2.&#xff11;变电所总体分析 6 2.2主变压器选择 7 3 电气主接线选择 10 3.1 电气主接线的概念 10 3.2 电气主接…

【零基础入门SpringMVC】第一期——开篇导论

一、导论 $ 什么是MVC&#xff1f; MVC 是一种将软件按照 模型、视图、控制器来划分的一种架构思维MVC全称SpringWebMVC&#xff0c;那么M、V、C分别代表什么呢&#xff1f; M&#xff1a;Model 代表模型层&#xff0c;作用就是处理数据&#xff0c;在我们SpringMVC中&#x…

python自学入门(打卡十)2022-11-22

Pytest与Unittest区别 参考资料&#xff1a;https://blog.csdn.net/qq_33385691/article/details/112004487 pytest用例规则 文件名以test_.py文件和test.py 以test_开头的函数 以Test开头的类&#xff0c;test_开头的方法&#xff0c;并且不能带有__init_ 方法 所有的包pake…

​LabVIEW从另一个VI或通过VI服务器访问正在运行的可执行文件

​LabVIEW从另一个VI或通过VI服务器访问正在运行的可执行文件 有没有办法从另一个VI或可执行文件访问正在运行的LabVIEW可执行文件。例如&#xff0c;从显示控件获取值&#xff0c;为控件设置值&#xff0c;以及初始化运行LabVIEW可执行文件VI的前面板。 在正在运行的可执行文…

11.23二叉树

目录 一.笔试强训习题订正 1.选择题 2.编程题-组队竞赛 3.删除公共字符 解法1 哈希映射思想 解法2 暴力解法 解法3 substring解法replaceAll() 二.二叉树相关Oj题 1.二叉树的遍历 2.二叉树分层遍历 三.二叉树的最近公共祖先 1.思路一 2.思路2 四.将二叉搜索树转化…

web网页大作业——基于HTML+CSS+JavaScript制作摄影之家网站

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

java项目测试成功后部署到服务器上的相关问题

1.java项目是如何部署给用户使用的? 前提&#xff1a; 以一个web项目为例&#xff0c; 使用工具&#xff1a;开发工具&#xff1a;IDEA&#xff1b;Tomcat&#xff08;应用服务器&#xff09;&#xff1b;Navicat&#xff08;数据库&#xff09;&#xff1b;Jenkins&#xff…

鲲鹏devkit编译调试工具——《sudoku》作业解析

《sudoku》作业解析 本次实验以sudoku项目为例介绍鲲鹏编译调试插件的基本使用方法 本次实验的步骤主要为 获取源码安装鲲鹏编译调试插件服务器配置进行代码同步配置配置测试任务进行编译调试 接下来我们先获取本次实验所需要的源码 获取源码 sudoku项目已经上传到github使…

CVPR‘15 Joint action recognition and pose estimation from video

任务&#xff1a;action recognition and pose estimation 思路&#xff1a;对动作和姿态进行统一建模&#xff0c;将动作分成姿态&#xff0c;再将姿态分成part&#xff0c;学习三种level特征&#xff0c;通过动态规划有效的推断动作标签和姿态。 方法&#xff1a;统一建模…

鼠标经过图片在边框内放大动效

鼠标没有经过&#xff1a; 鼠标经过的时候&#xff0c;看图&#xff0c;应该可以看出变化吧&#xff01;图有放大的效果。 样式&#xff1a;图片由一个盒子包着&#xff0c;盒子加上overflow:hidden的样式&#xff0c;即可以保证图片在边框内放大。 然后给图片加上动画效果就可…

Vue常用知识点汇总

1. Vue常见的指令有哪些&#xff0c;有什么用 &#xff08;1&#xff09;v-text&#xff1a; 会替换掉元素里的内容&#xff1b; &#xff08;2&#xff09;v-html&#xff1a; 可以渲染html界面&#xff1b; &#xff08;3&#xff09;v-clock&#xff1a; 防止界面闪烁&…

JavaScript开发工具WebStorm入门教程:开始运行WebStorm(一)

WebStorm是一个JavaScript开发工具&#xff0c;用于JavaScript及其相关技术编码&#xff0c;包括TypeScript、React、Vue、Angular、Node.js、HTML和样式表。就像IntelliJ IDEA和其他JetBrains ide一样&#xff0c;WebStorm让您的开发体验更愉快&#xff0c;自动化日常工作&…

7种主流数据分析软件比较及经典教材推荐

前言 STATA 软件优点&#xff1a;Stata以其简单易懂和功能强大受到初学者和高级用户的普遍欢迎。使用时可以每次只输入一个命令&#xff0c;也可以通过一个Stata程序一次输入多个命令。这样的话即使发生错误&#xff0c;也较容易找出并加以修改。尽管Stata的数据管理能力没有…

用DIV+CSS技术设计我的家乡网站(web前端网页制作课作业)南宁绿城之都

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…