antfu-collective / vitesse

🏕 Opinionated Vite + Vue Starter Template

Home Page:https://vitesse.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Component type checking does not work out of box

Bobakanoosh opened this issue · comments

Describe the bug/issue

After fresh cloning this template, the type checking for components does not work.

To reproduce:

  1. Clone project
  2. Install using pnpm
  3. Use Typescript Vue Plugin (Volar) and Vue Language Features (Volar)
  4. Add <Counter :initial="{ a: 5 }" /> to App.vue

Counter.vue has a prop initial of type number. Here I am passing an object, { a: 5}, but do not get any warning from the editor.

image
As seen in the above image, the editor still recognizes the types of the component.

I'm making this issue in this template because if I create a fresh vue project via pnpm create vue@latest, the type checking works.

After a lot of testing I've found that the html.d.ts is causing this issue:

declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

I assume this was added for UnoCSS attributify, but people using this template may not realize the side effects this can cause.

As vuejs/language-tools#1077 (comment) you can now remove html.d.ts safely.