TS的类！

已于 2024-06-11 16:03:07 修改
阅读量311 收藏 8
点赞数 5
文章标签： javascript 前端 typescript
于 2024-06-07 10:16:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Agont_/article/details/139519855
版权

类
我们知道， JS 是靠原型和原型链来实现面向对象编程的，es6 新增了语法糖 class。

TS 通过 public、private、protected 三个修饰符来增强了 JS 中的类。

在 TS 中，写法和 JS 差不多，只是要定义一些类型而已。

1.基本写法
定义一个Person类，有属性name和方法speak

class Person {
    name: string
    constructor(name: string) {
        this.name = name
    }
    speak() {
        console.log(`${this.name} is speaking`)
    }
}
 
const p1 = new Person('lin')      // 新建实例  
 
p1.name                           // 访问属性和方法
p1.speak()

2.继承
使用extends关键字实现继承，定义一个Student类继承自Person类。

总结: 类和类之间如果要有继承关系，需要使用extends关键字

子类中可以调用父类中的构造函数，使用的是super关键字(包括调用父类中的实例方法，也可以使用super)

子类中可以重写父类的方法

class Student extends Person {
    study() {
        console.log(`${this.name} needs study`)
    }
}
 
const s1 = new Student('lin')

s1.study()
继承之后，Student 类上的实例可以访问 Person 类上的属性和方法。speak和study方法和name方法。

3.super关键字
上例中 Student 类没有定义自己的属性，可以不写 super ，但是如果 Student 类有自己的属性，就要用到 super 关键字来把父类的属性继承过来。

比如，Student 类新增一个 grade(成绩) 属性，就要这么写：

class Student extends Person {
    grade: number
    constructor(name: string,grade:number) {
        super(name)
        this.grade = grade
    }
}
 
const s1 = new Student('lin', 100)

4.多态
子类对父类的方法进行了重写，子类和父类调同一个方法时会不一样。

父类型的引用指向了子类型的对象,不同类型的对象针对相同的方法,产生了不同的行为。

class Student extends Person {
    speak() {
        return `Student ${super.speak()}`
    }
}

TS 中一般对抽象方法实现多态，详细见后文抽象类。

5.public
public，公有的，一个类里默认所有的方法和属性都是 public。

public 可写可不写，不写默认也是 public。

public修饰符,类中成员默认的修饰符，代表的是公共的,任何位置都可以访问类中的成员

class Person {
    public name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

6.private
private，私有的，只属于这个类自己，它的实例和继承它的子类都访问不到。

将 Person 类的 name 属性改为 private。

类中的成员如果使用private来修饰,你们外部是无法访问这个成员数据的。

class Person {
    private name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

7.protected
protected 受保护的，继承它的子类可以访问，实例不能访问。

将 Person 类的 name 属性改为 protected。

class Person {
    protected name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

8.readonly
首先是一个关键字,对类中的属性成员进行修饰，修饰符后，该属性成员，就不能在外部被随意的修改了。

9.this类型
类的成员方法可以直接返回一个 this，这样就可以很方便地实现链式调用。

1.链式调用

class StudyStep {
  step1() {
    console.log('listen')
    return this
  }
  step2() {
    console.log('write')
    return this
  }
}
 
const s = new StudyStep()

s.step1().step2() // 链式调用
2.灵活调用子类父类方法

class StudyStep {
  step1() {
    console.log('listen')
    return this
  }
  step2() {
    console.log('write')
    return this
  }
}

class MyStudyStep extends StudyStep {
  next() {
    console.log('before done, study next!')
    return this   
  }
}

const m = new MyStudyStep()

m.step1().next().step2().next() // 父类型和子类型上的方法都可随意调用
这样就保持了父类和子类之间接口调用的连贯性。

10.interface 和 class 的关系
interface 是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述。

interface 同样可以用来约束 class，要实现约束，需要用到 implements 关键字。

11.implements
implements 是实现的意思，class 实现 interface。

比如手机有播放音乐的功能，可以这么写：

interface MusicInterface {
    playMusic(): void
}
 
class Cellphone implements MusicInterface {
    playMusic() {}
}

12.处理公共的属性和方法
不同的类有一些共同的属性和方法，使用继承很难完成。

比如汽车（Car 类）也有播放音乐的功能，你可以这么做：

用 Car 类继承 Cellphone 类

找一个 Car 类和 Cellphone 类的父类，父类有播放音乐的方法，他们俩继承这个父类

很显然这两种方法都不合常理。

实际上，使用 implements，问题就会迎刃而解。

interface MusicInterface {
    playMusic(): void
}
 
class Car implements MusicInterface {
    playMusic() {}
}
 
class Cellphone implements MusicInterface {
    playMusic() {}
}

再比如，手机还有打电话的功能，就可以这么做，Cellphone 类 implements 两个 interface。

interface MusicInterface {
    playMusic(): void
}
 
interface CallInterface {
    makePhoneCall(): void
}
 
class Cellphone implements MusicInterface, CallInterface {
    playMusic() {}
    makePhoneCall() {}
}

13.约束构造函数和静态属性
使用 implements 只能约束类实例上的属性和方法，要约束构造函数和静态属性，需要这么写。

i

nterface CircleStatic {
    new (radius: number): void
    pi: number
}
 
const Circle:CircleStatic = class Circle {
    static pi: 3.14
    public radius: number
    public constructor(radius: number) {
        this.radius = radius
    }
}

14.存取器
TypeScript支持通过getters和setters来截取对象成员的访问，它能帮助你有效的控制对对象成员的访问。

class Person{
    firstName string= 'A'
    lastName string= 'B'
    get fullName (){
        return this.firstName + '-' +this.lastName
    }
    set fullName (value){
        const names = value.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}
​
const P = new Person()
console.log(p.fullName)
​
p.firstName ='C'
p.lastName ='D'
console.log(p.fullName)
​
p.fullName = 'E-F'
console.log(p.firstName,p.lastName)
​

15.抽象类
abstract抽象类作为其他派生类的基类使用,不能被实例化。不同于接口，抽象类可以包含成员的实现细节。abstract 关键字是用于定义抽象类和抽象内部定义抽象方法。

/*
抽象类:
不能创建实例对象,只有实现类才能创建实例对象
可以包含未实现的抽象方法
/

abstract class Animal {
    abstract cry ()
    run(){
        console.log('run()')
    }
 }
 class Dog extents Animal{
    cry(){
        console('Dog cry()')
    }
 }
 const dog = new Dog()
 dog.cry()
 dog.run()
16.类类型
类的类型，类的类型可以通过接口来实现。

//定义一个接口
interface  ifly {
    该方法没有任何的实现
    fly()
}
定义一个类，这个类的类型就是上面定义的接口(实际上也可以理解为，ifly接口约束了当前的这个Person)
class person implements ifly{
    实现接口中的方法
    fly(){
        console.log('我会飞，我是超人')
    }
}
实例化对象
const person = new person()
person.fly()
​
定义一个接口
interface iswim{
    swim()
}
​
定义一个类，这个类的类型是ifly和iswim(当前这个类可以实现多个接口，一个类同时也可以被多个接口进行约束)
class person2 implements ifly,iswim{
    fly(){
        console.log('我会飞，我是超人')
    },
    swim(){
        console.log('我会游泳，我是蛙人')
    }
}

实例化对象

const person2 = new person2()
person2.fly()
person2.swim()
总结:类可以通过接口的方式，来定义当前这个类的类型
类可以实现一个接口，类可以实现多个接口，要注意，接口中的内容都要真正的实现。
​
定义了一个接口，继承其他的多个接口
interface person3 implements imyflyandswim{
    fly(){
        console.log('我会飞3，我是超人')
    },
    swim(){
        console.log('我会游泳3，我是蛙人')
    }
}
const person3 = new person3()
person3.fly()
person,swim()

总结:接口和接口之间叫继承(使用的是extends关键字)，类和接口之间叫做实现(使用的是implements)。

爱抽烟的老汉
关注
TS中类的定义
Lee的博客
12-06 1161
TS中类的定义
13、ts中的类，构造函数
imkaifan的博客
12-07 3129
ts中的类，构造函数
前端TS的类(class)!!!
xiaozhou4233的博客
01-22 1088
上例中 Student 类没有定义自己的属性，可以不写 super ，但是如果 Student 类有自己的属性，就要用到 super 关键字来把父类的属性继承过来。定义一个类，这个类的类型是ifly和iswim(当前这个类可以实现多个接口，一个类同时也可以被多个接口进行约束)子类中可以调用父类中的构造函数，使用的是super关键字(包括调用父类中的实例方法，也可以使用super)定义一个类，这个类的类型就是上面定义的接口(实际上也可以理解为，ifly接口约束了当前的这个Person)
TS--类（class）
weixin_68211919的博客
09-01 2902
一、基本知识 二、类 三、对象和内存 四、this：和js中的this用法一样，谁调用，this就指向谁 五、构造函数（constructor） 六、静态方法 七、存取器 八、继承（extends） 九：super 它是用来创建具有相似属性和行为的对象的一个模板或蓝图。类定义了对象的属性（成员变量）和行为（成员函数），并通过创建对象来实例化类。对象是具有类类型的变量：（1）类是对象的抽象，而对象是类的剧吐实例（2）类是抽象的，不占用内存，而对象是具体的，占用存储空间（3）类是用于创建对象的规划，抽象。
TS中的类(class)
Gleason
02-11 7584
类(class): 定义了一切事物的抽象特点(属性和方法) 对象(object): 类的实例(通过 new 来生成) 面向对象特点: 封装,继承,多态 封装: 将操作数据的细节隐藏起来,只暴露接口, 调用者只需要通过接口来访问对象 继承: 子类继承父类, 子类除了拥有父类的特性外还可以拥有更加具体的特性 多态: 同一个方法可以有不同的响应(猫和狗都继承自动物类,但是他们叫声各有不同) 封装 抽象一个动物类, 拥有名字属性和奔跑的动作 // 创建基本类 基类 class Animal { // 属性
TS总结10、ts的 class 类型(配置项strictPropertyInitialization、非空断言、implements 关键字)
qq_33911541的博客
03-04 1397
TS总结10、ts的 class 类型(配置项strictPropertyInitialization、非空断言、implements 关键字)
【TypeScript】ts中的Classes使用方法介绍
最新发布
qq_2511276124的博客
05-23 1508
TypeScript 完全支持 ES2015 中引入的类关键字。 与 JavaScript 语言的其他功能一样，TypeScript 添加了类型注解和其他语法，允许您表达类与其他类型之间的关系。
TS9180 TS9120 TS8180 TS8120清零软件
03-06
在IT领域，打印机和多功能一体机的维护是一个重要的环节，其中“清零”是一个常见的术语，主要用于解决...在使用这类软件时，了解设备的工作原理，适时进行必要的硬件检查和维护，将有助于实现更高效、经济的打印体验。
Java下载m3u8文件列表中的TS文件到本地工具类
05-07
m3u8是一种媒体播放列表格式，它包含了多个TS媒体片段的URL。 1. 一键批量下载：只需启动程序，即可自动遍历并下载M3U8文件列表中的全部TS片段，极大地提升了工作效率，省去手动逐个下载的繁琐过程。 2. 智能排序：...
TS 编译工具！从 ts-loader 到 Babel
iamxuqianqian的博客
04-23 7261
ts-loader 这是用于 webpack 的 TypeScript 加载器，将 TypeScript 编译成 JavaScript。 ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。 安装 yarn add ts-loader --dev or npm install ts-loader --save-dev 如果还没有安装 TypeScript，你需要先安装一下： yarn add typ
【TypeScript 专题】之 Ts 中的类（class）
余光的博客
08-11 3544
> 在 ES6 中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。它本质仍然是函数，它让对象原型的写法更加清晰、更像面向对象编程的语法。 > 在 TypeScript 中，除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。 这一节主要介绍类的用法，让我们平滑的从ES6过渡到Ts吧～
typescript中class类知识点整理
m0_54944506的博客
01-04 1734
ts中的类和js中类基本相同，但还是有所差别，所一还是需要单独去写一下 名词解释：派生类：子类 基类：父类 一个简单例子 class Person { name: string age: number constructor(name: string, age: number) { this.name = name; this.age = age; } say() { console.log(`年龄为${this.ag
TS-class
qq_41219789的博客
09-10 472
TS学习 Class（类） 基本使用 class Person{ name:string; age:number; constructor(name:string,age:number){ this.name = name; this.age = age; } print(){ return this.name...
ts(typescript) 类(class)初探
twinkle的博客
01-16 4096
ts 类初探 当大家看到typescript（ts） 中的类（class）时候，可能好多人都会想起面向对象，对的，面向对象是许多后台的一种编程思想，比如： 本人曾经接触的java， 里面就是用的是面向对象的思想。但是本文不讨论面向对象，值讨论ts 中 class 新增的语法，和一些使用方法以及注意事项。 回顾es6中的类 // 定义一个用户的类，里面有两个属性，名字和年龄 class User { constructor(name, age) { this.sex = "男";
ts 中 class 类介绍
fukua007的博客
08-06 278
/ public 修饰的属性可以在任意位置访问（修改）默认值。// private 私有属性，只能在类内部进行访问（修改）对象中主要包含两个部分 ：1.属性 2.方法。// 以abstract开头的类是抽象类。// 抽象类就是专门用来被继承的类。使用class 关键字定义一个类。constructor 构造函数。// 抽象类中可以添加抽象方法。继承 extends。
ts的class类
qq_44277696的博客
03-22 718
声明一个类 class Point { public x: number public y: number constructor(x: number,y: number) { this.x = x; this.y = y; } public getPosition () { return `(${this.x},${this.y})` } } const point = new Point(1,2); console.log(point); 修饰符 pu
ts中class类讲解
thickhair_cxy的博客
10-01 1332
class Person { name: string static sex: string = '男' public gy = '公有的'//默认是公有的，可以被任何地方访问 private sy = '私有的'//只能在当前类内部访问 protected bh: string = '保护的'//只能在当前类内部和子类内部访问 constructor(n: string) { this.name = n console.log('保护1', this.bh)
ts的类—class
liucai1018的博客
09-12 6186
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类</title> <script src="class.js"></script> ...
ts 之 定义类 Class基础（ 继承、多态、修饰符 public、静态属性、静态属性、抽象类）
weixin_47409897的博客
09-08 1064
ts 之 定义类 Class基础（ 继承、多态、修饰符 public、静态属性、静态属性、抽象类）
ts类的修饰符
05-27
TypeScript中类的修饰符有以下几种： 1. public public是默认修饰符，即不写修饰符时默认为public。public修饰的属性或方法可以在类的内部和外部使用。 2. private private修饰的属性或方法只能在类的内部使用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值