前言
今天继续typescript的学习,开始ts类的学习。
类
类的实现
在ES6中新增了类的概念。我们先看ES6中类的实现。
class Person {
constructor(name,age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
}
let p1 = new Person('小张',24)
console.log(p1.getName())
在ts中类的定义。ts中类的定义跟ES6差别不大。只是ts中新增了对属性的类型的校验。因此我们在使用属性之前必须先定义属性的类型。比如下面Person类中的name和age属性。在constructor和getName中使用之前必须先指定其类型。
class Person {
// 指定参数类型
name:string;
age:number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
getName():string{
return this.name;
}
}
let p1 = new Person('小红',24)
console.log(p1.getName())
类的继承
ES6中的继承:在ES6中通过extends和super来实现继承。
// ES6中的继承
class Student extends Person{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
getSex(){
return this.sex
}
}
let s = new Student('小李',25,'男')
console.log(s.getName())
console.log(s.getSex())
ts中类的继承和ES6中非常相似。
class Person {
// 指定参数类型
name:string;
age:number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
getName():string{
return this.name;
}
}
let p1 = new Person('小红',24)
console.log(p1.getName())
// 类的继承
class Student extends Person{
sex:string;
constructor(name:string,age:number,sex:string){
super(name,age);
this.sex = sex;
}
getSex():string{
return this.sex
}
}
修饰符
在ts中定义属性的时候,提供了三种修饰符。分别是public,protected和private。这三种修饰符用来表示属性能够被访问的范围。
public 表示公有的 可以在类中,类外面,子类中被访问。
protected 表示被保护的类型 可以在类中和子类中被访问。不能在类外面被访问。
private 表示私有类型 可以在类中访问。在子类和类外部都无法访问。
1.public、protected和private修饰符定义的属性在类内部都可以被访问。
class Human {
// 指定参数类型
public name:string;
protected age:number;
private salary:string;
constructor(name:string,age:number,salary:string){
this.name = name;
this.age = age;
this.salary = salary;
}
getName():string{
return this.name;
}
getAge():number{
return this.age;
}
getSalary():string{
return this.salary;
}
}
2.public修饰符定义的属性在类外部可以被访问。protected和private修饰符定义的属性在类外部无法被访问。
当我们在外部访问privagte定义的属性时,会出现报错。
这里的salary是private修饰的属性,无法进行设置。
let h2 = new Person('小红',24,10000) // Expected 2 arguments, but got 3.
console.log(h1.getAge()); // 报错 protected修饰的age属性无法在外部被访问。
3.public和protected修饰符定义的属性可以在子类中被访问。但是private修饰符定义的属性无法在子类中访问。
比如,当子类继承父类。调用super()方法时,如果传入了父类中私有的属性那么会报错。如果在子类方法中想要获取父类
私有属性也会报错。
class People extends Person{
constructor(name:string,age:number,sex:string){
super(name,age,sex); // 报错
}
getSex():string{
return this.sex; // 报错
}
}
readonly修饰符
在ts中还提供了readonly修饰符来将属性设置为只读。只读属性必须在生明时或者构造函数中被初始化。
class Teacher {
readonly name:string;
constructor(name:string){
this.name = name;
}
getName():string{
return this.name
}
}
let t = new Teacher('张三')
console.log(t.name);
console.log(t.getName());
t.name = '李四' // 修改readonly 修饰的属性时报错。
静态方法
在ES6中,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Foo{
constructor(name,age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
static getAge(){
return this.age;
}
}
let f = new Foo('刘亦菲',24);
console.log(f.getName()) // 刘亦菲
console.log(Foo.getAge()) // undefined 这里的this指的是类Foo
console.log(f.getAge()) // 静态方法无法被实例调用
ts中静态方法的使用:通过使用static关键字定义静态属性和静态方法。
静态属性和静态方法只能通过类名来进行访问。实例和this都无法进行访问。
// 静态方法
class Foo{
// 静态属性
static obj = {
name:'刘亦菲',
age:30
}
public name:string
constructor(name:string){
this.name = name;
}
// 静态方法
static getAge(){
// 调用静态属性时需要使用类来调用。
return Foo.obj.age
}
getName(){
return this.name
}
}
let f = new Foo('晓明')
console.log(Foo.getAge()) // 调用静态方法
console.log(f.getName()) // 调用实例方法
抽象类
抽象类是作为其他继承类的基类使用。他们一般不会被实例化。在ts中用abstract定义抽象类和抽象方法。
abstract class Animal{
abstract eat():any;
}
1.抽象类无法被实例化
abstract class Animal{
abstract eat():any;
}
let a = new Animal() // 报错Cannot create an instance of an abstract class
2.抽象类中的抽象方法,不包含具体实现。只定义方法签名,不定义方法体。
abstract class Animal{
abstract eat():any; // 只有方法名,没有方法体
abstract play:any{} // 报错 抽象方法不能有实现,也就是说不能有方法体。
}
3.抽象类的子类必须实现抽象类中的抽象方法。
// 抽象类
abstract class Animal{
protected food:string;
protected ball:string;
constructor(food:string,ball:string){
this.food = food;
this.ball = ball;
}
abstract eat():any;
abstract play():any;
}
// 子类
class Dog extends Animal{
constructor(food:string,ball:string){
super(food,ball)
}
// 必须实现抽象类中的抽象方法
eat(){
console.log(`小狗在吃${this.food}`)
}
play(){
console.log(`小狗在玩${this.ball}`)
}
}
let dog = new Dog('骨头','篮球')
dog.eat()
dog.play()