00:00
好,我们搭建完了typescript的开发环境啊,接下来呢,我们来往下来学习一下这个TS的一些基本的语法,那么我们刚才去写代码的时候,实际上我们用的是最简单的一个纯文本的编辑器,但是很显然我们在开发的时候的话,不可能用这么简陋的一个工具,开发的时候我们一般会用一些这种呃,比较高级的这种呃,开发工具IDE啊,那我们的开发工具常见的像什么呀?Web storm,像什么Vs code,都是我们前端开发当中比较常用的一个工具,那我们这次教程的话,我采用的辑器的话是一个web,那你如果不喜欢用web,不习惯用它,你也可以用一个你自己喜欢的编辑器啊,用哪个都行,那么我先来打开一下我们之前去写的那个代码啊,直接点击这个open啊,找到我代码的位置,我代码的话应该是放在那个桌面。
01:01
诶,这个是桌面的位置,桌面的位置的话,我有一个找一下在下边。哎。点一下桌面儿。在这找到desktop的这learn type script,我这里边有一个,哎呀。好奇怪啊。跳来跳去的乐type script里边有一个code code里边我们的这个呃,CHAPTER01,我直接OK,把它作为一个项目打开啊,打开以后呢,把它拿过来啊,那这个的话,我就直接用我们这个web storm来打开了,刚才我们写的那个代码,那web storm有一个特点就是你注意啊,你看啊,这个是我们的TS文件,这个是我们的这个GS文件,你注意它编译完了以后呢,它实际上可以把这个G,因为我们GS文件是由TS文件编译之后产生的,所以这个时候GS文件是在TS文件的下边的,当你点这个键头向下的时候,你是可以把这个GS文件折起来的,你再点出来呢,它就可以出来了,是这么一个东西啊,代码的话,还是刚才那个代码没有任何的哎区别,没有任何区别,那么接下来的话,我看啊,刚才也说到这个问题了,我们之前所写的这个代码的话,其实它都是一个这个诶叫做一个。
02:16
JJS代码就是原封不动的GS代码,没有任何这个TS的一个特性,那么接下来的话我们就来讲一下,诶,那我们的这个这个这个TS和TS他们之间到底存在着哪些不一样的地方呢?那这里边我们来看一下我们的这个笔记,那TS最大的特点,TS叫什么呀?叫typescript type什么意思?Type叫做类型,所以相比于TGS来说,TS最大特点就是在TS当中给变量引入一个类型的概念,也就是换句话说,我们在声明这个变量的时候,可以给这个变量指定类型,所以它才叫什么呢?哎,Typescript,那在这里边我们来看一下怎么在typescript里边去给我们这个变量指定类型,在这里我们直接来右建,新建一个TS文件,我们这个呢叫做一个零二,我们叫做一个basis啊,Basis basis我们的一个基础的,哎。
03:16
基础的一个东西在这里边的话,我们来写一个什么东西呢?那我们之前在GS里去声明一个变量的话,我直接let一个A,诶,那么这个变量就声明完了,变量声明完了以后,我们可以直接来一个A等于十,A等于一个这个哈,我们这么写都是没有问题的啊,声明一个变量,然后呢,给变量赋值,由于我们的GS它是一个动态类型的语言,变量是没有类型的概念的,你可以给一个变量赋值任意类型的值,像我第一次赋值赋值了一个十,是一个number类型,第二次赋值赋值了一个hello,是一个字符串类型,这一个东西在我们GS里这么写是完全没有问题的,但是正是由于它可以这么写,实际上它给我们带来了一些很多的安全隐患,什么安全隐患呢?诶比如说我一个变量,我希望它是字符串,但是在使用过程当中呢,诶可能是经由某个方法,诶经由某个函数或者某一个,诶代码把这个值给它改了,改成了什么呢?改成一个其他的类型了。
04:16
那这个时候我再把它当成那个类型去用的时候,实际上就会容易出错,而且这个错误还非常的难,难找,所以在TS里,它实际上TS很大的作用就是把我们的这个GS变成了一个静态类型的语言,它可以给我们变量指定类型,什么意思呢?诶,咱们以这个变量A为例,我这创建了一个变量A,在A后边我可以跟着一个冒号,后边跟着一个number,那这表示什么意思呢?哎,这表示的意思很简单,我们写一下表示什么意思呢?表示我们声明一个变量A,同时指令。指定它的这个类型,为什么呢?哎为number,那这个时候注意了,这个时候我们变量具有了类型了,那你在给变量赋值的时候,你注意了。
05:07
A的类型,哎,设置为了number。那此时我们什么呢?哎,以后的A在在这个以后的使用过程中。A的值只能是数字。只能是数字。啥意思?看着了,现在我要给A去赋值,我直接来一个A等于十没有问题啊,我来一个A等于33,这也没有问题,但是我来一个A等于hello a等于hello你注意了,这个时候我们就看出在我们这种高级的编辑器里的好处了,当然我们这块我给A复制一个hello的时候,你会发现A的下边出现了一个红色的一个波浪线,在文件这是不是也出现了一个红色波浪线呀?诶注意啊,这个你就不能忽略它了,这个就是我们TS的一个提示信息,告诉你,你这写的有问题,它不符合我们TS的语法规范,你说为什么不符合呢?哎,那这样的话其实我就可以直接告诉你了,因为我们这直接只给它指定的类型是number,而你现在在这儿给A赋值一个字符串,这是不行的。A生下来是number,那么OK,以后我们的这个变量A它永远都是number,你不能给它付其他类型。
06:27
的值,所以在这儿给你出来一个红色的一个线,告诉你有问题,诶你说老师你现在告诉我是这个错误,以后我自己写,我不知道什么原因怎么办呀?诶别着急,你可以直接把你的鼠标啊放到这条红线,这放到红线这儿的话,它会自动来干嘛呢?诶来显示我们这个错误信息,告诉你到底是哪错了,到底哪错了,我们现在用的是web web的话,它给我们显示的是一个中文的错误信息,如果你用的是we code,你上去的话,它实际上更好,它会给你显示一个中文信息,但是无所谓这个信息实际上都不难看这个错。
07:04
人家写了type hello is notable to type number啥意思?很简单嘛,就是一个哈,这个类型的值不能赋值给number一个类型啊,什么意思啊,A的值是A的类型是number,你不能给它赋值哈,就这么一个错误,所以这个要注意,这个此行代码会报错。代码汇报错,为什么呢?哎,因为A不A的类型变量A的类型是什么呢?哎,是number,哎不能赋值字符串,不能赋制字符串,哎,那这样就很有效的避免了我们说给一个变量负错值的一个情况,那这里面不仅是在这儿会有错,如果你这个没有注调它有错,当你对这个文件进行编译的时候,在这儿我们直接来一个TSSC,诶021个basis啊,点TS我对它进行编译,我编译的时候实际上它也会给我报出什么呢?哎,报出一个提示信息,你看是不是也在这儿给你写了一个这个提示信息啊,Error告诉你type string is not sendable to type number,哎,String类型的值不能赋值给number,就是这么一个错误啊,这么一个错误,但是注意了,有同学说老师诶。
08:30
报错了,报错了,但是这里边它怎么还是编译成功了呀,也就是说他虽然给我报错了,但是我这个TS文件是不是还是编译成了这个GS呀,哎,那这个就是我们的TS一个特点就是默认情况下,就是在以我们现在这种使用方式的情况下,即使我们的TS里边有错误,有错误它也会让它编译成功,也就是说它不会说,诶我这有个错误就不让你生成GS了,不会这样,诶为什么呀,因为首先说第一种第一个情况,这种语法它是符合我们GS语法规范的,所以他是可以编译的,这是第一个情况,第二个呢,就什么呢,就是实际上他也是为了让我们这个刚刚接触这个TS人呢,更容易去接受,更容易去适应这个GSTS,为什么这么说,因为如果说我编我写的有错误,就编译不通过的话,那些习惯了写GS的同学的话,可能。
09:31
他的适应不过来,也就导致我们TS没有办法很好的一个,所以在这里边的话,默认情况下,我们的编译工具的检查并不是那么的严格,也就是你的代码里有错误,它依然可以去编译,可以编译,但是呢,你说老师有错误还能编译,那它不又失去意义了吗?诶别着急,这就是我们后边要讲的内容,后边我们可以通过这种编译工具的一个配置,可以干嘛呢?可以做到让它在有错的时候就不编译,不生成GS文件,这样就可以降低我们这个出错的一个情况啊,出错的情况好,那把它注掉啊,把它注掉,注掉你再编译的时候。
10:14
天神。啊,没写文件名啊TC,我们来一个021个basis.js,这个时候它就会正常去编译,就没有诶任何的错误,我们来看一下。啊,这个没事儿,这个不是我们的这个错误,这个错误是因为啊,我这块编译的是是我写成GS了,我看一下啊,你看我写的是02basis.gs啊,我们编译的是谁啊,编译的是TS文件回车,诶那这个时候就应该没有这个错误信息了,你看你看我编译完了以后,这是不是什么信息都没有啊,哎,什么信都没有就证明我们编译通过了啊好,那这个就是我们的TS的一个最基本的啊,可以给变量指定类型,那你说老师我想整一个字符串类型怎么办呀?哎,一样let一个B冒号,我们来一个string,那这个B的话就是一个这个字符串的类型啊,字符串类型可以给B去复制这个字符串了,那你B可以等于哈,就没问题了,但是你说我来一个B等于123,这个时候就报错了,为什么呀?哎,B的类型是string嘛,你给他了一个数字,那当然就会报错了啊,当然就报错了,好这个是我们看到这个东西,而且呢,这里边。
11:27
其实你要注意一点,就是你看啊,这个是我们的这个TS,在这指定类型了以后,它编译完了以后,是编译成了GS呀,哎,编译成了GS,你看啊,我这生成变异量,我用的是light a light b,但是它编译以后变成什么了,这是不是变成了Y呀,同样啊,我再给对它进行编译一次,这个时候我们这还有一个light b light b实际上在这儿也会变成什么呢?变成YB,为什么啊,因为我们这个TS它还有一个特点,它需要从这个TS文件编译为这个GS文件,它有一个什么特点呢?它可以编译成任意版本的GS文件,你说我想把这个TS编译成这个ES的,诶没问题,我想把它编译成ES5的也没问题,我想把它编译成ES6ES2015的,在这儿呢也没问题,也就是我们这个TS,它是可以编译成任意版本的一个GS的,诶这有什么好处。
12:27
好处就是它可以确保一个我们代码有一个最好的兼容性,在不同的浏览器里都可以正常去执行,你想兼容哪个版本,我就编译成哪个版本,那默认情况下,它实际上在这是编译成了ES3的了,诶那你说我想编译成ES6的怎么办呀?诶那这个也是我们后边要讲的,我们需要对我们这个编译器做一个配置,来指定它要编译成的一个版本啊,版本这个后边再说不着急啊,我们现在还是先看这个类型啊,那有了这个类型以后的话,其实我们。
13:02
出错的几率就降低了很多,等于其实就是把我们的GS变成了一个静态类型语言,但是呢,实际上这种写法啊,我们在TS里用的并不是那么的多,为什么不是那么的多,因为我们想我们写GS代码,实际上我们先声明变量,再对变量进行赋值的情况,其实也并不是那么多,会用啊,会用但是没有那么频繁,我们一般是什么呀?我声明完一个变量,我是不是就直接给它赋值了,哎,比如说我这来一个let,一个C冒号,我们来一个bully啊bully等于什么呢?等于一个true,我是不是声明完变量就直接赋,声明完变量就直接进行赋值,进行赋值,哎,那这个其实这么写就就是我们TS的语法,啥意思呢?我声明一个变量C,它的类型什么呢?是bully,同时呢,我给它赋值一个布尔值,是一个true啊,是一个true,当然你说老师我这写个123行不行。
14:02
第二天就不行了,为什么呀,因为你它的类型已经声明成布尔值了,你再给它数字是不是就不对了,哎,所以这儿只能是什么呀,布尔值你可以给负字,也可以给给处,给什么都行啊,给什么都行,但是我们为什么说像这种写法啊,它用的不多,为什么用的不多呢?这里边你注意啊,现在我这加了一个玻璃,我给它赋值,然后我这来一个C等于处,我给它赋值处是没问题的,我如果给它赋值一个C等于123呢。就报错了,为什么报错了?哎,就是因为你已经限制了是布尔值,你这不是给数字了吗?那当然就报错了,那你说老师我如果不写这布林会什么效果?我不写他。不写它,你看我不写它,也就是我声明变量的时候,没有去给他指定这个类型,你看这个错误是不是依然还在,还是一个错误告诉你什么123不能赋值给布尔类型的变量啊,123不能赋值给尔零变,诶你说这很奇怪呀,我这个类型我这也没有写呀,为什么你在这儿它知道它是布尔类型呢?来来,我们先改回来啊,改回来注意了,来我这复制一下,把这注掉,把这注掉注意了。
15:17
哎,如果什么呢?哎,如果我们这个变量的声明。和赋值是同时进行的,是同时进行的,我们这个TS呢,它可以自动哎对我们这个变量进行类型检测。啥意思?我这来了一个let c等于一个false啊,False,那么TS的这个边引器它很聪明,一看啊,你都给C赋值一个布尔值了,那我就知道了,这个C的类型是什么,这个C的类型就是玻璃,这个玻璃是哪来的?这个玻璃是TS的编译器它自动判断出来的,那么以后你再去用这个C的时候,你就只能给它负布尔值,其他的任何类型的值都不能负,就只能是布尔值,那这样一看,我这儿再写一个布论,是不是就有点多此一矩了,哎,多此一矩了,所以我们在这对我们的变量进行这个类型的一个声明时啊,对变量进行类型的声明时注意了,如果你是说我先声明再赋值,OK,你可以这么写,没问题,果你是声明和赋值同时进行的,那像这种你就不用再去写类型了,它会给你自动去判断,诶我们的TS是不是还挺贴心的对吧。
16:42
挺贴心的,诶那这个时候同学可能会看到这儿也会觉得,诶这个变量这个类型似乎有点儿。似乎有点鸡肋呀,对吧,既然他已经可以自动判断了,那似乎我再手动给他加这个类型声明好像没有那么太大的必要了,那这个东西还有什么用呢?诶注意了,我们说啊,其实在我们用这个GS的时候,我们最大的问题的话,就是我们对于这个类型给我们造成最大的困扰,其实往往不是变量,往往不是变量,那什么会给我们带来大问题,其实是谁呢?其实是函数,比如说我在这定一个function,我叫一个sum sum呢两个参数,一个A,一个B,哎,然后呢,我在这直接return一个A加上一个B,返回一个A加B,那这个时候你注意了,我们说了参数有什么问题,哎,那我们说了GS中的参数是GS中的函数,它是什么呢?是不考虑。
17:46
不考虑我们函数的这什么呢?考虑我们这个参数的这个类型和这个个数的啊个数的,我们这个函数的名字叫sum,所以很明显我这个函数我是想用来进行哎进行求和的,而求和的话,很显然我是不是要去对数字进行求和呀,哎对数字进行求和,对数字进行求和,那我们如果要这么调的话,比如说我掉一个萨萨,一个这个123逗号一个456。
18:17
诶,那他肯定能够算出来这个结果呢,应该是一个579啊579这里我就不演示了啊,我所有的代码都是写完了,在这没有演示,因为它比较的简单,你要想演示我们说一下是吧,你要想演示怎么演示,演示的话,我在这儿我需要创建一个新的文件,诶比如说我就叫做一个index,点一个MR,那干嘛呢?哎,那我得把这文件啊,我得引进来。引进来,引进谁呢?Src,我们叫做一个02.1个点GS引进来,然后我们运行这个文件,是不是就访问这个GS了,哎,当然访问之前啊,我们先这样,我打印一下这个结果啊,直接点一个log。然后在这儿呢,我们对文件进行一个重新编译啊,因为记记住了啊,我们这种TS的话,就是你改完了以后,现在来讲我们必须得编译一下,不然你新写的那个代码它不会生效啊来我在这儿运行一下。
19:14
浏览器,我们来看看效果。右键点击这个检查,我们来看一下,哎,是不是就算出来是一个579啊,哎579,但是呢,同样是这个函数,这函数我如果不传123456,我传一个123。然后呢,我传了一个字符串456。诶,传了一个123,传了一个字符串456,那这个时候他是不是依然还能还能算还能算,但是问题是这个是字符串。这个是数字字符串跟数字,它是不是就会去拼串了,拼串以后是不是就变成123456,并且结果它会是一个字符串啊,哎,结果是一个字符串,我们来运行一下啊。
20:01
重新编译,然后在这儿我们直接刷新是不是123456,你看黑色的是一个字符串啊,是一个字符串,所以这个时候的话,其实像GS这种函数的特点的话,它实际上给我们的开发提供一个便利,也就是我们写函数的时候很简单,你不用考类型,你也不用考虑这个数量,你想怎么传呢,你就怎么传,我传八个参数也行,我弟你两个传八个也行,他不会报错,但是呢,他实际上就给我们造成一些这种安全的隐患,什么隐患呀,你这玩意儿就很不靠谱了,尤其是在我不经意间调用,我不知道我第二个参数传的是字符串,也没有人告诉我,他也不会报错,那这样不小心就算出了一个什么呀,算出了一个字符串作为结果,而这个结果,如果我要用到别的地方,它可能会导致一连串的错误,而且这个错误啊,非常非常的不好排,就是GS给我们带来一个一个问题啊,一个问题,那这个东西怎么解决啊,那实。
21:01
实际上有了TS以后,这个问题基本上就不算是什么太大的问题了,啥意思呢?诶,那TS其实我们说了,我们的类型声明不仅仅能用在变量身上,哎,更重要的是我们的类型声明也可以用在这个参数还有返回值的身上。比如说现在我定义了一个sum这个函数,我现在希望什么呢?我有两个参数,一个是A,还有一个是B,而我希望什么呢?A的类型是number b的类型也是number,那我可以在A的后边加上一个什么呢?冒号number,在B的后边加上一个no,冒号一个number,也就是我给参数加上了类型声明比示什么意思?比方说,诶,我希望我的的两个参数类型都是数字,那这个时候会有什么效果?Sum我们来个123,逗号来个456,这么写没有问题,可以正常写,但是如果我第二个参数,我传的是一个字符串,你注意了红色。
22:01
波浪线又出来了,哎,他又出来干嘛呀,又来啷哩个啷了,有什么问题,还是你把鼠标放在这儿,人家会告诉你。Argument参数啊,456不支持赋值给什么呀,Number,也就说人家需要的是一个这个数字,你给了人家一需要一个number,你给的一个人家一个字符串,是不是又给你做提示了,又报错了,但是还是那句话说回来,你即使这么写了,你去编译编译,它现在默认情况下还是能通过的,还是能通过的,就说这个东西它依然会编译出来,会编译出来,你说老师这不没用了吗?诶有用,为什么有用,因为好歹如果我用的是GS写的话,这玩意儿我们。在代码提示上是看不出来的,我们只能自己去发现,而有了TS以后,他这给我们一个提示告诉你了,诶这应该是个数字,结果你传了个字符串,是不是传错了呀?哎在这里我们就可以做一个预先处理,并且在后边在开发的时候,我们还可以干嘛呢?哎,我们还可以去加一些限制,比如说有错误我就不让他通过编译,那这样实际上把这个错误就消失在了什么呀,萌芽阶段,把这个错误消失了以后的话,其实它会避免我们后边会可能出现的一个什么呀,一个这个错误,哎就这么一个作用,所以在这儿的话,一定注意我们的类型的注解啊,类型的声明也可以加给我们的参数啊参数,那好了,那这我已经看见错了,我改成这个456,那我再来一个参数吧,我来一个789,你看789,这是不是也会报错啊,这如果是GSGS肯定不会管你的,你传100个他也不会管你的,但是TS里它是一。
23:44
相对来说比较严格的语言,但比GS就严格的太多了啊,太多了,虽然现在来讲不是强制的,但是它也是语法上是很很讲究的,什么意思呢?哎,我这需要俩参数,你传了三个。是不是传多了,同样,你如果传少了。
24:02
也会给你保存啊,也会给你保存,就是这么一个特点啊,这么一个特点,好,那这个是我们说的一个点,叫做可以给我们的哎参数来指定这个,哎做这个类型的声明,相比于变量来说,参数的类型声明其实会用的也会比较的多,那除了参数以外,我们还有一个位置会用到类型声明什么东西呢?哎,你看我们函数是不是有返回值啊。函数有返回值,函数有返回值,有返回值值值,值是值是不是就有类型啊,那么返回值的类型我们能不能指定啊?哎,当然可以了,在哪儿啊,看着啊在函数括号的后边,我们可以给它加一个这个冒,哎,加一个冒号我写什么呢?我写一个number,那这个number是表示什么呢?表示说是我们函数返回值的类型什么意思?告诉你函数的返回值是一个number啊,是一个number,那这样整完了以后啊,我们在赋值的时候,比如说我这来一个light,一个ret,等于它,等于它以后的话,其实你再放这这个result的话,你看它就能给你判断出来了,Result的类型是就告诉你知道这个返回值的类型是number,并且还有什么用呢?就是当你返回值类型不对的时候,比如说我这返回了一个A加上一个hello,很明显我这个。
25:28
说返回的结果是一个符串,然后这是不是给你报错了,哎,你看人家返回的结果是一个字符串,但是他期望的值是一个number,哎,Number不对,有问题就给你做了一个提示,所以的话,这个也是非常的一个方便的,但是我相信啊,如果你是第一次,如果你之前学习语言,你只用过像GS,哎,像Python这种动态类型的语言的话,你看到这个东西,你会觉得它挺恶心的,它挺麻烦的,挺麻烦的,诶确实有点麻烦,确实有点麻烦,在写代码的时候,开发,就是刚刚开发的时候,确实是有点儿麻烦,但是相信我,相信我,当你做的项目越来越大的时候,你会越来越喜欢这些东西,因为这些东西让我们的代码更明确,让我们的代码越来越可控啊,越来越可控,所以现在的话,诶,你不管说你觉得它麻烦也好,你觉得它不麻烦也好,无论你怎么想,那既然想学TF。
26:28
那你们就先按照他的要求去做,慢慢的去体会它的好处啊,它的好处好,那这里的话就是说的我们一个类型声明力的简介,那主要说这么两件事儿,第一个我们可以给变量进行类型声明,直接在变量声明后边加上就行了。而我们如果变量是声明和赋值同时进行的,这个类型声明是可以省略的,它是可以自动去判断的。第二件事儿,我们的声明也可以在函数当中应用,主要是两个位置,一个是参数的类型,还有一个是返回值的类型,啊,类型,然后呢,诶,我们类型能有什么呢?哎,我们刚才举例子了,我们是不是可以用number啊,哎,我们可以用什么呀?我们可以用bully,诶还可以用什么呢?还可以用string,这是不是都是我们那些基本类型啊,哎,基本类型,而且注意啊,都是小写的。
27:24
都是小写大写也行,但是千万不要写大写,写大写那个意思就变了啊,意思就变了,一定注意在这里都是小写的啊,都是小写的,那你说老师是不是只有这三种类型啊,只有number string和bulllin呢?哎,当然不是了,我们还有很多很多其他的类型,包括GS里有的,包括GS里没有的,TS里它都有,但是这些东西就会比较多了,诶,先别着急,把这一点东西先自己体会体会,写一写,熟悉熟悉,然后接下来下节课我们来介绍我们TS当中的一些,哎,可以用的这些类型,好,我们先停一下。
我来说两句