Vue3+TypeScript项目使用vue-property-decorator出现TS6133未使用变量报错

• 你使用的vue-property-decorator存在适配性问题：该库的v8及更早版本仅支持Vue2，v9+虽提供Vue3支持但已经停止维护，编译时和Vue3的单文件组件编译逻辑存在兼容问题。
• 报错中的$props、$setup、$data、$options都是vue-loader编译单文件组件时，自动注入到生成的中间TS代码里的内置变量，你的TypeScript配置开启了noUnusedLocals: true校验规则，就会识别到这些未被手动使用的变量，抛出TS6133错误。
• 你的代码存在明显的导入错误：导入装饰器时你将Prop重命名为了VueProperty，但实际使用的装饰器是@Prop，等于未正确导入Prop装饰器，也会加剧类型推导异常。

方案1：更换适配Vue3的类组件装饰器（推荐） #

目前Vue3生态下稳定维护的类组件装饰器方案是vue-facing-decorator，替换停止维护的vue-property-decorator即可从根源解决兼容问题，用法和vue-property-decorator基本一致：

1. 卸载旧库：npm uninstall vue-property-decorator
2. 安装新库：npm install vue-facing-decorator
3. 修改组件导入和写法：

import { Options, Vue, Prop } from "vue-facing-decorator";

@Options ({})
export default class OverflowSafeSingleLineLabel extends Vue {
  @Prop({ type: String, default: "div" })
  protected readonly rootElementTag!: string;
}

方案2：临时关闭对应校验（不推荐） #

如果暂时不想更换依赖，可以在tsconfig.json的compilerOptions中关闭未使用变量校验：

{
  "compilerOptions": {
    "noUnusedLocals": false
  }
}

如果不想全局关闭该规则，也可以在vue-loader的配置中，给编译生成的TS文件自动添加// @ts-nocheck注释跳过校验。

方案3：修正现有代码的导入错误 #

先把你的导入逻辑修正，部分场景下也可以缓解报错：

// 修正前
import { Options, Vue, Prop as VueProperty } from "vue-property-decorator";
// 修正后
import { Options, Vue, Prop } from "vue-property-decorator";

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD