TypeScript-类(Classes)的创建与继承 - 《代码人生》

概要
类的创建
- 源码

概要

类的创建

源码

ts ``` //创建一个类 class Person{ //增加两个属性 name:string; age:number; //增加可以传参的构造方法 constructor(name:string,age:number){
```
  this.name = name;
  this.age = age;
```
} //增加一个自定义的普通的打印函数 print(){
```
  return this.name + ":" + this.age;
```
} }

//使用上面创建的类 // var p = new Person();//这里在使用上面的类时没有传递参数是会报错的，因为上面定义的 constructor 构造方法中存在参数，所以这里也一定要传递参数 var p = new Person(‘xiaochuan’,22); alert(p.print());


- HTML

<!DOCTYPE html>


- 浏览器输出效果
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-e1502fd1e8bf552b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
##类的继承<br />
####源码一  未使用 `constructor` 构造方法
- ts

//创建一个最基本的类 class Person{ //增加两个属性 name:string; age:number;

//增加一个自定义的普通的输出函数
tell(){
    return this.name + ":" + this.age;
}

}

//再新建一个扩展自 Person 这个类的子类 //这样扩展之后这个 Student 就也有了 name 和 age 两个属性，还用 tell 这个方法 class Student extends Person{ //还可以给 Student 新增自己的属性 school:string; //这里还可以重写继承而来的方法 tell(){ return this.name + “:” + this.age + “:” + this.school; } }

//使用这个子类 var s = new Student(); // s.tell();//这样直接写是没有任何的输出的因为上面没有对其属性做任何的赋值 //下面是赋值之后再输出 s.name = ‘xiaochuan’; s.age = 22; s.school = ‘北京大学’; alert(s.tell());


- HTML

<!DOCTYPE html>


- 浏览器输出结果
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-d477922e3f1a09d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
####源码二  使用 `constructor` 构造方法实现
- ts

//接着再在上面的 Person 类中增加一个 constructor 构造方法

//创建一个最基本的类 class Person{ //增加两个属性 name:string; age:number;

//新增一个构造方法
constructor(name:string,age:number){
    this.name = name;
    this.age = age;
}
//增加一个自定义的普通的输出函数
tell(){
    return this.name + ":" + this.age;
}

}

//再新建一个扩展自 Person 这个类的子类 //这样扩展之后这个 Student 就也有了 name 和 age 两个属性，还用 tell 这个方法 class Student extends Person{ //还可以给 Student 新增自己的属性 school:string;

//这里因为 Person 有构造方法如果子类不传递的话就会报错，所以也要增加
//这里参数直接传递这个子类自增的属性即可 
constructor(school:string){
    //再在内部使用 super 的方法继承来自 Person 父类中定义的方法 b并将相应的参数传递进去
    super('xiaochuan',22);
    this.school = school;
}
//这里还可以重写继承而来的方法
tell(){
    return this.name + ":" + this.age + ":" + this.school;
}

}

//这个时候使用这个子类时直接传递 school 的值即可 var s = new Student(‘北京大学’); //上面已经通过构造方法将所有的属性值都已经传递过了所以这里就不需要再传递了，可以直接输出结果了 // s.name = ‘xiaochuan’; // s.age = 22; // s.school = ‘北京大学’;

alert(s.tell());


- HTML

<!DOCTYPE html>

```

浏览器输出结果