04_尚硅谷_Vue3-我的第一个TS代码

好嘞，这个TS呢，已经安装成功了是吧？那下边呢，咱们写一点代码和TS呢有一个亲密的接触是不是？呃，找到我的Vs code，然后呢，这里边有一个code的目录啊，因为咱们这个课程里边呢，除了TS以外，还有V3吧，所以说呢，我这个目录是这么个建法，首先呢，在这边新建一个目录，然后呢，里边写个零一杠，来一个Type C PT啊，我们把所有TS代码呢都放到这个目录当中啊，首先新建一个文件，这个文件比如说叫做零一杠啊。啊，第一次。的这个。TS.ts啊，我来这么一个文件里边呢，写点TS代码吧。啊，其实呢，TS里边可以写GS代码，所以说我们一开始先这么写啊，来上一个function，之后来上一个呃，C就再来一个小括号，大括号里边写个str之后呢特嗯。呃，你好啊，然后再加上一个str之后呢，里边我来一个变量light叫T等于啊，写个名字叫小甜甜之后can。

点log里边写个C括号里边把T传进去。其实呢，我写的就是基本的JS代码，TS里边是支持这种写法的啊好，然后呢，当然如果我写要是想直接写TS代码，我可以在后边直接写上一个冒号G，这是可以的，它代表的是什么意思呢？啊，意思是说str这个参数是STG类型的啊之后呢，保存，保存完之后呢，因为我的TS的代码是在TS文件里边写的。如果直接在浏览器里边打开，没有任何效果，所以说我们得通过页面的方式引入它对应的JS文件，这样呢才有真正的效果，所以说我会在这边新建一个文件，来一个index.html好了，然后写上HTML的代码，紧接着在这边写上一个SQL标签。

点杠把这个TS文件呢引入进来，保存一下alt加B。之后在浏览器里边打开鼠标右键检查，然后呢，我们再来看一下cancel，我们看一下它报错了。啊，这就说明什么呢？诶，我的这个HTML文件里边，嗯，怎么的呢？这是直接引入了TS的文件，那么浏览器是会报错的啊原因是什么呢？就是TS文件当中有用了TS的这个语法，也就是说如果TS文件中。只有单纯的什么呢？GS的语法代码。对吧，是可以正常的引入及使用的，哎，所以说大家可以看一下啊，首先我在这边如果把TS这个语法去掉是吧，直接保存，然后再打开界面一刷新，大家看这是可以的是吧？好，那我们之前所说TS的代码，最终要把它编译成GS的。

代码是吧，或者说TS的文件要编译成JS文件，在我的页面当中引入是没有问题的，所以说啊，我把这个注射掉。然后呢，我在这边写上一个此刻有标签，然后点杠，然后。把它去掉，变成一个JS文件是吧？那我如何把我在TS当中的代码，或者说这个文件最终编成一个JS文件呢？只需要在我这个目录上边鼠标键在集成终端当中打开，然后通过命令tsc，然后来上一个tab键。空格看不键，然后呢，找到这个TS文件，然后回车稍微等一下，等个几秒啊。好123好三秒就搞定是吧？好，那这个时候上面呢，就出现了一个GS文件，大家可以看一下GS文件当中有刚才的TS的代码是吧？然后呢，在这边也引入了这个JS文件，此时我在打开页面，大家看一下效果是一模一样的是不是？那有同学可能会想说，你刚才的这个TS文件当中写的就是基本的JS代码，你这么去引入JS文件好像也是非常正常的，那如果说你这个位置写的就是冒号string呢，写的是这种TS的语法呢，是吧？好，那我再保存，把上面的代码再重新编一下。

好，应该是差不多了是吧，那这个时候呢，我们再来看啊。给我们编成这个样子。是吧，我们可以做一个对比啊，当然啊，对比之前我们先看一下页面啊。刷新一下效果和刚才是一模一样的是吧，所以说现在我们来看，我把这个GS文件向右拆分。然后呢，找到TS文件，我们来看一下，左侧是我的TS代码，右侧是我的JS代码，首先函数一模一样是吧，无非就是参数这个位置TS当中写了一个类型，你的GS当中这个位置没有。还有一个什么呢？这个位置写的是light，然后右侧这个位置编译成的是VR是吧，所以说没有什么太大的区别，那最终我稍微总结一下啊，就是说TS的文件当中。总结一下TS的TS的文件中如果直接书写什么呢？GS语法的代码。

那么在HTML文件中。就是文件中直接引入TS文件逗号在谷歌的浏览器中。浏览器中是可以直接使用的是吧？好，那么如果TS文件中有了TS的这个什么呢？语法代码，那么就需要把这个TS文件编译成么呢？GS文件，然后在HTML文件中引入什么呢？GS的文件来使用。是吧，注意这个区别啊，好了，还有一个什么问题呢？诶。

就是说TS文件中的这个函数中的行参啊，如果使用了什么呢？类型使用了某个类型进行什么呢？这个。呃呃，进行规范啊，或者规定啊，就是说TS文件中的函数中的行参如果使用了某个类型进行修饰是吧？那么最终在编译的JS文件中是没有这个类型的，我们可以看一下，这边是STM冒号，String这边呢是没有的是吧？啊还有一个问题。怎么的啊，TS文件中的变量使用的是什么呢？Light进行修饰，那么编译后的JS文件中的这个修饰符就变成了什么，就变成了这个VAR了是吧？哎，就这点区别，当然呢，这是咱们第一次和TS代码进行接触，有一些不习惯的地方呢，也很正常啊，并不是说TS文件当中一定只能写TS语法，我可不可以写GS代码呢？也是可以的。

啊，就这点儿区别是吧，好，这是第一次和TS代码进行一个接触啊，暂时呢，大家稍微的理解一下啊好。