问题
接手了一个前端项目,发现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版本:
选择vscode自带的最新版本就可以了。这个ts版本不会影响项目,仅仅用作编辑器中的代码提示、补全等等。
原因分析:Vue - Official 插件内部集成了ts-plugin来支持ts,这个ts-plugin会使用vscode中内置的typescript插件