TypeScript上手04 类的理解再也不用担心了

420 阅读3分钟

这是我参与更文挑战的第4天,活动详情查看更文挑战 前端在在使用js的时候已经对类有了一定的认识,那我们在转为使用TypeScript的时候又该怎么理解和使用TypeScript里面的类呢?

1 类的基本概率及使用

1.2 类的基本使用

使用关键字 class

定义一个类 里面有姓名属性和一个得到姓名的方法

class Lady {
    content = "Hi,better";
    sayHello() {
      return this.content;
    }
}
  const goddess = new Lady();
  console.log(goddess.sayHello());

1.2 类的继承

class women extends Lady {
  sayLove() {
    return "I love you";
  }
}
const goddess = new women();
console.log(goddess.sayHello());
console.log(goddess.sayLove());

1.3 类的重写

class women extends Lady {
    sayLove() {
      return "I love you!";
    }
    sayHello() {
      return "Hi , honey!";
    }
  }

1.4 super 关键字

就是super关键字的使用,比如我们还是想使用Lady类中说的话,但是在后面,加上你好两个字就可以了。这时候就可以使用super关键字,它代表父类中的方法。那我们的代码就可以写成这个样子了。

class women extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHello() {
    return super.sayHello() + "。你好!";
  }
}


2 类的访问类型基于的三个关键字段

private protected public

class Person {
    name: string;
  }
  
  const person = new Person();
  person.name = "jspang.com";
  
  console.log(person.name);

2.1 public 访问属性

public从英文字面的解释就是公共的或者说是公众的,在程序里的意思就是允许在类的内部和外部被调用. 如果不在类里对name的访问属性进行定义,那么它就会默认是public访问属性。


class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')
    }
}
//-------以下属于类的外部--------
const person = new Person()
person.name = 'better'
person.sayHello()
console.log(person.name)

2.2 private

只允许在类的内部调用不允许在外部调用


class Person {
    private name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}
//-------以下属于类的外部--------
const person = new Person()
person.name = 'better'    //此处报错
person.sayHello()
console.log(person.name)  //此处报错

2.3 protected 允许在类内及继承的子类中使用

class Person {
    protected name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}

class Teacher extends Person{
    public sayBye(){
        this.name; //此处不报错
    } 
}

3. 类的构造函数

3.1 构造函数概念

构造函数就是在类被初始化的时候,自动执行的一个方法 构造函数的关键字:constructor

希望在person类中定义一个name属性,name属性并不给初值,在new出对象的时候通过传递参数的形式给name赋值

class Person{
    constructor(public name:string){
    }
}

const person= new Person('better')
console.log(person.name)

3.2 类继承中的构造器的写法

在子类中使用构造函数需要用super() 调用父类的构造函数

class Person{
    constructor(public name:string){}
}

class Teacher extends Person{
    constructor(public age:number){
        super('better')
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)

这就是子类继承父类并有构造函数的原则,就是在子类里写构造函数时,必须用super()调用父类的构造函数,如果需要传值,也必须进行传值操作。就是是父类没有构造函数,子类也要使用super()进行调用,否则就会报错。

class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super()
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)

4 TypeScript类的 Getter Setter static使用

4.1 类的 Getter Setter

对于p类的访问类型private 的使用,它的最大的作用是封装一个属性,然后通过Getter Setter来访问和修改这个属性

对于xaiojiejie的age是一个不能随便告诉别人的属性

class women {
  constructor(private _age:number){}
}

如果别人想知道,就必须通过getter属性,getter属性的关键字是get

class women {
  constructor(private _age:number){}
  get age(){
      return this._age
  }
}
 
const Alan = new women(28)

console.log(Alan.getAge)

_age是私有的,那类的外部就没办法改变,所以这时候可以用setter属性进行改变

class women {
  constructor(private _age:number){}
  get age(){
      return this._age-10
  }
  set age(age:number){
    this._age=age
  }
}

const Alan = new women(28)
Alan.age=25
console.log(Alan.age)

4.2 类中的static

一般想使用这个类的实例,就要先New出来()

class Girl {
  sayLove() {
    return "I Love you";
  }
}

const girl = new Girl();
console.log(girl.sayLove());

但是现在你不想new出对象,而直接使用这个方法,那TypeScript为你提供了快捷的方式,用static声明的属性和方法,不需要进行声明对象,就可以直接使用,代码如下。

class Girl {
  static sayLove() {
    return "I Love you";
  }
}
console.log(Girl.sayLove());