一起入手TypeScript（四）
10 TypeScript 类的概念和使用
TypeScript 中类的概念和ES6中原生类的概念大部分相同，但是也额外增加了一些新的特性。我在这里会完全从一个新手的角度，讲解类的各项知识点。
10.1 类的基本使用
新建一个文件，叫做demo10.ts,然后定义一个最简单的Lady类,这里要使用关键字class,类里边有姓名属性和一个得到姓名的方法
```ts
class Lady {
content = "Hi，帅哥";
sayHello() {
return this.content;
}
}
const goddess = new Lady(); console.log(goddess.sayHello()); // ts-node demo10.ts //result：Hi，帅哥 ```
代码下面的注释的意思是：运行ts-node demo10.ts命令，得到的结果是：Hi，帅哥
这是一个最简单的类了，如果你有些编程经验，对这个一定很熟悉
10.2 类的继承
TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends,比如我们这里新建一个xiaoJieJie的类，然后继承自Lady类，在XiaoJieJie类里写一个新的方法，叫做sayLove,具体代码如下。
class xiaoJieJie extends Lady{
sayLove(){
return "I love you.";
}
}
const Wibus = new xiaoJieJie();
console.log(Wibus.sayHello());
console.log(Wibus.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥 I love you.类写好以后，我们声明的对象是xiaoJieJie这个类，我们同时执行sayHello()和sayLove()都是可以执行到的，这说明继承起作用了
10.3 类的重写
讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJies这个类里重写父类的sayHello()方法
class XiaoJieJies extends Lady {
sayLove(){
return "I love you.";
}
sayHello() {
return "Hi, honey!";
}
}
const wibus = new XiaoJieJies();
console.log(wibus.sayHello());
console.log(wibus.sayLove());
// ts-node demo10.ts
// result: Hi, honey! I love you.10.4 super 关键字的使用
比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法
class Xiaojiejie extends Lady {
sayLove() {
return "I love you!";
}
sayHello() {
return super.sayHello() + ".你好！";
}
}
const goddesss = new Xiaojiejie();
console.log(goddesss.sayHello());
console.log(goddesss.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥.你好！I love you!那么整个下来呢，我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲
Demo10.ts
/**
* Demo10.ts
* TypeScript 类的概念和使用
* @date 2021-1-2
* @author Wibus
*/
// TypeScript 中类的概念和 ES6 中原生类的概念大部分相同，但是也额外增加了一些新的特性
// 1 类的基本使用
// 下面是最简单的类
class Lady {
content = "Hi，帅哥";
sayHello() {
return this.content;
}
}
const goddess = new Lady();
console.log(goddess.sayHello());
// ts-node demo10.ts
//result：Hi，帅哥
// 2 类的继承
// TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends,比如我们这里新建一个XiaoJieJie的类，然后继承自Lady类，在XiaoJieJie类里写一个新的方法，叫做sayLove,具体代码如下。
class xiaoJieJie extends Lady{
sayLove(){
return "I love you.";
}
}
const Wibus = new xiaoJieJie();
console.log(Wibus.sayHello());
console.log(Wibus.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥 I love you.
// 类写好以后，我们声明的对象是XiaoJieJie这个类，我们同时执行sayHello()和sayLove()都是可以执行到的，这说明继承起作用了
// 3 类的重写
// 讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJie这个类里重写父类的sayHello()方法
class XiaoJieJies extends Lady {
sayLove(){
return "I love you.";
}
sayHello() {
return "Hi, honey!";
}
}
const wibus = new XiaoJieJies();
console.log(wibus.sayHello());
console.log(wibus.sayLove());
// ts-node demo10.ts
// result: Hi, honey! I love you.
// 4 super 关键字的使用
// 比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法
class Xiaojiejie extends Lady {
sayLove() {
return "I love you!";
}
sayHello() {
return super.sayHello() + ".你好！";
}
}
const goddesss = new Xiaojiejie();
console.log(goddesss.sayHello());
console.log(goddesss.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥.你好！I love you!
// 我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲11 TypeScript 中类的访问类型
上节已经简单学习了TypeScript中类的使用，这节我们继续学习一下类中的访问类型。其实类的访问类型就是基于三个关键词private、protected和public,也是三种访问类型
11.1 简单的类
我们来写一个简单的类先，我们定义一个 Person 类，然后使用这个类的对象，进行赋值，最后打印在控制台上。
class Person {
name: string;
}
const person = new Person();
person.name = "Wibus";
console.log(person.name);
// ts-node demo11.ts
// result: Wibus写完后我们直接可以在Terminal(中),输入ts-node demo11.ts进行查看结果，结果会打印出Wibus
11.2 public 访问属性
这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义，那么它就会默认是public访问属性。所以，我们刚刚所写的类相当于这样子
class Person2 {
public name: string;
};
public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.
比如说，我们在类里面写一个sayHello() 方法，访问属性为public
class Person3 {
public name: string;
public sayhello(){
console.log(this.name + ' say hello');
};
};
// ————————下面的是外部调用——————————
const person3 = new Person3;
person3.name = "Wibus";
person3.sayhello();
// ts-node demo11.ts
// result: Wibus say hello这是的this.name就是类的内部调用。我们在下面在执行一下这个方法person3.sayHello(), 终端中可以看到一切正常运行了，顺利打印
11.3 private 访问属性
private访问属性的意思是，只允许在类的内部被调用，外部不允许调用
现在我们把name属性改成private,这时候在类的内部使用不会提示错误，而外部,以及子类使用VSCode直接会报错。
class Person4 {
private name: string;
private sayhello(){
console.log(this.name + ' say hello');
};
};
class Person_Person4 extends Person4 {
public saySomeThing() {
console.log(this.name);
}
}
//VSC Error: 属性“name”为私有属性，只能在类“Person4”中访问。
// ————————下面的是外部调用——————————
const person4 = new Person4;
person4.name = "Wibus";
person4.sayhello();
// VSC Error: 属性“sayhello”为私有属性，只能在类“Person4”中访问。11.4 protected 访问属性
protected允许在类内及继承的子类中使用
把name的访问属性换成protected,这时候外部调用name的代码会报错，内部的不会报错，和private一样。这时候我们再写一个Person_Person5类，继承于Person4
class Person5 {
protected name: string;
protected sayhello(){
console.log(this.name + ' say hello');
};
};
class Person_Person5 extends Person5 {
public sayBye(){
return "this.name";
}
}
// ————————外部调用——————————
const person5 = new Person5;
person5.name = "Wibus";
person5.sayhello();
// VSC Error: 属性“sayhello”受保护，只能在类“Person5”及其子类中访问。
// ————————Person_Person5 类 ——————
const person_person5 = new Person_Person5;
person_person5.sayBye(); //VSC 不报错那么通过这个例子相信你一定知道什么是类的内部和类的外部，也知道了三个访问类型的区别了
Demo11.ts
/**
* Demo11.ts
* TypeScript 中类的访问类型
* @date 2021-1-3
* @author Wibus
*/
// 上节已经简单学习了TypeScript中类的使用，这节我们继续学习一下类中的访问类型。其实类的访问类型就是基于三个关键词private、protected和public,也是三种访问类型
// 1 简单的类
class Person {
name: string;
}
const person = new Person();
person.name = "Wibus";
console.log(person.name);
// ts-node demo11.ts
// result: Wibus
// 2 public 访问属性
// 这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义，那么它就会默认是public访问属性。
// 相当于
class Person2 {
public name: string;
};
// public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.
class Person3 {
public name: string;
public sayhello(){
console.log(this.name + ' say hello');
};
};
// ————————下面的是外部调用——————————
const person3 = new Person3;
person3.name = "Wibus";
person3.sayhello();
// ts-node demo11.ts
// result: Wibus say hello
// 3 private 访问属性
// private 访问属性的意思是，只允许在类的内部被调用，外部不允许调用
class Person4 {
private name: string;
private sayhello(){
console.log(this.name + ' say hello');
};
};
class Person_Person4 extends Person4 {
public saySomeThing() {
console.log(this.name);
}
}
//VSC Error: 属性“name”为私有属性，只能在类“Person4”中访问。
// ————————下面的是外部调用——————————
const person4 = new Person4;
person4.name = "Wibus";
person4.sayhello();
// VSC Error: 属性“sayhello”为私有属性，只能在类“Person4”中访问。
// 4 protected 访问属性
// protected 允许在类内及继承的子类中使用
class Person5 {
protected name: string;
protected sayhello(){
console.log(this.name + ' say hello');
};
};
class Person_Person5 extends Person5 {
public sayBye(){
return "this.name";
}
}
// ————————外部调用——————————
const person5 = new Person5;
person5.name = "Wibus";
person5.sayhello();
// VSC Error: 属性“sayhello”受保护，只能在类“Person5”及其子类中访问。
// ————————Person_Person5 类 ——————
const person_person5 = new Person_Person5;
person_person5.sayBye(); //VSC 不报错12 TypeScript 类的构造函数
构造函数就是在类被初始化的时候，自动执行的一个方法。我们通过这个构造方法经常作很多需要提前完成的工作，比如显示页面前我们要从后台得到数据
12.1 类的构造函数
简单来说，构造函数的关键字就是constructor
新建一个Person 类，类的里边定义一个name，但是name我们并不给他值,然后我们希望在new出对象的时候，直接通过传递参数的形式，给name赋值，并打印出来。这时候我们就需要用到构造函数了
class Person{
public name: string;
constructor(name:string){
this.name = name;
};
};
const person = new Person('Wibus');
console.log(person.name);
// ts-node demo12.ts
// result: Wibus这是最常规和好理解的写法，那么既然都这么说了，就是有更简单的写法啦
12.1.1 简单的写法
class Person2 {
constructor(public name:string){} // 这个地方的name需要写上访问属性
};
const person2 = new Person2('Wibus2');
console.log(person2.name);这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，这是一种简化的语法
12.2 类继承中的构造器写法
普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数，如果你看不懂我在说啥的话，看下面的代码
class Teacher extends Person2 {
constructor(public age: number){
super('Wibus');
};
};
const teacher = new Teacher(18);
console.log(teacher.age);
console.log(teacher.name);如果你不写super('Wibus');的话，VSC将会报错：派生类的构造函数必须包含 "super" 调用。
当然你可以super(''); 直接过去😂
父类没有构造函数，子类也要使用
super()进行调用，否则就会报错。
class Person3 {};
class Teacher2 extends Person3 {
constructor(public age: number){
super();
};
};
const teacher2 = new Teacher2(18);
console.log(teacher2.age);这一节主要讲的就是类中的构造函数（也有叫构造器的），构造函数在工作中用的很多，所以你要学会并作充分的练习～
Demo12.ts
/**
* Demo12.ts
* TypeScript 类的构造函数
* @date 2021-1-3
* @author Wibus
* 构造函数就是在类被初始化的时候，自动执行的一个方法。我们通过这个构造方法经常作很多需要提前完成的工作，比如显示页面前我们要从后台得到数据
*/
// 1 类的构造函数
//构造函数的关键字是constructor
class Person{
public name: string;
constructor(name:string){
this.name = name;
};
};
const person = new Person('Wibus');
console.log(person.name);
// ts-node demo12.ts
// result: Wibus
// 这是最常规和好理解的写法
// 1.1 简单的写法
class Person2 {
constructor(public name:string){} // 这个地方的name需要写上访问属性
};
const person2 = new Person2('Wibus2');
console.log(person2.name);
// 这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，这是一种简化的语法
// 2 类继承中的构造器写法
// 普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数
class Teacher extends Person2 {
constructor(public age: number){
super('Wibus');
};
};
const teacher = new Teacher(18);
console.log(teacher.age);
console.log(teacher.name);
// 父类没有构造函数，子类也要使用super()进行调用，否则就会报错。
class Person3 {};
class Teacher2 extends Person3 {
constructor(public age: number){
super();
};
};
const teacher2 = new Teacher2(18);
console.log(teacher2.age);
// 主要讲的就是类中的构造函数（也有叫构造器的），构造函数在工作中用的很多，所以你要学会并作充分的练习。