vscode 中 deno 插件将 vue 组件识别成布尔值的问题解决

[yubaoquan]

问题描述

Version: Deno 1.4.12

I followed How to use Vue with Deno to created a project. It runs well, but got error in editor. It says Type 'boolean' is not assignable to type 'RawRouteComponent | null | undefined'.deno-ts(2322)

Here's some code:
src/components/Dinosaur.vue:

<script>
import { store } from '../store.js';
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      store
    }
  }
})
</script>

<template>
  Name: {{ store.dinosaur.name }}
  <br />
  Description: {{ store.dinosaur.description }}
</template>

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomePage from "../components/HomePage.vue";
import Dinosaur from "../components/Dinosaur.vue";

const routes: Readonly<RouteRecordRaw[]> = [
  {
    path: "/",
    name: "Home",
    component: HomePage, // Type 'boolean' is not assignable to type 'RawRouteComponent | null | undefined'.deno-ts(2322)
  },
  {
    path: "/:dinosaur",
    name: "Dinosaur",
    component: Dinosaur, // Type 'boolean' is not assignable to type 'RawRouteComponent | null | undefined'.deno-ts(2322)
    props: true,
  },
];

const router = createRouter({
  history: createWebHistory("/"),
  routes,
});

export default router;

Same error also appears in main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/index.ts";

const app = createApp(App); // Argument of type 'boolean' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions, {}, any>'.deno-ts(2345)
app.use(router);
app.mount("#app");

App.vue

<template>
  <router-view />
</template>;

<script>
export default {
  name: 'App'
}
</script>

解决方案

在 .vscode/settings.json 中配置 deno.enablePaths, 只允许 deno 插件在 deno 相关代码开启代码检测即可. 例如, 我的工程中只有 api 文件夹下的文件使用了 deno 相关的 api

{
  "deno.enablePaths": [
    "api"
  ]
}