00:00
我们继续的来学习V的功能,这一章我们来学习在V中如何使用type script。VT其实是天然支持引入点S文件的,V呢仅执行点TS文件的转移工作,它其实并不执行任何的类型检查,那么他假设把类型检查的工作已经交给了我们的IDE或者是构建过程,也就是build来接管了。如果需要,我们可以在构建的时候,也就在build的时候可以运行tsc杠杠noit。或者是在view的环境里边,我们可以安装view-TSSC来去运行view-SSC杠杠noit来对我们的点view文件进行类型检查,Wait呢,使用ES build将我们的script转移成javascript。它的编译速度大约是tsc的20~30倍,同时H2的更新反应到浏览器的时间也会小于50毫秒。接下来我们来去举两个例子。
01:07
返回Vs code,我们在项目的根目录下面再创建一个新的项目,执行一下PN PM create,然后wait。好,我们创建一个基于view的TS项目,我们取个名字叫做v basics view ts,我们选择view,选择view ts这个变体,我们CD到v basic view ts,然后我们执行PN PM install来安装一下依赖。然后我们再执行一下PN PM run DV,这样的话呢,我们就可以运行一下我们的项目了,然后我们在浏览器上面打开我们的项目,下面呢,我们就仔细的观察一下v basics view ts这个文件夹里边的一些文件,我们发现呢,这里边多了一个TS的配置ts conig j,同时还多了一个ts con node.j它俩是有关联的。另外呢,我们打开S2C,我们发现呢,我们的入口文件man.GS变成了man.TS这就说明我们现在呢已经能够执行我们TS文件了,刚才我们说过wait可以天生的支持我们点TS这样的文件,我们可以做个实验,下面我们可以在呃,Src下面创建一个新的文件,我们取名为叫做test.ts在这里边儿呢,我们可以写入一些TS的代码,关于TS的详细的基础知识,大家可以去观看我B站的TS相关的视频。
02:41
然后接下来我们可以通过interface定义一个person这样的一个接口,在这里边我们定一个属性name,它的类型呢是string,然后我们在外侧呢,再定义一个变量叫做person,然后它的类型呢就是person类型,它的值是一个对象里边有name这个属性,比方说我们定义为Felix。
03:06
那接下来呢,我们再去定义一个属性age,它的值为19,大家发现呢,现在我们已经呃,通过所谓的IDE,也就是Vs code帮助我们检查出当前我们的代码是有问题的,因为我们在interface里边并没有定义age这个属性,但是我们说也说了啊,Fate它本身呢,只是帮助我们进行TS的编译,并不做这个类型检查,那这个检查的工作是由IDE来完成的,那就意味着我们只要是在代码基本上能够编译,它就能够在开发环境里边帮助我们运行,我们可以做个实验,下面呢,我们可以在man.TS里边去引入我们TS,呃,Test的TS的这个模块里边暴露的接口,那我们可以暴露一下,比如说我们执行一下export,暴露一下person。
04:00
然后我们打开man ts来去引入这个模块,我们import一下from当前文件夹下的test,注意这里有个问题,大家不要在这里边加入点TS这样的扩展名,不然情况下呢,我们在呃,Vs code里边会报告诉我们不要以点TS扩展名束,因为这里边呢,我们将来在浏览器上运行我模块的时候呢,它是不能够支持点TS这样的扩展名的,所以呢,我们就让我们的wait来做,给我们做编译就好了,所以这个扩展名我们就不要加了,然后我们要导入啊一个person。接下来呢,我们可以去在一控制台上面打印一下person对象下面的age,我们看能不能正常打印出来哈,那事实上呢,在我们的Vs code里边已经告诉我们这个age是有问题的,因为我们的person是不存在age这个属性的,但是实上呢,我们的wait也是帮助我们编译了,我们可以保存一下,打开控制台我们看一下19正常的打印出来了,那如果是我们这个错误不想在我们的生产环境下面去呃运行的话,那我们可以在编译的时候加一些参数,让我们的wait来帮助我们把这些错误拦截下来,当然了,我们也可以在呃,VS环境下面通过他给我们的提示来去解决这些问题,比方说我们打开test ts,我们可以把这句话注掉,这样的话呢,就不存在这个问题了。
05:30
那我们如果是在嗯开发的时候写入了这样的代码,可以在build的时候来去检查,那我们现在来看一下,在package Jason的时候,我们有一个build,就是所谓的构建的命令,在这个构建脚本里边呢,它给我们使用的是view-tsc杠杠noit,那前提是我们当前的环境下得需要安装view-SSC,很显然我们的这个脚手架已经帮助我们把这个view-TSSC给装好了,所以呢,我们直接可以再去编译的时候呢,帮助我们检查这个错误。杠杠noit表示当我们这个代码一旦出现错误的时候呢,编译是不通过的,它就会在控制台上面给我们打印一个错误,我们来去运行一下,打开终端,我们按照CTRC先。
06:19
跳出我们的服务,执行一下PN PM run build。好,等待我们这个命令的执行,诶我们发现呢,现在给我们报这个H19这样的错误,这个编译呢是失败了的,当然了,如果是你不不使用view-TSSC,比方说在re或者是其他的环境下面,你可以使用TSSC杠杠no。也是可以的。由于我们现在的项目环境呢是view环境,所以呢我们就使用view给我们提供的view-tsc杠杠no。接下来呢,我们来看TS的一个重要选项,叫做isolated modules,因为在S里边它都是使用ES build来去进行TS编译的,而ES build呢,是只执行没有类型信息的转译,而且呢,它也只能支持单个模块的转译。因此如果我们使用一些不支持的特性,比方说像什么枚举呀,呃,饮食类型啊等等,或者是我们一个拈块引入了另外一个模块,在编译过程中,它不能够进行多个模块之间的编译,所以呢,我们必须在ts configgu.Jason的compeller options里边设置这个isated modus这个选项,并且把它设置为true,这样的话呢,TS就会警告我们不要使用类似于isolated,也就是隔离的一些转移的功能了。我们来演示一下。
07:48
返回代码,我们重新启动一下我们这个项目,执行一下PN PM run DV,我们在浏览器上面打开这个项目,然后接下来我们做一件事情,把test.ts里边的这个类型给作为一个模块给导出出去,然后接下来我们在src下面定义一个新的TS文件,比方说我们叫type.ts然后把这个模块放在这儿,然后呢,我们可以执行一下export,把person这个类型导出,这在我们TS编写代码的时候呢是非常常见的,然后我们在test.ts里边再把这个类型给导入进来,我们执行一下import。
08:30
From当前文件夹下面的types。然后我们导入它导出的对象叫做person。这样的话呢,我们这个代码呢,仍旧是没有问题,那我们来验证一下在浏览器上面是否能正常的运行呢,我们可以打开终端。然后这个19啊,我们可能怀疑是他第一次打印的,所以呢,我们现在先退出我们这个服务啊,再重新的启动一下,然后我发现呢,19仍旧被打印出来了。
09:01
因为这个19的错误呢,不是我们当前考虑的问题,那很显然我们把一个单独的模块给导出出去以后,我们再导入啊是没有问题的,因为这个时候呢,Wait这个会把我们这个模块啊进行正常的导入,因为这个模块只有我们当前的这个test ts去使用的,那如果我们在这个模块里面再次导出这个。好,我们发现现在浏览器上面就报错了,他说the requested module,就是你请求的这个S2C下的types的ts does not provide a expon name person,也就是说它没有提供一个导出的名字person,这是为什么呢?因为我们的bit是使用啊ES build来进行呃,TS编译的,它呢只支持单个模块的编译,如果是我们这个模块又导出到其他的模块里使用,那么很显然在浏览器上面就会有问题了,因为它不支持这种功能,而我们在开发过程中并不知道这个问题,因为它没有给我们报出错误来,那我们得需要去加一个配置选项,所以呢,我们在ts conflict Jason里边加一个新的配置项,叫呃,Ised modules,把它设置为true,好保存一下。
10:18
那么接下来我们在浏览器上面仍旧看到这个问题,因为问题仍然存在,那我们在TTS里边呢,我们看到这里就给我们画上一个红色的波浪线了,它会告诉我们,呃,这里头我们提供了一个杠杠isolated modus这样的标识,我们需要使用export type才能够重新的导出这个类型,那很显然当前呢,我们这个问题呢,应该在开发的时候就发现了。在的ES build里边,除了我们的这个模块的关联的导入导出它不支持以外,其他的有一些TS的特性也不支持,比如像枚举。那我们举个例子,现在呢,我们把person给注释掉啊,让我们的页面恢复正常,然后我们在上边呢,通过declare来去定义一个枚举的类型,我们可以定一个常量,它是一个枚举的类型,比方说我们定义一个age这样的枚举类型,我们可以定义一个AGE1,这是等于号啊,等于18,然后我们再定义一个H2,它的值呢,我们可以定义成19,好,中间呢,我们可以加一个逗号,定义完了以后呢,接下来我们就可以把我们这个age的值变成一个AGE1了。在这里边呢,有另外一个错误,因为我们在person里边并没有定义age这个属性,我们可以在tap里边把它定义上,在tap4.ts里边我们再加一个新的属性,比方说我们定义一个age属性,它的类型呢是number,这样的话,我们在TTS里边呢,就可以去呃定义我们age这个属性了,但是这里边给了我们。
11:57
一个新的提示,我们来看一下,这个提示呢,告诉我们,呃,我们用了这个isolated modeldus无法访问环境中的常量枚举,它是不支持的,那我们可以在开发环境中呢,能够看到这个问题,那我们运行一下看看呢,这里告诉我们age是没有定义的,关于这个配置选项呢,还有一点,这一点的话呢,一般情况下,我们只有在呃做一些特殊的代码编写的时候呢,才能用得到,比方说我们在S2C里面创建一个新的文件,叫做no exports.ts我们可以定义一个常量cost,比如说定义一个A等于100。好了,我们看到这里边又一个新的错误了,他说啊,我们这里边呢,也加了这个呃选项啊,那它编译这个noe pose的时候呢,被视为一个全局的脚本,让我们使用导入导出啊,来去让它正常编译,那其实事实上呢,我们不需要做什么工作,我们只需要来一个。
12:57
Export一个A就可以了,只要我们有导出的动作,或者是我们没有导出,我们直接来一个导入,比方说我们在这个模块里边呢,我们可以导入当前呃目录下面的types,然后我们可以把这个person给导入进来,当然我们这个person呢,暂时没有什么用,但是呢,他也不会出现错误了。
13:24
有关V中使用TS,我们就讲这么多,大家如果想了解type script的一些基础知识,可以去B站上去观看我的视频。大家可以通过这个地址来去访问就可以了。这里面包含了我们TS的一些基础细节,大家加油。
我来说两句