TypeScript 类

类在面向对象编程中起着创建对象的蓝图,描述所创建的对象共同的属性和方法的作用。

创建类

与JS差不多,通过 Class 关键字来定义一个类:

class Greeter {// 静态属性static cname: string = "Greeter";// 成员属性greeting: string;// 构造函数 - 执行初始化操作constructor(message: string) {this.greeting = message;}// 静态方法static getClassName() {return "Class name is Greeter";}// 成员方法greet() {return "Hello, " + this.greeting;}
}let greeter = new Greeter("world");

接下来逐步讲解:

static cname:如果属性用static修饰的话(默认为public),表示静态属性不能通过实例对象访问到该属性,只能在类内调用或者通过类去访问,比如 Person.gender。

static getClassName:通过static修饰该方法(默认为public),表示静态方法 ,不能通过实例对象访问到该方法需要在类内调用或通过类去访问 ,比如 Person.sayHello()

构造函数:类的构造函数,对象创建时调用 限制。每个类仅能一个构造函数

this的指向:

1、在实例方法中,this就表示当前的实例
2、在构造函数中的当前对象就是新建的那个对象
 3、可以通过this向新建的对象中添加属性

看看JS是怎么实现的:

var Greeter = /** @class */ (function () {// 构造函数 - 执行初始化操作function Greeter(message) {this.greeting = message;}// 静态方法Greeter.getClassName = function () {return "Class name is Greeter";};// 成员方法Greeter.prototype.greet = function () {return "Hello, " + this.greeting;};// 静态属性Greeter.cname = "Greeter";return Greeter;
}());
var greeter = new Greeter("world");

可以看到常态方法greet生成了对象原型链上的方法,静态方法static生成了对象上的方法。而无论是静态属性或者常态属性都是挂靠在对象上面。匿名函数返回了Greeter方法并立即执行。

class Greeter {// 静态属性static cname: string = 'dd'// 成员属性greeting: string = 'ff';}
var Greeter = /** @class */ (function () {function Greeter() {// 成员属性this.greeting = 'ff';}// 静态属性Greeter.cname = 'dd';return Greeter;
}());

没有默认值的话连属性都不会生成

class Greeter {// 静态属性static cname: string // 成员属性greeting: string ;}
var Greeter = /** @class */ (function () {function Greeter() {}return Greeter;
}());

如果我们用ES6的Class类来实现TS的Greeter类。则:

class Greeter {// 静态属性cname= "Greeter";// 成员属性greeting;// 构造函数 - 执行初始化操作constructor(message) {this.greeting = message;}// 静态方法static getClassName() {return "Class name is Greeter";}// 成员方法greet() {return "Hello, " + this.greeting;}}

注意ES6没有静态属性static,只有静态方法。

继承类

class Animal{name:stringage:number//构造函数constructor(name:string,age:number){this.name = namethis.age = age}// 自定义方法sayHello(){console.log('动物在叫~')}}  class Dog extends Animal{// 重写父类方法sayHello(): void {console.log('汪汪汪')}}class Cat extends Animal{//重写父类方法sayHello(): void {console.log('喵喵喵')}}const dog = new Dog('旺财',4) const cat = new Cat('咪咪',3)console.log(dog) //Dog {name: '旺财', age: 4}console.log(dog.sayHello()) //汪汪汪console.log(cat) //Cat {name: '咪咪', age: 3}console.log(cat.sayHello()) //喵喵喵

直接看代码:

Dog extends Animal

  •   此时,Animal被称为父类,Dog被称为子类
  •   使用继承后,子类将会拥有父类所有的方法和属性
  •   通过继承可以将多个类中共有的代码写在一个父类中,
  •   这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
  •   如果希望在子类中添加一些父类中没有的属性或方法直接加就行
  •   这种子类覆盖掉父类方法的形式,我们称为方法重写

继承类的构造函数constructor可以不用写。默认会沿用父类的构造函数。

继承也可以用于interface接口身上。

interface a {name:string
}
interface b extends a {age:number
}
let obj :b = {name:'ss',age:3}

super方法

class Animal{name:stringage:numberconstructor(name:string,age:number){this.name = namethis.age = age            }sayHello(){console.log('动物在叫~')}
}
class Dog extends Animal{//子类构造函数constructor(name:string,age:number){super(name,age)}//重写父类方法sayHello(): void {super.sayHello()console.log('汪汪汪')}
}const dog = new Dog('旺财',2)
console.log(dog) //Dog {name: '旺财', age: 2}
console.log(dog.sayHello()) //动物在叫~   汪汪汪

 super: 调用父类构造函数
场景:如果在子类中写了构造函数,在子类构造函数中"必须"对父类的构造函数进行调用
在类的方法中 super就表示当前类的父类   super.sayHello();

抽象类abstract

  • 以abstract开头的类是抽象类
  • 抽象类和其他类区别不大,只是不能用来创建对象
  • 抽象类就是专门用来被继承的类
  • 抽象类中可以添加抽象方法
 abstract class Animal{name: string;constructor(name: string) {this.name = name;}abstract sayHello():void //只能这样写 不能有具体实现什么 否则报错
} 

注意抽象类的方法是不能有函数体的。抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写。

   class Dog extends Animal{//注意:必须要重写父类,抽象的方法,不然会报错sayHello():void {console.log('汪汪汪')}}

private、public、protected和访问器

TS可以在属性前添加属性的修饰符

 class Person{private _name:stringprivate _age:numberconstructor(name:string,age:number){this._name = namethis._age = age}setName(value){this._name = value}getName(){return this._name}
}

        上文提到加了static静态修饰的属性虽然不能通过实例去获取,但是它可以通过类的属性去获取(比如Person.name)。如果我们希望其无法通过任何渠道去获取。那就可以使用private修饰。

        如果你想要让私有属性能够在外部被访问被修改。就像上文一样,在类内部添加方法暴露私有属性。

  •  public 修饰的属性可以在任意位置访问(修改)默认值
  •  private 私有属性,私有属性只能在类内部进行访问(修改)
  • 通过在类中添加方法使得私有属性可以被外部访问
  • protected 受保护的属性,只能在当前类和当前类的子类中访问(修改)

         而实际上,TS已经贴心的为我们提供了访问器队私密属性进行操作。不需要我们在类中添加方法。

        TS中设置getter方法的方式: 此时再使用personA.name时,实际上是调用了get name()方法。

class Person{private _name:string...get name() {return this._name;}
}

        调用:

let personA = new Person('dd',12);
console.log(personA.name)

        TS中设置setter方法的方式:此时再使用personA.name = xxx时,实际上是调用了set name()方法!

set name(value) {this._name = value;
}

        调用:

personA.name ='xxxxx'

protected修饰:

但是如果是这样就可以:

 const b = new B(123);
console.log(b.test())

 

interface接口

接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法
同时接口也可以当成类型声明去使用
可以定义相同的接口,最后会合并在一起
接口里面的属性和方法不能有初始值
接口只考虑对象结构,而不考虑实际值
在接口中定义方法都是抽象方法,也就意味着需要重写

interface myinterface {name:string,age:number}
interface myinterface{gender:stringsayHello():void
}
let aaaa:myinterface ={name:'a',age:33,gender:'xx',sayHello:()=>{console.log(123)}}

而定义类时,可以使类去实现一个接口。实现接口就是使类满足接口的要求

  class myClass implements myinterface{constructor(public name:string, public age:number,public gender:string){this.name = namethis.age = agethis.gender = gender}sayHello() {console.log('你好呀~')}
}

泛型与类

使用场景:在定义函数或类时,如果遇到类型不明确就可以使用泛型

具体请看我的另外一篇推文。TS与泛型

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

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

相关文章

23062C++QTday4

仿照string类&#xff0c;完成myString 类 代码&#xff1a; #include <iostream> #include <cstring> using namespace std; class myString {private:char *str; //记录c风格的字符串int size; //记录字符串的实际长度public://无参构造my…

SAP CO之内部订单简单介绍

目录 介绍 一、内部订单类别 二、订单类别和订单类型的定义及区别: 三、常见的内部订单类型分类&#xff1a; 介绍 在SAP里面&#xff0c;内部订单是一种成本对象&#xff0c;它和成本中心可以视为 CO 成本管理中的最常用的两种成本费用流出流入的“容器”。我们可以对内部…

Linux内核分析与应用5-中断

本系列是对 陈莉君 老师 Linux 内核分析与应用[1] 的学习与记录。讲的非常之好&#xff0c;推荐观看 留此记录&#xff0c;蜻蜓点水,可作抛砖引玉 中断机制概述 中断是CPU对系统发生的某个事件作出的一种反应, 当中断发生时,CPU暂停正在执行的程序,保留现场后,自动转去执行相应…

亚马逊云科技与德勤中国推出新工具,有效缓解生成式AI时代下的安全问题

随着人工智能技术的飞速发展&#xff0c;生成式AI应用越发广泛&#xff0c;在各领域迎来了新的机遇&#xff0c;但同时也在安全层面给企业带来了新的挑战。网络攻击、数据泄露、隐私侵犯等安全威胁&#xff0c;以及法律法规的不断更新&#xff0c;使跨区域运营过程中的网络安全…

sprinboot 引入 Elasticsearch 依赖包

1.springboot与es的版本有比较强的绑定关系&#xff0c;如果springboot工程引入es的依赖后报一些依赖的错误&#xff0c;那么就看表格中的对应关系&#xff0c;将sprinboot或者es的版本做对应的调整 2.本人是从springboot1.x升级到springboot2.x&#xff0c;做了排包工作 3.升级…

Linux服务使用宝塔面板搭建网站,并发布公网访问 - 内网穿透

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…

1-2 AUTOSAR规范文档

目录 一、AUTOSAR文档下载 二、AUTOSAR文档分类 三、软件设计规范文档解读&#xff08;SWS&#xff09; 一、AUTOSAR文档下载 AUTOSAR规范文档下载可以到AUTOSAR官网&#xff08;Home AUTOSAR&#xff09;进行下载。 下载操作如下图所示&#xff1a; 二、AUTOSAR文档分类 AU…

Unity中Shader使用最简屏幕坐标并且实现屏幕扭曲

文章目录 前言一、在之前写的shader中&#xff0c;用于对屏幕坐标取样的pos是在顶点着色器中完成计算的&#xff0c;然而还有一种更为简洁的方法&#xff0c;就是用顶点着色器中传给片元着色器的pos来给屏幕抓取进行采样原理&#xff1a;在顶点着色器中&#xff0c;o.pos是裁剪…

javascript【格式化时间日期】

javascript【格式化时间日期】 操作&#xff1a; (1) 日期格式化代码 /*** 日期格式化函数<br/>* 调用格式&#xff1a;需要使用日期对象调用* <p> new Date().Format("yyyy/MM/dd HH:mm:ss"); </p>* param fmt 日期格式* returns {*} 返回格式化…

“深入探究SpringMVC的工作原理与入门实践“

目录 引言1. 什么是SpringMVC?1.1. 模型1.2. 视图1.3. 控制器 2. SpringMVC的工作流程2.1. 客户端发送请求2.2. DispatcherServlet的处理2.3. 处理器映射器的使用2.4. 处理器的执行2.5. 视图解析器的使用2.6. 视图的渲染 3. SpringMVC的核心组件4. 弹簧MVC总结 引言 SpringMV…

基于springboot2+mybatis-plus+jsp增删改查

概述 编写简单增删改查&#xff0c;理解之后可以自己试着扩展&#xff0c;相信你也可以&#xff0c;加油&#xff0c;我自己懂了的用注释记在下面方便理解 详细 一、需求&#xff08;要做什么&#xff09; 基于现今最流行的技术实现增删改查demo&#xff0c; 便于初学者上手…

C高级day4(shell脚本)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.创建一个文件&#xff0c;给组用户可读权限&#xff0c;所属用户可写权限&#xff0c;其他用户可执行权限&#xff0c;使用if判断文件有哪些权限 #!/bin/bash touch 1 chmod 241 1 if [ -r 1 ] thenecho "文件…