10 TypeScript 类的概念和使用

TypeScript 中类的概念和ES6中原生类的概念大部分相同,但是也额外增加了一些新的特性。我在这里会完全从一个新手的角度,讲解类的各项知识点。

10.1 类的基本使用

新建一个文件,叫做demo10.ts,然后定义一个最简单的Lady类,这里要使用关键字class,类里边有姓名属性和一个得到姓名的方法
代码下面的注释的意思是:运行ts-node demo10.ts命令,得到的结果是:Hi,帅哥
这是一个最简单的类了,如果你有些编程经验,对这个一定很熟悉

10.2 类的继承

TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends,比如我们这里新建一个xiaoJieJie的类,然后继承自Lady类,在XiaoJieJie类里写一个新的方法,叫做sayLove,具体代码如下。
类写好以后,我们声明的对象是xiaoJieJie这个类,我们同时执行sayHello()sayLove()都是可以执行到的,这说明继承起作用了

10.3 类的重写

讲了继承,那就必须继续讲讲重写,重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJies这个类里重写父类的sayHello()方法

10.4 super 关键字的使用

比如我们还是想使用Lady类中说的话,但是在后面,加上你好两个字就可以了。这时候就可以使用super关键字,它代表父类中的方法
那么整个下来呢,我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲

Demo10.ts

11 TypeScript 中类的访问类型

上节已经简单学习了TypeScript中类的使用,这节我们继续学习一下类中的访问类型。其实类的访问类型就是基于三个关键词privateprotectedpublic,也是三种访问类型

11.1 简单的类

我们来写一个简单的类先,我们定义一个 Person 类,然后使用这个类的对象,进行赋值,最后打印在控制台上。
写完后我们直接可以在Terminal(中),输入ts-node demo11.ts进行查看结果,结果会打印出Wibus

11.2 public 访问属性

这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义,那么它就会默认是public访问属性。所以,我们刚刚所写的类相当于这样子
public从英文字面的解释就是公共的或者说是公众的,在程序里的意思就是允许在类的内部外部被调用.
比如说,我们在类里面写一个sayHello() 方法,访问属性为public
这是的this.name就是类的内部调用。我们在下面在执行一下这个方法person3.sayHello(), 终端中可以看到一切正常运行了,顺利打印

11.3 private 访问属性

private 访问属性的意思是,只允许在类的内部被调用,外部不允许调用
现在我们把name属性改成private,这时候在类的内部使用不会提示错误,而外部,以及子类使用VSCode直接会报错。

11.4 protected 访问属性

protected 允许在类内及继承的子类中使用
把name的访问属性换成protected,这时候外部调用name的代码会报错,内部的不会报错,和private一样。这时候我们再写一个Person_Person5类,继承于Person4
那么通过这个例子相信你一定知道什么是类的内部和类的外部,也知道了三个访问类型的区别了

Demo11.ts

12 TypeScript 类的构造函数

构造函数就是在类被初始化的时候,自动执行的一个方法。我们通过这个构造方法经常作很多需要提前完成的工作,比如显示页面前我们要从后台得到数据

12.1 类的构造函数

简单来说,构造函数的关键字就是constructor
新建一个Person 类,类的里边定义一个name,但是name我们并不给他值,然后我们希望在new出对象的时候,直接通过传递参数的形式,给name赋值,并打印出来。这时候我们就需要用到构造函数
这是最常规和好理解的写法,那么既然都这么说了,就是有更简单的写法啦

12.1.1 简单的写法

这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值,这是一种简化的语法

12.2 类继承中的构造器写法

普通类的构造器我们已经会了,在子类中使用构造函数需要用super()调用父类的构造函数,如果你看不懂我在说啥的话,看下面的代码
如果你不写super('Wibus');的话,VSC将会报错:派生类的构造函数必须包含 "super" 调用。
当然你可以super(''); 直接过去😂
父类没有构造函数,子类也要使用super()进行调用,否则就会报错。
这一节主要讲的就是类中的构造函数(也有叫构造器的),构造函数在工作中用的很多,所以你要学会并作充分的练习~

Demo12.ts

亲亲留个评论再走呗

正在加载评论区...