「这是我参与2022首次更文挑战的第39天，活动详情查看：2022首次更文挑战」
其实我自己之前也建过demo写过，vue3+vite的没加ts,不过ts是在angular里用的。这天，新接的任务用的就是这三合体。 其实这篇文章是写来吐槽的。
首先安装依赖，我就犹豫了，是用 npm呢还是pmpm呢，还是。。。？然后，我看到了yarn.lock,心想应该错不了，就决定是yarn了。 输入一个 yarn 啪一下enter ,很快啊。 然后，就看到一篇红。
一系列问题
我心想，肯定是配置出了问题，那个同事肯定没开ts的语法检测。
首先看到一个找不到引入错误
常见的找不到***模块，我看了看目录确实装了， ‘vue-router’然后当然是百度了， 折腾了一番，我觉得这个小问题有必要记录下来。 解决的方案就是 重启vocode, 安装完依赖之后居然要重启，好吧。
然后是路径问题
重启了之后，果然不红了，但是就像是打开了潘多拉魔盒，这个表面上的问题解决了，暴露出来更多实际的问题。
我心想，这个问题我熟啊，就是引入ts文件不要加后缀，原因个人猜测，应该是编译后就没有ts了，会找不到的，不写的话还能找到，当然框架可能处理这个问题，不然我这个项目怎么跑起来的。 很自信的删掉了.ts后缀，结果还是飘红，找不到路径。
我发觉事情没有我想象的那么简单，经过几番折腾，发现就是还需要配置 ts.config.json。虽然已经配置了vite.config.ts的路径别名
但是还需要配置ts.config.json，
最后，果然还是人的问题
再次吐槽，写ts，你不开ts语法检测，你写啥子ts。 也就是vite比较宽容，ts出错也没让这个项目编译不通过。 我可是经历过angular的语法检测的毒打的，有一点问题就不会让你过，就像初次使用eslint那样。 ts怎么学，就是在解决语法错误提示的过程学习的， 当然了，系统学习一下更好。
这里报错的原因很简单，就是
IDrawerObj这个接口上没有那个属性，我看了一下，就是拼写错误。开了语法检测就能改过来，很容易。
最后一点小问题
ref 看过官网介绍就知道，这是为原始值类型提供的，因为原始值类型无法使用捕获器，所以要包装为对象的属性，所以我们才需要访问它的value属性，才能访问到值。 这里居然就直接放一个空对象，这是什么意思。不知道reactive吗？
但是，看了下面的代码发现，他知道reactive,但是他不用。并且这个值后面实际上是个数组，所以find那里爆红了，ts推测它是个空对象。
这里，因为他赋值的时候，用的是直接
覆盖，所以他这个响应式对象还是生效的， 我不得不表示佩服。
最后
吐槽完毕，人家虽然多出爆红，但是项目仍然能跑。 为啥呢？因为ts最终要编译为js,符合js就能跑。果然大佬还是大佬。
不过，使用ts的目的就是为了语法提示啊，只要点一下属性方法都出来，很快啊。 如果说类型可能会变化就算了，不会变的，还是老老实实声明一下吧，后面用起来方便。
用ts,一定要开语法检测，它连拼写错误都能给你检测出来，你说好不好，更有一键修复功能，多方便啊。
