这是参加一个简易音乐盒项目的过程记录。
这个音乐盒原先是由vue3.0写出来的，之后在此基础上升级为vue 3.0 + TS。严格来说，这个小项目里面只是使用了TS风格的代码，远远没有运用复杂的TS知识。
第零步 保存原项目中App.vue的副本：
因为等等启动脚手架后，原有的App.vue 文件会被更改为跳转到TypeScript原厂设置的默认页面，所以需要保留副本以减少不必要的工作量。
第一步 启动脚手架，装包、更换依赖：
在项目的命令行输入以下代码即可，当然要确认vue cli是否为3.x及以上。（本人不知进行了什么魔鬼操作，以致于环境变量里没有vue。好在有大佬从天而降帮忙解决了···）
vue add @vue/typescript
各种选项都是选yes就可以了：
之后来到package.js，确认devDependencies中是否有ts-loader，如果其中没有ts-loader，则需要安装ts-loader。
npm i -D ts-loader
第二步 修改升级后所产生的bug：
2.1 Parameter 'props' implicitly has an 'any' type
prop无法定义类型:
Parameter 'props' implicitly has an 'any' type.
为此，需要引入defineComponentimport { defineComponent } from 'vue',并在 export default处调用defineComponent。
2.2 Object is possibly 'undefined'
因为props可能为空，那么就没有isRun属性，依据TS的语法，就需要在可能没有的属性后面加感叹号了。
2.3 要给函数的参数声明类型
这个也是。
2.4 any范型
2.5 Property 'currentTime' does not exist on type 'never'
currentTime是html中audio标签的属性，所以我们要添加HTMLAudioElemnt范型,当然audio也可能为空，所以范型为<HTMLAudioElemnt | null>。
即 const audio = ref<HTMLAudioElement | null>(null)
