Vue3通透教程【十五】补充TS开发环境搭建问题

---

写在前面

专栏介绍：
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！

温故知新：
在上篇文章中我们为大家讲解了，TS一部分的其他类型，包括我们的 对象类型、函数结构类型、数组类型、 元组、枚举、类型别名 你都掌握了么？那么今天为了我们能够将更多的精力来放到我们的编码过程之中，我们首先带大家将在Node中去搭建我们的TS开发环境，为了我们更好的学习后面的TS语法；同时呢也是为我们前面在初探Typescript文章中的一些问题进行补充描述；各位小伙伴让我们 let’s coding！

---

Node中搭建TS开发环境

如果你并没有安装过Node的话你可以看下我之前的安装教程，这里呢我会默认你已经安装好了Node环境，首先我们找到自己以后要专门存放TS代码实例的一个文件夹；用VSCode打开！（其实跟我们初探TypeScript中的安装是一样的，如果你前面安装好了我们这里可以省略操作，本篇目的就是为了补充报错的原因，来为下篇文章的配置做铺垫）

全局安装typescript

这个呢大家自己检查一下是否安装过，我们前端的教程中带领大家安装过，如果没有安装的话，可以通过下面命令进行安装；这里呢建议大家进行-g全局安装，因为里面有一个包是tsc这个前面我们接触过，为了方面我们在每个地方都可以使用；

npm i -g typescript

---

验证环境

安装完成后呢 我们还是一样做一个小小的测试，我们首先创建一个index.ts文件，然后我们写入简单的一行简单的ts代码let str:String='哈喽，几何'然后在控制台执行tsc index.ts命令，然后你就会发现在index.ts同目录下多了一个·index.js`文件，这个就是我们的tsc将我们的ts编译成我们的js了，今天要给大家补充的就是当我们打开js后我们在回到我们的ts文件就会出现报错！

出现报错的原因呢，我们鼠标悬浮上去后提示的是无法重新声明块范围变量“str”。这是因为什么呢？其实这就是我们今天就来为大家讲解的内容，默认情况下我们TS会做下面几种假设：

1、把当前环境作为浏览器环境，因为TS默认不知道自己所执行的环境，所以默认会当成dom浏览器环境，我们可以验证一下你在文件中可以输入document、window对象；

2、如果代码中没有使用模块化语句（import、export），便默认为是全局执行的；

所以应该能够联想到，这里呢TS并不知道js就是自己的编译后的文件，所以js中有了变量str，我们在ts中再去声明就会报错；当然我们可能也会看到我们在TS中明明用的是let但是为什么编译后的js中却变成了var其实这个就是我们要讲的第三点；

3、编译的代码默认是ES3；因为编译成ES3能够为我们的代码在浏览器中运行启到很好的兼容性。当然我们目前在node环境中运行其实是不需要必须是ES3版本的；

结合上面的三种假设会让我们的代码没有实现我们最理想的状态，如何更改以上的假设呢？

1、使用tsc命令的时候添加参数选项
2、创建ts配置文件，更改ts编译的选项（推荐）

---

写在最后

大家看完这篇文章后，对TS的默认假设以及我们的报错是否有了进一步的了解呢？我们也暴露出了如何更改这些默认假设，并且我们建议使用第二种通过ts的配置文件来更改编译选项，小伙伴们可以动手尝试一下 先把我们的环境搭建起来，也还原一下我们上面的波浪线提示，我们下篇文章中，为大家讲解TS的配置！

几何送书七十四期 购买地址

参与方式：本博客中进行评论即可，只要评论内容不被折叠都可以参与抽奖；
抽奖方式：程序自动拉取未折叠的评论随机抽取5位伙伴，每人最多可评论5次；
抽奖时间：2023-07-15 17:00；
结果公布：待抽奖（2023-07-15 17:20会将结果公布到这里）
本期获奖者送实体书《CSS选择器世界（第2版）》一本本（包邮到家）

✨ $原创不易，望各位大佬支持一下！$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$