初玩儿vben-admin踩坑Vue3+TypeScript的setup模式纪实[持续更新]

文章背景

关键词注释：本模式(是指Vue3+TypeScript的setup模式)

开发软件：WebStorm 2020.3
Node.js版本：v16.14.2
Vue TypeScript 4.6.4
项目：参考网上的代码，想做一个打砖块的游戏。
每个人对模块、模型等的描述都不一样，我以下的内容都是在

<script lang="ts" setup>
...
</sctipt>

的代码块上操作的，随便你怎么称呼它吧。

TS2322: Type ‘Timer’ is not assignable to type ‘null’.

TypeScript是强类型语言，而setInterval和setTimeout的返回类型都是“NodeJS.Timeout”，所以不能像JavaScript一样混用数据类型。
直接给正确的计时器TypeScript写法：

timer_ball : NodeJS.Timer | null = null,   // 初始化定时器
timer_ball = setInterval(moveBall, 20)     // 开启定时器
clearInterval(Number(timer_ball))          // 清除定时器

TS6198: All destructured elements are unused.

TS6133: ‘***’ is declared but its value is never read.

TS6198和TS6133都是一个问题类型，都是初始化属性（方法）以后没有使用造成的。在“本模式”下，这些属性和方法已经被使用了，但是编辑器或者IDE(集成开发环境)不能正确的识别，而我们又不想看到满屏的错误，那就想办法解决掉它。
解决方法(1)如下：

1. 打开文件：tsconfig.json
2. 将检测未使用的参数（noUnusedLocals和noUnusedParameters）设置为false

"noUnusedLocals": false,
"noUnusedParameters": false,

搞定。

TS2339: Property ‘offsetWidth’ does not exist on type ‘Element | null’.

这个错误的原因是“document.querySelector”返回的数据类型是“HTMLElement | null”，而结构赋值时，返回的结果不能是“null”。
所以这块儿的正确写法是：

const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = <HTMLElement>document.querySelector('.ball')

未知 HTML 标记 *****

打开WebStorm 点击：设置->编辑器->检查
搜索“HTML”，找到“未知的HTML标签” 或 “未知HTML标签”，把后面的“√”去掉，点击确定即可解决。

未使用的 import { ***** } from ‘******’;

打开WebStorm 点击：设置->编辑器->检查
搜索“TypeScript导入”，找到“未使用的ES6 /TypeScript导入” ，把后面的“√”去掉，点击确定即可解决。