这是我参与更文挑战的第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());