前言
TypeScript作为一门前端语言,其形式上更类似于后端java语言,相对于JavaScript而言TypeScript更体现出面向对象的编程方式,其提供的参数校验、接口、泛型等等,都使得ts在开发大型前端项目时有着出色的表现,因此作为一名前端开发人员,掌握ts语言是非常有必要的,这里博主将自己在学习TypeScript时,整理的一些基础知识笔记分享出来。 本章内容包括:TypeScript中类、多态、抽象方法和抽象类的基础知识
类的基础用法
TypeScript中类的基础用法一部分和JavaScript中ES6的类有些相似,这里先介绍这一部分
- 类的定义
//类的定义 通过class关键字
class Father{
name:string//实例属性
//构造函数
constructor(name:string){
this.name = name
}
//实例方法
run():string{
return `父亲${this,name}在跑步`
}
}
//实例化一个父对象
const father1 = new Father("张三")
father1.run() //父亲张三在跑步
- 类的继承 通过继承 子类可以继承父类的 允许被继承访问的属性和方法,继承父类的构造方法
// 继承需要使用extends关键字
class Son extends Father{
//除非子类中不写构造函数,否则构造函数内部必须要有super关键字
constructor(name:string){
//super会借用父类的构造方法
super(name)
}
//子类也可以重写父类的构造方法
run():string{
return `儿子${this.name}在跑步`
}
}
const son1 = new Son("小明")
son1.run() //儿子小明在跑步
类的修饰符
-
public 共有的 用 public 标示的方法和属性 在类的内部、类的外部、子类都可以进行访问
-
protected 保护的 用 protected 标示的方法和属性 在类的内部和子类中都可以进行访问,但是类外部无法访问
-
private 私有的 用 private 标示的方法和和属性 只能在类的内部访问,类的外部和子类都无法访问
class Message{
public name:string //共有的 注意默认不写修饰符也是public
protected date:string //保护的
private content:string = "我是一个私有的内容" //私有的
constructor(name:string,date:string) {
this.name = name
this.date = date
}
getContent(){
return this.content //成功 "我是一个私有的内容" private修饰的类内部可以访问
}
}
const message1 = new Message("新闻","12.12")
message1.name //成功 "新闻"
message.date //报错 date是被protected修饰的可以被类内部和子类访问
message.content //报错 因为content是Message私有的 外部和子类都不能直接访问
class Note extends Message{
constructor(name:string,date:string) {
super(name,date)
}
getContent(){
return this.content //报错 因为content是Message私有的 子类不能访问
}
getDate(){
return this.date //成功 date是被protected修饰的可以被类内部和子类访问
}
getName(){
return this.name //成功 name是public修饰的子类可以访问
}
}
静态属性和静态方法
class Message {
constructor(){
}
static status:string = "我是静态属性"//静态属性
name:string//实例方法
static changeStatus():void{
console.log(this.name)//报错 静态方法只能访问静态属性
console.log(this.status)//成功 "我是静态属性"
}
call():void{
console.log(this.status)//成功 "我是静态属性" 实例方法可以访问静态属性
}
}
const message1 = new Message()
//静态属性和方法的调用只能通过类名.的形式
message1.status //失败
Message.changeStatus() //成功
多态
父类定义方法,但是不实现,让其子类去实现,每个子类都有不同的表现 多态属于继承
class Animal{
name:string
constructor(name:string){
this.name = name
}
eat():void{}
}
class Cat extends Animal{
name:string
constructor(name:string){
super(name)
}
eat():void{
console.log("小猫吃饭的方法")
}
}
class Pig extends Animal{
name:string
constructor(name:string){
super(name)
}
eat():void{
console.log("小猪吃饭的方法")
}
}
抽象方法和抽象类
用 abstract 关键字定义抽象类和抽象方法,在抽象类中抽象方法不包含具体实现必须在派生类中实现
抽象方法和抽象类的使用有以下几个注意点
- 抽象类和抽象方法一般用来定义某种标准,可以用来实现多态
- 抽象类中可以有实例方法,但是必须包含一个抽象方法,否则没有意义
- 抽象方法只能存在于抽象类中
- 继承抽象类的子类,必须实现抽象类中定义的抽象方法
- 抽象类无法被实例化 下面我们依然用动物的案例来展示
//抽象类
abstract classs Animal{
public name:string
constructor(name:string){
this.name = name
}
abstract eat():any //抽象方法
}
const animal = new Animal("动物") // 报错 抽象类无法被实例化
//派生类去实现抽象类
class Cat extends Animal{
constructor(name:string){
this.name = name
}
//子类必须去实现 继承抽象类的抽象方法 否则报错
eat():any{
console.log("小猫的吃饭方法")
}
abstract fn():void{}//报错 抽象方法只能在抽象类中定义
}