00:00
好,我们开始上课,那么经过刚才的介绍的话,我们已经对这个typescript的有一个诶最初步的一个认识了,那接下来的话,我们就不废话了,我们直接来开始正式的进入到我们这个typescript学习,那我们要想用这个type script的,也就是我们这个TS,第一件事儿呢,当然就是我们需要先搭建一个TS的开发环境,那么开发环境是如何搭建的呢?别着急,我们一步一步来,那这个步骤的话,其实在这个里边我都已经给大家诶列出来了,我们要做的事儿,其实就是我们按照这个步骤一步一步去完成就OK了啊,那我们要做的第一件事儿的话,因为我们这个typescript我们刚才讲的时候,我们就说了,TS需要进行编译,编译为GS,然后才能交给我们的S解析器去执行,所以这个时候我们要先装一个TS的解析器,那么TS解析器又是用什么写的呢?它是用我们的not。
01:00
的GS去写的,所以这时候我们要想装TS的解析器,我们还需要先安装note GS,所以这个时候我们去搭建开发环境,我们要做的第一件事儿就是先去安装note GS,而安装note GS呢?诶,那么我们当然要先去下载它,那下载note GS的话,这里边我已经给你提供了地址了啊,两个地址一个是64位版本的,还有一个是32位版本的,那你是64位系统,你就装64位的,是32位就装32位,那么呃,如果你现在用的还是32位系统,那么我建议以后你再去重做系统的时候,一定要把你的系统重做为这个,诶64位的,因为诶32位现在它支持的内存会比较的小,你对以后的开发这个限制会越来越多啊,那这个地址的话,你直接自己去下载就行了,那这里边我们提醒一下,因为我现在视频讲的时候的话,这个这个T这个note GS的一个长期维护版是十点。
02:00
15.1这个版本,那你再去看到这个视频的时候,有可能你这个note的版本可能已经不是这个版本了,已经是新版了,那你可以自己呢,去note的官网去下载最新版本也OK,那这块说点题外话,就是你带这个noe的官网啊note GS点二这个官网去下载的时候,你会看到两个版本,一个是左边这个版本,一个是右边这版本啊,右边这个版本叫叫最新版啊最新版左边这叫LTS版,呃,这叫什么呀?叫长期维护版,换句话说这个属于是一个稳定版,这个于一个最新版,那我们在用的时候,建议大家不要用这个最新版,这种current我们要用的是什么呢?用的是这种稳定版,所以如果你以后你在去看到这个视频的时候,Note GS版本已经很新了,已经比我这个版本要新了,所以你去官网的时候,你下的时候下载左边这个LTS版啊LTS版。好,我废话不多说了,那你就是直接根据你系统的版本去下载就OK了,那么我这块已经下载完了,在哪呢?嗯,在我的这个扣,在我这个soft啊,这个文件夹的soft里边有一个nod,诶V14.15.1是一个64位的版本,我们直接干嘛呢?直接双击它进行安装就OK了,那note GS的安装的话,你看我边没写什么详细息,就写了一个安装note GS,为什么没写呢?因为这个东西装起来非常简单,所以呢,基本上是无脑的,下一步下一步下一步下一步就齐活了啊,我们来演示一下啊,在这里边呢,就是next不用看了啊,这个呢,同意一下子你也没得选啊,直接就next,然后这里边唯一一个可能要你选的话,就是你的一个安装路径,安装路径的话,你自己选吧,选一个你自己习惯的安装的位置就行了,但是注意路径里呢,呃,不要有特殊符号中文啊什么的还好,但是。
03:56
尽量也别有中文啊,尽量就是一个纯英文的一个路径,那么我个人来讲的话,我安装软件特别喜欢安装在默认路径,因为这样的话,其实我比较好找,因为我也没有什么D盘E盘F,我只有一个C盘,所以我就装到C盘了默认路径,所以这儿我是不改,那如果你要改的话,根据你自己的需要,诶愿意改哪就改哪,但是你自己能找到就好啊,然后我直接点next,在这里边呢,有一堆选项,哎,这堆选项不用管它,直接next,诶这里边会选择一个什么安装一个什么必要的工具这个东西啊,选不选都行啊,选不选甭选它了啊,直接点击NEX啊,这是一个软件包,刚才那个是啊,然后呢,到这儿直接点击e store,你看这有一个小盾牌的图标,你点完了以后呢,它会给你弹出一个确认窗口啊,确认窗口,确认窗口没得说,直接点什么呀,直接点是就行了啊,点是行了,我们稍微等一下。
04:52
那这个时候呢,他就在进行一个安装,诶这玩意儿怎么装起来,诶可算出来了是吧,出来以后我们直接点是诶出完确认窗号以后,装起来是非常非常快的,因为noe本身的话,它并不是那么的大啊,并不是那么大,稍微等一下。
05:16
诶,基本上马上就要装完了啊,马上就要装完了,诶装完了以后的话,其实呃,Noe的话,安装的失败几率基本上是没有的,基本上机器肯定能装成功啊,肯定装成功,然后装完了以后直接点击finish啊,我们这个node就已经装完了啊装完了你说老师我这装完了它什么也没有,我怎么知道它有没有装成功啊,诶那这样啊,装完note以后呢,你需要打开你的命令行窗口,命令行窗口如果你是Windows系统的话,你有两个可以使用的命令长成口一个呢,我们可以用我们比较经典的什么呀,哎,CMD啊进来以后,你直接输入一个no的一个杠V,它显示一个node一个版本,那证明你的这个node就已经安装成功了,或者有同学习惯用这个power she啊power she。
06:03
你也可以一样的啊,进来以后也是输入一个node-V,诶出来这个东西就表示我的这个node就已经安装成功了啊好,安装完noe以后,我们前两步就已经完成了,那么noe安装完毕以后,我们说了node的安装就是为了可以去使用我们的TS的这个编译器,所以接下来我们要做的事儿就是安装我们TS编译器,那么noe里边有一个东西叫做NPM。NM是什么?APM是我们node的包管理器,通过NPM我们可以去安装我们这个node下边的各种各样的应用,各种各样的软件,而我们TS的解析器就是它下边这么一个件,所以接下来我们要用我们的NPM来安装我们的哎,这个这个type script的一个解析器,哎,那么其实你在装NOEGS的同时的话,NPM就已经装好了,所以装完noe以后,NPM就可以直接用了啊,所以你只需要在装完那个noe以后,在你的命令行当中输入这样一个命令,N mi,杠g type script,这样就可以安装好我们这个解析器了啊,所以在这我们直接输入一个n p mi,然后杠G输入一个type script的SCIPT,然后回撤,诶这个时候呢,它需要安装一会儿啊,稍微安装一会儿,诶,但是诶,你看也很快,是不是就安装完了,安装完了以后你看啊。
07:33
他给你报错,给你出现的是这些信息,就证明你的这个诶。Typebscript的这个解析器就已经装完了啊,我们TS的编译器就已经装完了,装完了怎么就知道装完了,在这儿你输入一个TTSC啊,TS就是我们的typescript就是TS的编译器,回车你看啊,你打完它以后出一堆这玩意乱七八的,你甭管认不认识,反正出一堆,出现这一堆就表示你安装成功了,如果告诉你你的命令什么什么没找到,诶,那么你安的可能哪装的不对,那你需要把我们上面那个步骤再重复的再去进行一下,好,那我这儿的话TS就已经安装完毕了,安装完毕了,那接下来我们就来用一下吧,哎,用一下,那用一下我们来看第四步,那第四步第五步说的就是我们对我们这个TS一个使用,那首先我们要看看这TS到底怎么用,那我们要用的话,我就需要先创建一个TS文件,所以这里边我需要。
08:39
先进到我的目录下啊,我的所有代码都放到我的这个code目录,Code目录我们的第一张嘛,我们的CHAPTER01这里面啊,在这儿来整,我先创建一个新的诶文本文档啊,我文档我教什么呢?叫做一个零一下划线啊,零一下划线我叫做一个hello ts啊hello ts来然后注意扩展名,扩展名因为我们要写TS代码,所以扩展名我们要写一个点TS问题是不是改改就OK了,一确定就行了,那这样我们就创建好了一个TS文件,那这里还要强调一下,注意,因为我们是在我是在讲课,讲课的时候的话,我的代码的话,我就需要给你们有一个这个有一个排序,有一个序号,所以我的名字的话是用0102030405用序号去开头的,但是我们在真实的开发当中的话,你的文件名也好,变量名也好,各种各样的名字也好,最好都是不要以。
09:39
数字开头,哎,用字母开头,这样最好啊,这样最好,好文件写完了,我们来对这个文件进行一个编辑,你右键点击它,随便用你的计算机里边的一个纯文本编辑器啊,什么notepad加呀,哎,什么这个什么Vs code呀,哎什么sub呀等等等等,包括记事本都可以,只要是文本编辑器都行,当然尽量还是不要用记事本啊,用一个这个Windows自带记事本以外的一个文本编辑器,那我这用的是一个notepad叠加,所以在这儿的话,我直接打开我的这个note pad叠加。
10:15
哎,老了,派姐在这里面我们随便写一个,写什么呀,直接写我们的TS代码,同学说老师我不会写TS代码啊,哎,别着急,我告诉你怎么写,直接来一个cancel,点一个log log,我写一个,写一个hello ts hello ts,哎,这一保存写完了,哎,也就是我们就是在这个TS文件里就写这么一个hello tsllo,诶,同学说老师这不是GS代码吗?你怎么说它是TS呀?哎,注意了,我们刚才在介绍我们TS的时候,我们就说了,TS是完全兼容我们这个GS,也就是说所有的GS代码在TS里都可以直接去使用,这是没有问题的,所以我们直接先写个GS代码,咱们先干嘛呀,先试试刚开始学是吧?别着急,咱们一步一步来啊,一步一步来,好,那这个文件写完了,那这个时候就产生了一个问题,什么问题呢?好,这个文件是一个TS文件,对吧?TS文件我要想执行,可能最简单的,我就想在我的网页里执行,在我的浏览器里执行,那可能我需要引入到一个网页里,但是问题来了,哎,网页认TS文件吗?哎,注意他是不认的,这个文件你拿到网页里,网页压根就不会去执行,他不认识TS,所以这个时候我们刚刚所创建那个编译器,它就。
11:48
不用了编译器干嘛?编译器就可以用来帮助我们把这个TS转换成GS,那怎么转呢?诶首先在这里面我们需要先还是要打开我们的命令行窗口,你在这儿输CMD也好,输power power也好都行,那我们简单点吧,我就输个CMD1回车,那在这儿输有什么好处?好处就是我们现在打开这个命令行窗口以后,你看我的这个路径是不是正好就是我这个当前文件所在的路径啊,哎,那我就省事儿了,我就不用再去进入到这个目录,打开窗口,目录就直接在这儿,然后我们就直接对这个文件进行编译,怎么编译,我们前边写一个TS,后边直接跟文件名,文件名叫零一,叫做hello ts.ts直接回车,那这样他就完成了对我们这个文件的一个编译,你看执行完了以后是不是什么信。
12:48
没有啊,诶注意没有消息就是最好的消息,没有消息证明编译通过了,证明我们的代码没有问题了,那这个时候你再回过头去看你的目录,我的目录下是不是就多了一个零一,Hello ts.gs呀,这个文件是哪来的?这个文件就是我们TS,它通过我们编译器编译以后产生的什么呢?GS文件啊,产生G文件,当然现在啊,他们两个的代码是一样的,是一样的,因为我们这个本来写的就是GS代码,那GS代码转换成GS呢,当然是一样的了,哎,但是区别就是什么呢?这个GS我们可以直接在浏览器里就执行了,直接诶网页里一引入它就可以执行了,而TS不能执行,你说老师我这图啥呢?太麻烦了,我直接写GS不就行了吗?还是这句话,别着急,咱们刚开始学,现在呢,你要做的事儿就是学习一下如何去。
13:48
只用这个编译器,后边我们自然会引入一些,诶,更高级的一些TS的一个语法,我们来看一下TS到底强大在哪,到底比GS它强在哪里?好,这个就是我们说的第一件事儿,叫做type script的开发环境的一个搭建,这是一个最简单的一个版本的一个开发环境,一定要把这些环境按照我所说的这个步骤,一步一步的来对它进行搭建,尤其是刚刚接触这个东西的同学,一定要多练几遍,它不难,但是的话,如果你是刚开始学的话,可能你会记不住,慢慢来,别着急,好,我们来停一下,待会儿我们来介绍我们TS的基本的语法,好,我们先停一下。
我来说两句