【Typescript基础】类的使用

简介: 【Typescript基础】类的使用

认识类的使用


在早期的JavaScript开发中(ES5)我们需要通过函数和原型链来实现类和继承,从ES6开始,引入了class关键字,可以 更加方便的定义和使用类。


TypeScript作为JavaScript的超集,也是支持使用class关键字的,并且还可以对类的属性和方法等进行静态类型检测。

在封装一些业务的时候,类比函数更具有强大的封装性,所以我们需要掌握他们。


类的定义


使用class 关键字来定义一个类。如果类型没有声明,默认类型是any

class Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  eating() {
    console.log(this.name + " eating")
  }
}
const p = new Person("elva", 18)
console.log(p.name)
console.log(p.age)
p.eating()

微信图片_20221012163058.png

类的继承


类有三大特性,分别是继承、封装、多态。使用extends关键字来实现继承,子类中使用super来访问父类

微信图片_20221012163125.png

类的成员修饰符


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


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

微信图片_20221012163205.png

微信图片_20221012163226.png

只读属性readonly


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

只读属性是可以在构造器中赋值, 赋值之后就不可以修改

属性本身不能进行修改, 但是如果它是对象类型, 对象中的属性是可以修改

class Person {
  readonly name: string
  age?: number
  readonly friend?: Person
  constructor(name: string, friend?: Person) {
    this.name = name
    this.friend = friend
  }
}
const p = new Person("elva", new Person("kobe"))
console.log(p.name)
console.log(p.friend)
// 不可以直接修改friend
// p.friend = new Person("james")
if (p.friend) {
  p.friend.age = 30
} 

getters/setters


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

微信图片_20221012163317.png

静态成员


在TypeScript中通过关键字static来定义类级别的成员和方法

微信图片_20221012163322.png

抽象类 abstract


抽象类:是使用abstract声明的类

抽象方法:在TypeScript中没有具体实现的方法(没有方法体),就是抽象方法

微信图片_20221012163416.png

抽象类有如下的特点:

抽象类是不能被实例的话(也就是不能通过new创建)

抽象方法必须被子类实现,否则该类必须是一个抽象类;


类的类型


类本身也是可以作为一种数据类型的。

微信图片_20221012163456.png

相关文章
|
6月前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
6月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
1月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
133 3
|
5月前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
6月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
66 0
|
2月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
24 0
typeScript进阶(13)_类与注意事项(八项特性)
|
5月前
|
JavaScript 前端开发 开发者
10.【TypeScript 教程】类(Class)
10.【TypeScript 教程】类(Class)
34 2
|
4月前
|
JavaScript 前端开发
TypeScript(七)类
TypeScript(七)类
39 0
|
5月前
|
JavaScript
TypeScript类
TypeScript类
|
5月前
|
JavaScript Java C#
typescript 类类型
typescript 类类型
下一篇
无影云桌面