vue3 template中方法和属性显示any,并且无法跳转

137 阅读1分钟

问题

接手了一个前端项目,发现vue文件中,template里的方法无法进行跳转,类似下面这样的代码:

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    nn: {
      type: Number,
      defafule: 1
    }
  },
  data() {
    return {
      msg: "1"
    };
  },
  methods: {
    handle() {}
  }
});
</script>

<template>
  <div>
    <el-button type="primary" @click="handle" size="default">{{ msg }}</el-button>
  </div>
</template>

鼠标放到handle方法上,会显示any。这种问题多半跟ts有关,我检查了tsconfig.json的配置,也是没什么问题的。

于是我新建了一个测试项目,npm i 安装了 同版本的 vue,然后进行测试,发现居然是正常的!所以问题出在这个项目上!

后面我又在测试项目中安装了和项目同版本的 typescript@4.5.5,复现了这个问题!

解决方法

方案1:升级项目的ts版本

方案2:方案1可能会有一些历史遗留问题。可以在编辑器右下角选择编辑器使用的ts版本:

image.png 选择vscode自带的最新版本就可以了。这个ts版本不会影响项目,仅仅用作编辑器中的代码提示、补全等等。

原因分析:Vue - Official 插件内部集成了ts-plugin来支持ts,这个ts-plugin会使用vscode中内置的typescript插件