TS入门——03.类

TS入门——03.类

类的简单概述

类描述了所创建的对象共同的属性和方法,在ES6之前,js是通过构造函数来描述类的,这里我们主要讲ES6之后的类。ES6是使用class关键字来定义类的,class关键字紧跟定义的类名,在类里可以定义接收参数的构造器constructor,可以定义原型方法,也可以定义静态属性和静态方法。

ts类的定义

ts的定义类的方法和js定义类的方法大体一致,只是在类实例化时需要初始化字段,对字段进行修饰符约束
TypeScript 类定义一个Person类示例如下

class Person {
  name: string;  // 默认省略public公有前缀
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  };
  sayHi(): void {
    console.log(this.name + ',今年' + this.age)
  }
}

var me = new Person('lucky', 22);

console.log(me.name); // lucky
me.sayHi(); // lucky,今年22

ts类的继承

ts中类的继承和js中的一样,都是使用extends关键字来实现继承的,同时使用super关键字继承父类的属性,还可以重写父类的方法,如下定义一个Student类继承上面的Person类

class Student extends Person {
  sex: string;
  constructor(name: string, age: number, sex: string) {
    // 使用super关键字继承父类的属性
    super(name, age);
    this.sex = sex
  }
  checkSex(): void {
    console.log(this.name + ',性别:' + this.sex)
  }
  // 父类方法的重写
  sayHi(): void {
    super.sayHi()
    console.log('子类重写sayHi了')
  }
}

var myson = new Student('luckyson', 22, '男')
myson.sayHi() // luckyson,今年22 子类重写sayHi了
myson.checkSex() // luckyson,性别:男

类的修饰符

ts对类中的属性和方法提供了三种修饰符:
public(默认的): 代表公有,在类里面、子类及类外部都可以访问
protected:代表受保护的,在类里面、子类里面有权访问,在类外部无法访问
private:代表私有的,在类里面有权访问,子类和类外部都没权限访问

class Person {
  public name: string;  // public公有前缀,自身,子类,外部均可访问(public也可省略不写)
  protected age: number; // protected受保护前缀,自身,子类有权访问,外部无权访问
  private sex: string; // private私有前缀,自身有权访问,子类和外部无权访问
  constructor(name: string, age: number, sex: string) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  };
  public sayHi(): void {
    // 类自身内部有权访问任一修饰符的属性或方法
    console.log(this.name + this.age + this.sex)
  }
}

var onePerson = new Person('张三', 22, '男');
onePerson.name; // name为public修饰的公有属性,在类外部有权访问
onePerson.sayHi(); // sayHi为public修饰的公有方法,在外部有权访问
// onePerson.age; // 报错 属性“age”受保护,只能在类“Person”及其子类中访问,外部无法访问
// onePerson.sex; // 报错 属性“sex”为私有属性,只能在类“Person”中访问,外部无法访问

class Student extends Person {
  public address: string;
  constructor(name: string, age: number, sex: string, address: string) {
    // 使用super关键字继承父类的属性
    super(name, age, sex);
    this.address = address
  }
  sayHello(): void {
    console.log(this.name, this.age) // name和age分别为公有属性和受保护属性,子类中可以访问
    // console.log(this.sex) // 报错 属性“sex”为私有属性,只能在类“Person”中访问
  }
  // 父类方法的重写
  sayHi(): void {
    super.sayHi() // sayHi为父类公有方法,子类有权访问
    console.log('重写父类')
  }
}

var oneStudent = new Student('李华', 22, '男', '江西瑞金');
oneStudent.address // address为public修饰的公有属性,在类外部有权访问
oneStudent.name; // name为public修饰的公有属性,在类外部有权访问
oneStudent.sayHello() // sayHello为公有方法,在类外部有权访问
oneStudent.sayHi() // sayHi为公有方法,在类外部有权访问
// oneStudent.age; // 报错 属性“age”受保护,只能在类“Person”及其子类中访问,外部无法访问
// oneStudent.sex; // 报错 属性“sex”为私有属性,只能在类“Person”中访问,外部无法访问

类的静态成员

static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用

class Car{
  // 静态属性
  static color: string;
  // 实例属性
  public name: string;
  constructor(name: string) {
    this.name = name
  };
  // 实例方法
  sayHi(): void {
    console.log(this.name)
  }
  // 静态方法
  static Run(): void {
    console.log(Car.color)
  }
}
// 直接用类名访问静态成员
Car.color = 'black'
Car.Run() // black
var benci = new Car('benci')
console.log(benci.name) //benci
benci.sayHi() // benci
// benci.color // 报错,实例对象无法访问静态成员
// benci.Run() // 报错,实例对象无法访问静态成员

抽象类

讲到抽象类,就必须讲到一个类的三大特征之一多态,顾名思义就是同一个行为具有多个不同表现形式或形态的能力,放在ts类中就是子类继承了父类的某个方法并通过重写后展现了不同的表现。
ts抽象类即用到了多态的思想,ts中用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在子类中实现,同时抽象类不能被实例化,如下

// 用abstract关键字定义抽象类和抽象方法
abstract class Animal {
  public name: string;
  constructor(name: string) {
    this.name = name
  };
  // 抽象方法 抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
  abstract sayHi(): any; // 抽象方法只能放在抽象类中
}

// ts中的抽象类,它是提供其他类继承的基类,不能直接被实例化
// var dog = new Animal('lucky') //报错
class Dog extends Animal {
  constructor(name: string) {
    super(name)
  }
  sayHi() {
    return this.name + '都是汪汪叫'
  }
}

var chali = new Dog('chali')
console.log(chali.sayHi()) // chali都是汪汪叫

// class Cat extends Animal {
//   constructor(name: string) {
//     super(name)
//   }
//   // 不实现sayHi方法会报错
// }

好了ts类的学习到此结束,若有不正,还请指教

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值