vue-tsc(vue3+ts+vite)

ForceProjectVue3透明教程【十六】TS自动编译

文章目录

写在前面。自动编译。编译配置文件写在最后。写在前面

栏目介绍：

梁哥作为Vue的忠实粉丝，导出了大量的Vue文章。应粉丝要求，他开始更新Vue3相关技术文章。大家应该都知道Vue框架目前的现状。所谓三大框架，是用户数量最多、企业选择最多的框架。梁哥在之前的文章中也提到过，Vue框架之所以如此受欢迎，是因为Vue框架相对于其他框架的巨大优势。感兴趣的小伙伴可以看看Vue框架背后的故事以及对前端生态的思考。这样来看，随着Vue框架不断被认可，如今的Vue框架已经成为前端工程师的必备技能。还记得友达开发Vue的初衷吗？为了让您的开发工作更加方便，也希望这个框架能够让更多人的开发工作变得更加轻松；现在Vue框架已经做到了，尤其是Dada。当然，2020年9月18日，Vue向前端同事报告了一项重大突破。Vue3.0版本正式发布！现在两年多过去了，越来越多的公司选择了Vue3技术，所以梁哥此时也为大家发布了这个专栏。本专栏将帮助大家掌握Vue3+TS技术，提高竞争力！

回顾过去并学习新的：

在我们之前的两篇文章中，我们向您解释了TS中的类型规范。你也应该熟悉我们TS的一些写作方法。其实从前两篇文章中我们可以体会到的一点是，TS的写法可能比较麻烦。毕竟我们刚刚接触这个也可以理解。还有一点就是我们的编译过程。我们每次修改一个文件，都需要将其制作成JS，然后才能在浏览器中运行。在这种情况下，一个文件就可以了。如果是一堆文件？还有一点就是我们前面提到可以配置TS文件的编译。如果报错，则不会编译。这样可以将一些开发问题拦截到编译阶段。还有一点是，我们之前提到过TS可以很便宜地转换成任意版本的JS，而且也可以在我们的编译选项中进行配置。在本文中，我们将了解我们的编译选项；

自动编译

单档

至于我们上面提出的问题，每次修改ts文件时，都要执行tsc文件名进行编译。每次都执行确实很麻烦，所以我们有自动编译的方法。我们可以通过tsc文件名-w命令来自动编译文件。下面我们看看效果。当我们在控制台输入命令时，会出现一个标识差异的标记；然后我们修改TS文件的内容。过了一会儿，控制台会显示差异识别Readytocompiling，过了一会儿我们发现JS更便宜，我们在TS中添加了新的内容；

但这是完美的吗？不，我们可以考虑一下。现在它是一个文件。如果修改多个TS文件并自动编译怎么办？我们可以通过多个控制台来设置，然后对不同的文件执行tsc文件名-w，但是这样就需要打开很多个控制台。其实这并不是一个好办法。其实我们可以通过下面的方式来设置。所有TS文件都会自动编译。

自动编译多个文件

上面我们提到可以通过打开多个终端对不同的文件执行自动编译命令，但不推荐这样做。如果我们想实现一个命令编译多个文件，我们需要先创建一个文件。这个文件就是我们所谓的编译选项配置文件，文件名为tsconfig.json，而我们的文件是json格式的，所以我们暂时只需要写一个{}，然后我们执行一个tsc——w。这时候我们所有的文件就可以自动编译了。您可以创建一个新文件并尝试一下；

编译器的配置文件

为了尝试实现所有文件的自动编译，我们创建了一个文件tsconfig.json。当时我们只在里面写了一个{}，但实际上这个文件就是我们编译器的配置文件。我们的一些编译器选项配置都是在此文件中设置的。让我们看看我们的{}根目录下可以包含哪些配置：

包括

include用来指定要编译的TS文件，也就是说我们可以用它来指定编译哪些TS文件。例如下面我们在tsconfig.json文件中配置了include值，这意味着我们需要将Compileanyfileinanydirectory改为

写在最后

看完这篇文章，相信大家对我们Vue3中的响应式数据有了一定的了解。我们可以使用reactive或者ref来执行数据的响应式转换。然后reactive支持复杂类型，ref支持简单数据。类型并支持复杂的数据类型。说到这里，应该有一个很大的问题，那就是我们的ref数据是可以转换成这两种类型的，那么我们该如何选择呢？我们将在下一篇文章中找到答案；朋友们，让我们来编码吧！

原创不易，希望大家多多支持

\textcolor{blue}{原创不易，希望大家多多支持}

原创不易，希望大家多多支持

喜欢，您的认可就是我创作的动力！

\textcolor{green}{赞，您的认可是我创作的动力！}

喜欢，您的认可就是我创作的动力！

收藏，您的青睐就是我努力的方向！

\textcolor{green}{收藏，您的青睐就是我努力的方向！}

收藏，您的青睐就是我努力的方向！

评论，您的意见是我进步的财富！

\textcolor{green}{评论，您的意见是我进步的财富！}

评论，您的意见是我进步的财富！