01_TS开发环境搭建

好，我们开始上课，那么经过刚才的介绍的话，我们已经对这个typescript的有一个诶最初步的一个认识了，那接下来的话，我们就不废话了，我们直接来开始正式的进入到我们这个typescript学习，那我们要想用这个type script的，也就是我们这个TS，第一件事儿呢，当然就是我们需要先搭建一个TS的开发环境，那么开发环境是如何搭建的呢？别着急，我们一步一步来，那这个步骤的话，其实在这个里边我都已经给大家诶列出来了，我们要做的事儿，其实就是我们按照这个步骤一步一步去完成就OK了啊，那我们要做的第一件事儿的话，因为我们这个typescript我们刚才讲的时候，我们就说了，TS需要进行编译，编译为GS，然后才能交给我们的S解析器去执行，所以这个时候我们要先装一个TS的解析器，那么TS解析器又是用什么写的呢？它是用我们的not。

的GS去写的，所以这时候我们要想装TS的解析器，我们还需要先安装note GS，所以这个时候我们去搭建开发环境，我们要做的第一件事儿就是先去安装note GS，而安装note GS呢？诶，那么我们当然要先去下载它，那下载note GS的话，这里边我已经给你提供了地址了啊，两个地址一个是64位版本的，还有一个是32位版本的，那你是64位系统，你就装64位的，是32位就装32位，那么呃，如果你现在用的还是32位系统，那么我建议以后你再去重做系统的时候，一定要把你的系统重做为这个，诶64位的，因为诶32位现在它支持的内存会比较的小，你对以后的开发这个限制会越来越多啊，那这个地址的话，你直接自己去下载就行了，那这里边我们提醒一下，因为我现在视频讲的时候的话，这个这个T这个note GS的一个长期维护版是十点。

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，然后这里边唯一一个可能要你选的话，就是你的一个安装路径，安装路径的话，你自己选吧，选一个你自己习惯的安装的位置就行了，但是注意路径里呢，呃，不要有特殊符号中文啊什么的还好，但是。

尽量也别有中文啊，尽量就是一个纯英文的一个路径，那么我个人来讲的话，我安装软件特别喜欢安装在默认路径，因为这样的话，其实我比较好找，因为我也没有什么D盘E盘F，我只有一个C盘，所以我就装到C盘了默认路径，所以这儿我是不改，那如果你要改的话，根据你自己的需要，诶愿意改哪就改哪，但是你自己能找到就好啊，然后我直接点next，在这里边呢，有一堆选项，哎，这堆选项不用管它，直接next，诶这里边会选择一个什么安装一个什么必要的工具这个东西啊，选不选都行啊，选不选甭选它了啊，直接点击NEX啊，这是一个软件包，刚才那个是啊，然后呢，到这儿直接点击e store，你看这有一个小盾牌的图标，你点完了以后呢，它会给你弹出一个确认窗口啊，确认窗口，确认窗口没得说，直接点什么呀，直接点是就行了啊，点是行了，我们稍微等一下。

那这个时候呢，他就在进行一个安装，诶这玩意儿怎么装起来，诶可算出来了是吧，出来以后我们直接点是诶出完确认窗号以后，装起来是非常非常快的，因为noe本身的话，它并不是那么的大啊，并不是那么大，稍微等一下。

诶，基本上马上就要装完了啊，马上就要装完了，诶装完了以后的话，其实呃，Noe的话，安装的失败几率基本上是没有的，基本上机器肯定能装成功啊，肯定装成功，然后装完了以后直接点击finish啊，我们这个node就已经装完了啊装完了你说老师我这装完了它什么也没有，我怎么知道它有没有装成功啊，诶那这样啊，装完note以后呢，你需要打开你的命令行窗口，命令行窗口如果你是Windows系统的话，你有两个可以使用的命令长成口一个呢，我们可以用我们比较经典的什么呀，哎，CMD啊进来以后，你直接输入一个no的一个杠V，它显示一个node一个版本，那证明你的这个node就已经安装成功了，或者有同学习惯用这个power she啊power she。

你也可以一样的啊，进来以后也是输入一个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，然后回撤，诶这个时候呢，它需要安装一会儿啊，稍微安装一会儿，诶，但是诶，你看也很快，是不是就安装完了，安装完了以后你看啊。

他给你报错，给你出现的是这些信息，就证明你的这个诶。Typebscript的这个解析器就已经装完了啊，我们TS的编译器就已经装完了，装完了怎么就知道装完了，在这儿你输入一个TTSC啊，TS就是我们的typescript就是TS的编译器，回车你看啊，你打完它以后出一堆这玩意乱七八的，你甭管认不认识，反正出一堆，出现这一堆就表示你安装成功了，如果告诉你你的命令什么什么没找到，诶，那么你安的可能哪装的不对，那你需要把我们上面那个步骤再重复的再去进行一下，好，那我这儿的话TS就已经安装完毕了，安装完毕了，那接下来我们就来用一下吧，哎，用一下，那用一下我们来看第四步，那第四步第五步说的就是我们对我们这个TS一个使用，那首先我们要看看这TS到底怎么用，那我们要用的话，我就需要先创建一个TS文件，所以这里边我需要。

先进到我的目录下啊，我的所有代码都放到我的这个code目录，Code目录我们的第一张嘛，我们的CHAPTER01这里面啊，在这儿来整，我先创建一个新的诶文本文档啊，我文档我教什么呢？叫做一个零一下划线啊，零一下划线我叫做一个hello ts啊hello ts来然后注意扩展名，扩展名因为我们要写TS代码，所以扩展名我们要写一个点TS问题是不是改改就OK了，一确定就行了，那这样我们就创建好了一个TS文件，那这里还要强调一下，注意，因为我们是在我是在讲课，讲课的时候的话，我的代码的话，我就需要给你们有一个这个有一个排序，有一个序号，所以我的名字的话是用0102030405用序号去开头的，但是我们在真实的开发当中的话，你的文件名也好，变量名也好，各种各样的名字也好，最好都是不要以。

数字开头，哎，用字母开头，这样最好啊，这样最好，好文件写完了，我们来对这个文件进行一个编辑，你右键点击它，随便用你的计算机里边的一个纯文本编辑器啊，什么notepad加呀，哎，什么这个什么Vs code呀，哎什么sub呀等等等等，包括记事本都可以，只要是文本编辑器都行，当然尽量还是不要用记事本啊，用一个这个Windows自带记事本以外的一个文本编辑器，那我这用的是一个notepad叠加，所以在这儿的话，我直接打开我的这个note pad叠加。

哎，老了，派姐在这里面我们随便写一个，写什么呀，直接写我们的TS代码，同学说老师我不会写TS代码啊，哎，别着急，我告诉你怎么写，直接来一个cancel，点一个log log，我写一个，写一个hello ts hello ts，哎，这一保存写完了，哎，也就是我们就是在这个TS文件里就写这么一个hello tsllo，诶，同学说老师这不是GS代码吗？你怎么说它是TS呀？哎，注意了，我们刚才在介绍我们TS的时候，我们就说了，TS是完全兼容我们这个GS，也就是说所有的GS代码在TS里都可以直接去使用，这是没有问题的，所以我们直接先写个GS代码，咱们先干嘛呀，先试试刚开始学是吧？别着急，咱们一步一步来啊，一步一步来，好，那这个文件写完了，那这个时候就产生了一个问题，什么问题呢？好，这个文件是一个TS文件，对吧？TS文件我要想执行，可能最简单的，我就想在我的网页里执行，在我的浏览器里执行，那可能我需要引入到一个网页里，但是问题来了，哎，网页认TS文件吗？哎，注意他是不认的，这个文件你拿到网页里，网页压根就不会去执行，他不认识TS，所以这个时候我们刚刚所创建那个编译器，它就。

不用了编译器干嘛？编译器就可以用来帮助我们把这个TS转换成GS，那怎么转呢？诶首先在这里面我们需要先还是要打开我们的命令行窗口，你在这儿输CMD也好，输power power也好都行，那我们简单点吧，我就输个CMD1回车，那在这儿输有什么好处？好处就是我们现在打开这个命令行窗口以后，你看我的这个路径是不是正好就是我这个当前文件所在的路径啊，哎，那我就省事儿了，我就不用再去进入到这个目录，打开窗口，目录就直接在这儿，然后我们就直接对这个文件进行编译，怎么编译，我们前边写一个TS，后边直接跟文件名，文件名叫零一，叫做hello ts.ts直接回车，那这样他就完成了对我们这个文件的一个编译，你看执行完了以后是不是什么信。

没有啊，诶注意没有消息就是最好的消息，没有消息证明编译通过了，证明我们的代码没有问题了，那这个时候你再回过头去看你的目录，我的目录下是不是就多了一个零一，Hello ts.gs呀，这个文件是哪来的？这个文件就是我们TS，它通过我们编译器编译以后产生的什么呢？GS文件啊，产生G文件，当然现在啊，他们两个的代码是一样的，是一样的，因为我们这个本来写的就是GS代码，那GS代码转换成GS呢，当然是一样的了，哎，但是区别就是什么呢？这个GS我们可以直接在浏览器里就执行了，直接诶网页里一引入它就可以执行了，而TS不能执行，你说老师我这图啥呢？太麻烦了，我直接写GS不就行了吗？还是这句话，别着急，咱们刚开始学，现在呢，你要做的事儿就是学习一下如何去。

只用这个编译器，后边我们自然会引入一些，诶，更高级的一些TS的一个语法，我们来看一下TS到底强大在哪，到底比GS它强在哪里？好，这个就是我们说的第一件事儿，叫做type script的开发环境的一个搭建，这是一个最简单的一个版本的一个开发环境，一定要把这些环境按照我所说的这个步骤，一步一步的来对它进行搭建，尤其是刚刚接触这个东西的同学，一定要多练几遍，它不难，但是的话，如果你是刚开始学的话，可能你会记不住，慢慢来，别着急，好，我们来停一下，待会儿我们来介绍我们TS的基本的语法，好，我们先停一下。