00:00
好,刚刚啊,咱们是在TS里边演示了一下接口是吧,接下来呢,咱们在TS里边演示一下类啊,JS当中的类怎么写,在TS文件当中还可以这样去写。好,那我打开我的Vs code,在当前这个目录当中新建一个文件叫零三杠啊类点TS。当然了,在GS目录当中,这个点JS文件呢,也产生了是不是。那为了让大家看到效果,我在index.html当中把这个JS文件引入啊,并且加个注释。诶。一二号这个是引入类的JS文件啊。好,SQL标签点杠GS下边类点JS好保存,然后呢,我们是在TS里边写那个类嘛,是吧,无非就是把上面这个代码给他改造一下,上面这个代码在写类的时候,其实没有写类,写的是一个对象是不是,那接下来呢,咱们来写一个类看看啊。好,括号括号。
01:01
我呢,在这个上面加上一个注释,是TS中书写GS中的这个类啊。演示效果。好,呃,为了和上一个例子呢,呃,这个是一样的效果啊,所以说我在这啊,仍然是干嘛呢,先定义一个接口interface,叫a person吧,括号。First first name是一个字串类型,它代表的是姓氏,然后再来一个last name还是。那它代表的是名字啊。那下边我再定义一个类啊,Class再来一个person括号啊,定义啊,公共的这个字段啊,或者说我们叫做属性啊,这个也是可以的啊。First name。字串last name,它也是一个字串,同时呢,我可以再写上一个full name,它也是一个字串,上边的这个代表的是姓氏,然后呢,代表的是名字,那它呢就代表的是姓名了啊。
02:15
紧接着呢,我再去干嘛呢?定义一个构造器函数括号。哎,那我希望在类被创建实例化对象的时候是吧,能够传入它的姓氏和名字,最终呢,Full name里边能够存是存储它的姓氏和名字,所以说呢,我在这儿需要给它定义传入进来的参数。那第一个fire first name应该是什么类型呢?字串类型last name它应该也是一个字串类型是吧,那这个时候我应该是更新我这个类当中属性的值呗,是吧,更新属性数据,所以说属性数据啊。属性数据,那就是this.first name等于这个first name this.last name等于last name,那这块呢,应该是一个姓名的更新是吧?this.full name它就等于this.first name。
03:14
嗯,我加上一个下划线吧,这样看起来更加清晰一些啊,那大家可以看一下GS里边类怎么写,这里边是不是也是怎么写的吧,只不过这个位置在告诉当前我的这属性是什么类型的是吧?好,那下边呢,我就可以实例化对象了,实例化对象来一个count的p person等于new person,那注意我要往里边传数据了是吧,因为人家说你得传两个字串啊,那我如果说传入一个十,传出一个20行不行呢?不行,很明显是吧,说这个数据它是有问题的啊,那我得算出姓氏和名字,比如说这个叫做诸葛。跑偏了。诸葛啊,后边再加上一个什么呢,孔明。诶搞定是吧,好,那我来一个o.log去干嘛呢。
04:02
去输出一些内容了,我希望把这个人他的一些名字信息显示出来,所以说我在这啊,再来一个什么呢?函数,第一个函数翻个身吧,叫收。For name括号里边呢,这个位置需要你给我传入一个person对象,但是这个person对象呢,必须符合我这个接口的类型是吧,或者说符合我接口的规范,所以说我写个冒号,写个I什么的。好,那我直接return person.first name再加上诶。两个下划线一个吧,再加上P点什么呢?Last。好了是吧,啊注意我此时就可以在收log里边是吧,这个点log里边去写上收for name。里边我就可以传入这个person了啊,注意这是没有问题的是吧,保存一下我们来看看这个HTML。找到检查,然后找到cancel,我们可以看看诸葛孔明是可以展示出来的,是没有问题的是吧,那如果说此时啊,我在这个位置干一件什么事情呢。
05:05
我比如说这么写啊。呃,我把当前的这个first name给它去掉,它我们看看它报不报错啊,大家可以看一下下边。说类型person的参数不能复制给I的参数。他的意思就是说我当前这个函数里边的参数啊,是符合我这个接口的这种规范的,或者说这种约束的,那我这个接口里边有两个属性,一个是first name,一个是last name,但是你的person当中呢,没有first name,所以说他是不认可的,也就是说这个例子和我们之前讲接口那个例子是一样的,只不过这边用的是对象,而我这边用的是一个类,定义了一个类,通过类实例化出来一个对象,传进去的是一个对象,对吧?好,那就是给大家在TS里边去演示一下类是吧,也是可以正常的去使用的。那我写的这些TS的代码啊,当然实际上是JS代码啊,里边是有TS语法的,那我写的这些代码最终编成JS文件的时候,我们来看看里边是什么效果呢?其实也就是原来的GS代码,是GS的这种语法堂的这种代码,对吧?好至此呢,就是我们在TS里边给大家演示了几个问题啊,第一个TS当中有类型注解。
06:18
TS当中有自己的接口这种东西,第三个TS当中可以使用GS的基础语法,也可以使用GS的。新特性或者新意法啊,这都是没有问题的是吧。好了,呃,在这啊,有这么一句话,说我们把一个TS文件重新编译之后啊,你会看到TS里边类只是一个语法堂,本质上还是GS的函数的实现,所以说大家就会发现这个GS文件里边实际上本质还是函数啊。OK,这刚刚呢,是给大家演示一下这些问题啊。这一节呢,咱们就先到这里。
我来说两句