00:00
Hello,大家好,欢迎收看上硅谷的前端视频教程,我是李老师,今天我们开始进入到typescript的学习,在正式的学习这个script之前呢,我们先来聊一聊我们的老朋友GS,也就是javascript,那么javascript可以说它是一门让人既爱又恨的一门语言。那爱他什么呢?首先GS是一门非常容易学习的语言,即使你没有任何的编程基础,那么你去学习GS的话,其实你花个两个小时,三个小时也能够快速的写出一个相对来说比较像样的一个GS程序,它不像别的语言,别的语言你像一些像是Java呀,像一些C呀,它相对来说比较抽象,写完了以后呢,你可能也不知道它是干嘛的,需要花费一个比较长的时间去体会,去学习,而GS呢,他基本上写完了东西你就能看见,就是你写完了什么样,他得出来呢,就是就是什么样,而且GS本身的话,他非常的不容易报错,尤其是早期的GS,基本上随便你写什么乱七八糟的东西的话,它都不会去,不会报错啊,不会报错。二一个的话,GS,它是一个非常的自由的语言,非常的灵活,非常灵活,想怎么写你就怎么。
01:23
写就是很难去报错,所以有一些功能的话,我们在同样的功能啊,我们在Java里写的话,可能要写很多很多代码,在GS里可能几行代码就搞定了,所以相对来说他GS我个人认为呢,是一个比较偏底层的,他给我们暴露出很多底层的东西,让我们直接可以通过编写这种底层代码的形式完成功能,而我们的建这个Java的话,它可能就比较的往往上边诶浮一点了,就是它相对来说它是需要编译以后才去执行的,相对来说没有那么底层,所以写起来会比较的相对来说啊麻烦一些,相比我们的GS。
02:03
这是我们爱GS地方啊,易学,然后呢,相对也是易学易用,这是它的两个这个优点,那我们为什么恨S恨GS,诶那就是这个东西,就是GS这些特点啊,我们说它的易学呀,易用啊,这是它的一把双刃剑,它的优点,同时呢,也是他的缺点啊,他很易学,很容易上手,那这就导致其实我们很多去写这个GS的这个程序员,或者尤其是初期的一些程序员,由于GS太易学,太易用了,所以导致很多人对这个GS的理解的话,它并不是那么的透彻,诶拿过来能用,好使好使,为什么好使不知道,反正是好使好用,那这就导致我们在写代码的过程当中,实际上我们。测试的时候,呃,发现它好使了,但是真正在实际使用过程当中,可能有一些更复杂的情况出现,导致我们这个代码在使用过程当中出问题,而这个时候这个问没有在我们开发的时候体会出来,体现出来就直接暴露给了我们的什么呢?用户,所以用户在使用一些我们这种前端的项目的时候,有时候经常会看到一些奇怪的东西出现,那可能就是你碰到了一个这个不太靠谱的一个前端工程师,他写了一段不太靠谱的代码,他测试的时候好好的,但是由于有一些情况他没有考虑到,在你用户去用的时候,这个问题体现出来了,所以GS易学易用,但是开发过程当中呢,它会很容易给我们埋下一些这种安全的隐患啊,安全的隐患,这是一个二一个呢,就是GS它维护起来的成本会比较高一些啊,那我们之前啊,在很早的时候GSGS出来的时候,那其实我们主要就是用它去完成一些。
03:52
这个用户啊,和这个浏览器之间的一个交互,再往后发展的话,其实GS用的最多的场景的话,可能就是一些这种这个小广告是吧,这个网页上出这个出这么一个窗口是吧?呃,从左边儿诶,从这个左边飘啊飘啊飘飘到右边啊,从右边又飘啊飘啊飘飘左边,诶就想让你点呢,而且还都是那种比较的这种比较这个叫什么呀,比较这个黄赌毒这种广告是吧,都是比较这个垃圾这种广告,所以就是GS最开始写的东西都是一些比较小的东西啊,比较弱智的一个东西,比较简单的东西,那那个时候GS的问题。
04:32
其实并不明显,这东西太简单了,随便写俩就写出来了,没有什么技术含量,很简单。但是的话,随着现在我们这个前端的开发的重要性越来越高,我们在用我们前写前端的项目的时候,我们前端的项目也会越来越复杂,越来越复杂,我们会发现用GS去编写的项目开发速度其实还挺快的,但是一旦我们开发完了以后,我们再去回过头来再去维护这个项目的时候。
05:02
哎呀,你会发现你你想死的心都有大多更多的人可能在维护过程当中,可能就把这个维护这个事儿给放弃了,哎呀,算了,别维护了,维护起来太费劲了,干嘛呢?我直接重新写吧,维护成本实在是太高了,所以的话,其实就我们传统的GS来讲,它实际上不适合开发一些这个大型项目,为什么不适合开发,两个问题,第一个问题呢,就是。它的面向对象写起来会比较麻烦,尤其是老版本的面向对象,就是在我们ES6之前,我们这个GS的面对象还是我要去写原型啊,我要去往原形里加呀,还是往这个这个构造函数里加,总之就是很麻烦,再加上它本身没有这个块作用域就变得更麻烦了。然后呢,再有一个就是GS里它没有类型,没有类型这个概念,当然我说的这类型并不是说我这个值的类型,我说的是什么呢?是变量类型啥意思?在GS里我整一个变量,比如说我来一个let a let a等于一个十,Let a等于一个十,我给这个A赋值了一个变量,赋值A,这个变量赋了一个值,值呢是十,那十是有类型的,十的类型是number,但是变量A是没有类型的,A是没有类型,A就是一个变量,它里边想存什么就存什么,换句话说,我后边用的过程当中,我来了一个A等于hello,我给来一个氦吧,A等于氦,我给它存了一个字符串。这个时候我们。
06:30
GS里也是可以存的,我再改一个A,等于我再改成一个尔值也是可以改的,也就是我们所谓的叫做一个动态类型,诶GS里的变量是一个动态类型,你说我想去使用一个变量,我可以去给它赋值一个任意的类型,这一点其实是很方便的,我们不用再去考虑这个变量的这个类型了,但是呢,与此同时,它实际上给我们带来了一些安全隐患,什么安全隐患呢?我这个变量A啊,我可能在别的地方要用,我希望它的类型呢,是一个这个数字是一个数字,那我在别的地方在用的过程当中呢,哎,我把这个数字呢,我给它。
07:14
需要运算的,那这时候你把这个A的值改成了一个字符串,那这个时候就埋下了一个隐患,什么隐患呢?就是。运算的时候是不是可能出问题啊,我本来我要做加法的,那你字符串加法变成拼串了,我要做减法的,我这一字符串啊,不是这个数字结果就得得到一个难了,诶那这个隐患。就就是就很很难受,难受在哪儿呢?不会报错,你根本就看不出来,那你在看到这个错误的时候,你只能去一点一点的拍,所以GS不报错对于我们刚接触的GS的人来说可能是个优点,但是当我们去诶工作一段时间以后,我们对这个GS有一个深入了解以后,GS不报错这个特点会让人非常非常头疼,我们真的希望其实多对,至少我是这样想的,就是我真的希望我哪怕代码写的一点不对,你给我报个错,你报个错我改了,这样可以避免我后边出现更大的错误,但是你GS不报错,不报错,哎呀就让人干嘛呀,燕子很痛苦,你这不报错,把这个错误干嘛呀,就给我隐藏起来,导致我后边出现更大的错误。
08:24
但是呢,其实变量的话,它并不是一个最大的问题,最大的问题其实还有一个就是我们的这个函数GV,我们去定一个函数,比如说叫FN函数里边我们可以传参数,传一个A,我传一个B,最可怕的问题是函数的参数他也没有类型。也没有类型啊,我这个A,哎,我我比如说算个加法,我想做个加减法,A和B加一块,但是你在团的时候,按理来讲,那你既然做加法,你当然应该传数字了,但是GS不吝,这个你爱传什么传什么,你想传数字,你想传字符串,你想传不尔值,你想传个对象,想传啥传啥,没有任何限制。
09:06
但是呢,你说老师这不挺好吗?很自由啊,对,确实是自由,还是那句话,他不会报错,那于是如果你这个值要在别的地方,可能再参与什么其他的运算,那这个时候他就会把这个错误埋在这儿,这个错误他他不一定,比如说我在第三行写的代码,这个错误不一定在第三行出现,可能在第三行出现。第三方情况出现,那这个时候我们再去维护起来就会非常非常的痛苦,就是因为它的类型不明确啊,类型不明确,所以它这个动态类型实际上对于我们后期开发来说,实际上会给我们增添一些这个困扰,你像最早的这个GS,就是这些编辑器啊,由于GS是动态类型,所以很多地方,包括现在的web,包括s code,它的提示都不是很完善,有些东西它就提示不来,为什么提示出来,因为知道它的什么呢?哎,不知道它的这个类型啊,类型所以说了半天,那总之呢,就是GS很好,但是它也存在有很多的缺点,那GS所存在的这些缺点,其实我们应该也是可以理解的,这和GS它所产生的背景有关,GS产生于第一次浏览器的大战啊,第一次浏览器大战,这个交战双方是微软公司,还有一个是网景公司啊,那网景公司呢,当然已经被微软公司打败了,但是呢,恰恰就是这个被微软公司打。
10:30
公司他设计了这个javascript,那为什么要设计javascript,就是为了要和这个微软公司去去拼是吧,我你没我有你没有,但是他当然最后发现也拼不过了,哎,但是呢,他这个GS产生背景就是在这个。大战之间,这个在竞争市场份额,那这个时候的话,那竞争市场份额,在商业竞争这样一个环境下,我们有一句话叫什么呀,叫天下武功,无坚不摧,唯快不阔,所以GS他的制作周期非常的短,可能几天就给他做出来了,所以有些设计考虑的非常的非常的不周到,你想最典型的可能就是我们一些这种兼容性的问题啊,尤其是以前的老版本的这个IE的兼容性问给我们带来了很多困扰,所以的话,GS给我们带来了方便,也同时给我们带来一个痛苦,那我们其实就希望有一个新的语言能帮助我们去解决这个问题,就是它能帮助我们去克服这个GS的一些缺点,哎,然后呢,诶,还能让我们像GS一样,能更很灵活的去实现我们G这些,当然啊,我们说想替换GS这个东西是不太可能的,因为GS在来在。
11:49
这块是一一门无可代替的语言,那你只能用GS,你连选都没得选,所以你说想替换GS替换不了,那我们怎么办?所以的话,诶,有一家公司想一个办法,他可以干嘛呢?曲线救国,我用另一种方式去代替这个GS,诶那这个公司是谁呢?就是微软公司,那微软公司所设计这个语言就叫做typescript,也就是我们所谓的什么呢?TS啊,微软这几年其实也是干了点人事是吧,干点人事首先的话,可能我觉得,呃,像设计出这个TS,那就是一个大大的好事,还有什么呢?还有像它的编辑器S也是一个非常非常用并且免费的一个编辑器啊,常用。然后还有就是什么呢?还有就是这两年他放弃了他的这个IE的内核啊,转而投到了这个chome内核,这都是他这几年干的一些这种,诶人事啊,干的那些好事,那我们今天来研究的就是什么呢?T typescript说了半天。
12:49
哎,GS,我们来看一下我们这个ts script,它到底是什么。好,那这里边我们先来看一下啊,这个TS的一个logo,那这就是TS一个logo,很简约是吧,一个这个蓝色背景啊,两个字母ts type script ts,它的出现的目的就是解决我们所说的那些GS所具有的那些缺点,就是为了要解决那些问题,谁设计的,刚才已经说了是。
13:18
微软公司,但是注意一定注意TS它并不是去替换GS的,一定注意它是以javascript为基础而构建的一个语言啊,也就是javascript是TS的根,TS是从这个GS上去衍生出来的啊,衍生出来的它是这么一个东西,所以这里边它是我们说它是一个这个javascript的一个超级,什么叫超级呢?它对我们的GS进行了扩展,首先它TS是完全支持GS的,然后在GS的基础上又增添了许多新的功能,那其中最主要的功能是什么?名字上已经带出来了,它叫什么叫type script,所以它最主要的功能就是在GS里边引入了这个类型的概念,也就是让我们GS从这个动态类型的语言变成了一个静态类型语言,给变量赋予了类型,赋予类型的意义就是我们一个变量,比如说还是刚才我们那个一个例子,我这一。
14:18
一个a let,一个A等于十了,Let一个等于等于十了,A现在存的是十,那么现在A的类型就是一个number,你说我后边我再来一个A等于,哈,嗨,那对不起,不行了,因为A的类型已经是数字了,你再给字符串就不行了,也就是变量你的类型,你变量生下来是存数字的,OK,你永远都缺存数字啊,存数字,然后包括参数,就是所有东西我们都给它引入了这个类型的概念,变成了一个这个静态类型的语言,让它变的这个变量的类型,包括参数类型都变得明确,那这样我们维护起来容易了,然后开发起来出问题的几率也降低了啊降低了,好,那这时候我们来看啊,Type script扩展了javascript,并添加了类型,然后呢,可以在任何支持javascript的平台当中执行,所以这就是它的一个特点,它扩展了GS,而且呢,它还兼容所有的这个。
15:18
GS这个这个平台,这就是我们TS一个东西,但是的话,其实同时呢,如果你是用了很长时间GS,突然用到TS,你可能会不适应,因为TS相比GS它增加一些东西,在语法上增加了一些限制,所以你在写这个TS的时候,你会觉得有点束手束脚的,怎么这么麻烦呀,以前GS很简单就写完了,但是TS我要多写很多代码,那是不是有点划不来呢?诶相信我TS这个东西啊,他就像一个什么呢?一个这个。一个这个需要你接触时间长的才能了解的这么一个朋友,你们所谓要日久见人心,你刚开始接触的时候,你可能觉得哎呀这东西其貌不扬,这这这玩意儿事儿挺多的,挺麻烦的,挺不喜欢的,但是当你跟他接触的时间长了以后,你会发现,哎呀你会越来越爱他,你会发现你就越来越离不开它,所以TS这个东西我觉得的话,未来的话,它是一个我们。
16:17
开发大型项目的一个。不二选择,当然如果你考虑说我这个要提升我这个项目的可维护性,那TS也绝对是一个不二选择啊,当然项目的可维护性除了语言本身以外,还有我们个人编写代码的习惯,你说我这编写代码习惯不好,你用啥语言也也没用啊,也没用好,那我们再往下看,所以这里边注意了,你说老师TS可以在任何支持Java平台执行,但是我这又说了一句话,TS不能被GS解析直接执行,那你这两句话不是有矛盾吗?哎,首先注意TS可以在任何支持。Java s平台执行,只要支持GS平台,我都可以去用GS,但是注意用TS啊,但是注意TS它不能被这个GS解析器直接执行,也就是比如说我写一个什么什么点TS文件啊,叉叉叉点一个S文件,这个文件我想在浏览器里直接执行,那是不不不行的,至少现在不行,未来咱不知道,至少是现在不行,它不能在我们的浏览器里边直接执行,那怎么办?那怎么办?诶那我们这个TS需要做一步转换,叫做编译,我们需要把我们以TS形式编写的这个代码编译,为什么呢?编译为这个GS,然后执行的,其实最终还是什么呢?还是GS啊,只是我们写的时候是以TS形式去写的,诶同学说,老师,那这不是脱了裤子放屁,我直接写GS吗?我干嘛写TS,哎,才说了。
17:56
TGS有缺点嘛,不易于维护TS,把它这些问题解决了,易于维护,我们直接写TS,然后转换一下,哎就OK了啊就OK了,所以这里边的话啊,还是那句话,刚用的时候会稍微觉得有点麻烦,但是呢,哎,过了这段就好了啊,那为什么要这么设计,你说老师为什么你就直接执行TS不行了,干嘛还要拐个弯执行GS呀,这没办法,GS的这个历史太悠久了,在浏览器啊,在我们前端开发这块啊,根深蒂固了,你想把它替换了,嗯,至少现在是不太可能啊,现在不太可能,所以我们只能曲线就国,就像我们这个,哎,Less呀,Ste理的语言,哎,我先用什么呢?我先设计一个比较,诶,比较完善的语法啊,比较完善的语法,比较完善的一个语法,我用这个完善的语法去写这个语言,然后呢,我再把这个转换成这个GS。
18:56
那这个时候的话,诶,我既可以用新语法,又可以兼容所有浏览器,那这样的话,其实是一个这个折中的手段啊,折中手段那未来会不会浏览器直接支持这个TS,我觉得也也也也不一定啊,也不一定。
19:13
所以说到这儿的话,那我们一定要知道,以后我们写完TS的话,它其实就比GS要多了一件事儿,我们需要对TS进行编译,我们需要哎,把TS转换成GS文件,然后才能执行,那么谁来编译呢?我们就需要去安装一个这个TS的一个编译器,它的作用就是来把这个TS转换成GS,发现这个我们往后讲代码的时候,我们再说现在了解一下就行了啊,了解一下就行了,而且其实我们的这个TS是完全兼容GS,也就是我们在写这个TS代码的时候,我可以直接就原分不按照GS去写都没问题,那同学说老师为什么这么设计GS不是不行吗?为什么还按照GS,哎,为什么?就是因为为了让一些习惯了GS的这个,呃,这个这个同学是吧,这个开发人员可以快速的去进入到这个TS,所以他也是会考虑一些这个推广的问题啊,如何让大家快速的去上手,但是呢,还是相比之下TS要比GS要严格一些。但这。
20:14
的严格是可以配置的,你想让它严格,它就能严格,你想让它松散一些,简单一些,我们也可以做到啊,也可以做到,所以它相比来说,这个GS的话就比较的灵活,GS呢,你说我想严格点吧,做不到啊,他做不到,你设置个严格模式吧,其实也嗯,也没有什么特别明显的作用,所以这里边的话,TS的优势你往后会看到越来越明显明显。然后再往下,我们接着来说,那我们这个TS的话,它是对我们的GS的一个扩展,那么在TS当中它到底增加了什么呢?首先它增加了类型啊,增加了类型首先的话,我们GS里本身就带类型,Number啊,String啊,然后什么bully啊,Object呀,哎,这个数组啊等等,这是我们GS里的类型,TS都是支持的,然后呢,但是GS里类型只是对这个值而言的,而我们在TS里这个类型可以给变量去设置,让变量有的类型,除此之外,TS还增加了很多类型,比如说像我们GS里没有的元组啊,像什么这个什么这个我们的这个这个枚举等等等等各种类型,Interface啊,还有什么这个这个抽象类,这些都是我们GS里没有的,而TS里所增加的一个啊,所以保证原有类型的基础上,又增加了一些新的很强大的一个诶类型,然后呢,诶它也同时支持ES。
21:40
新特性,这都是废话,TS就是完全支持GSS,有的S全都有,TSS里没有的S里也可能会有,所以它就是它的一个超级对GS的一个扩展啊,一个增强版是吧,就跟这个手机一样,那个是什么呀?普通版这个叫什么呀?叫pro是吧?Pro好,然后再来看,诶它还添加了ES当中不具备的新特性啊,增加了很多新特性,像像刚才说的抽象类呀,像这个接口啊,包括还有增加一些这种工具呀,包括还有各种各样的东西,像这这这这这叫什么装饰器呀,这这些东西它都是支持的啊,都都是在它在里面新增,新增加了一些东西,然后呢,诶丰富的配置选项,刚才也提到这一点了,就是TS语法要求会比较严格,但是呢,诶它可以通过配置选项去配置,你想的严格一点,诶,它就可以严格一点,你想呢,松散一点,它也可以松散一点,并且它还有一个特点,我们说了TS需要编译成GS。
22:40
最后交给浏览器执行,它有什么特点呢?我们GS的版本有很多呀,ES3ES5啊,E2015 2016,现在的最新的2020,明年可能还有2021这个版本,那这个时候,那我这个TS到底要编成哪个版本的GS,哎,那在这里边我们可以设置,你说我就兼容,我需要兼容老版本的IE,那我们可以把TS编译成这个ES3的版本,哎,你说我我不需要兼容老版本IE,我我就我就直接支持新浏览器,我用用ES6的语法,那我就可直接设置为ES6,你说我想用到ES2020的新特性,那我就可以编译成ES2020,也就是我们这个TS可以被编译成任意版本的GS,那从而其实也进一步的去解决了我们这个一个浏览器之间的一个兼容性问题,兼容性问题虽然到现在的话,其实随着IE的逐渐的消失,兼容性越来越不是问题,但是它帮我们解决了比不。
23:40
解决要来的来的好啊来的好,那还有强大的开发工具,那通过这个TS,其实TS也匹配了一些情感的开发工具,像TS比较的这个。比较配的吧,是吧,因为微软的语言嘛,其实你要搭配微软的编辑器,可能相对来说会比较的这个好一点,或者其实也不一定非得是微软的,比如说我们web storm结合起来也会非常的什么呢,也会非常的大,甚至说你说老师我我不写TS,其实你现在你可以说我不去写TS,或者说我不用这个TS去开,但是实际上我们现在它本上已经不开TS,即使你不写TS,你也不开TS,为什么?那我就想问你,你写代码的时候你用不用提示啊,你写GS时,你要不要你的编辑器里边给你提示啊,你要提示,那实际上你就是在用TS,因为最早的时候,实际上你像我们在刚开始去写这个G,那个时候,那个年代是没有任何提示的,写个代码好都没有提示,你还得自己去方法挨着后你得自己去出来,那现在为什么有提示了,就是因为TS出现了,TS出以后,它实际上可以给我们这个文件呀,就就变量啊,去加一些约束,它可以帮助。
24:53
我们的编辑器去识别我们这个变量的类型,才导致我们现在有了提示,所以TS的出现真的是真的是非常非常好TS啊,Script这个东西一定是微软这几年设计的非常非常的好的一个,哎,一个东西。
25:11
好了啊,我们介绍了这么多,说了这么多废话啊,总之呢,就是一句话啊,就是这个,诶,就是TSTS好啊,我们一定要去学这个东西啊,反正老师就是这样啊,教什么呢,什么都好,但是TS的话确实是是吧,我说哪一个说的好,我也都是真心实意的,TS也是我确实真的真的觉得他好啊,因为他突然让我找到了以前那个写Java的感觉啊,确实挺好的,但是的话还是呃,一个新的东西,我们学习的话会花费一些成本,那我希望你既然决定学了,那就认真的把它去去看下去,那咱们这块呢,也就不废话了啊,咱们来停一下,待会儿的话,下节课我们来开始正式来学习我们这个S的一个,哎,环境搭建,然后我们来开始编写我们这个TS代码,一点一点的,我们去进入到这个TS的世界,好,我们这节课先到这。
我来说两句