Skip to content

Broken style prop's type check on some UI component #5780

@abitwhy

Description

@abitwhy

Vue - Official extension or vue-tsc version

3.15

VSCode version

1.103.1

Vue version

3.5.22

TypeScript version

5.9.3

System Info

System:
  OS: Windows 11 10.0.26100
  CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  Memory: 1.93 GB / 13.87 GB
Binaries:
  Node: 22.17.1 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.22 - C:\Users\73649\AppData\Local\pnpm\yarn.CMD
  npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  pnpm: 9.3.0 - C:\Users\73649\AppData\Local\pnpm\pnpm.CMD
  Deno: 1.33.3 - C:\Users\73649\.deno\bin\deno.EXE
Browsers:
  Chrome: 142.0.7444.163
  Edge: Chromium (140.0.3485.54)
  Internet Explorer: 11.0.26100.1882

package.json dependencies

"dependencies": {
    "element-plus": "^2.11.8",
    "vue": "latest"
  },
"devDependencies": {
  "@vitejs/plugin-vue": "latest",
  "@vue/compiler-sfc": "latest",
  "typescript": "latest",
  "vite": "latest",
  "vite-plugin-inspect": "latest",
  "vite-plugin-vue-component-preview": "latest",
  "volar-service-prettyhtml": "latest",
  "vue-tsc": "latest"
}

Steps to reproduce

  1. Clone the repo volar-starter.
  2. Install element-plus and other dependencies.
  3. Replace the file App.vue with the following code:
<template>
 <ElTable style="display: block;"></ElTable>
</template>

<script lang="ts" setup>
import { ElTable } from 'element-plus'
</script>
  1. Ensure Vue (Official) v3.1.5 is enabled.
  2. See the following TypeScript error on the ElTable component:

Argument of type '{ style: string; }' is not assignable to parameter of type 'Partial<{ data: any[]; style: CSSProperties; tableLayout: "auto" | "fixed"; border: boolean; className: string; lazy: boolean; fit: boolean; scrollbarAlwaysOn: boolean; allowDragLastColumn: boolean; ... 11 more ...; preserveExpandedContent: boolean; }> & Omit<...> & Record<...>'.
Type '{ style: string; }' is not assignable to type 'Partial<{ data: any[]; style: CSSProperties; tableLayout: "auto" | "fixed"; border: boolean; className: string; lazy: boolean; fit: boolean; scrollbarAlwaysOn: boolean; allowDragLastColumn: boolean; ... 11 more ...; preserveExpandedContent: boolean; }>'.
Types of property 'style' are incompatible.
Type 'string' is not assignable to type 'CSSProperties'.ts-plugin(2345)

  1. Switch Vue (Official) to v3.1.4.
  2. See the TypeScript error above disappear.

What is expected?

No TypeScript error

What is actually happening?

A TypeScript error on the ElTable component

Link to minimal reproduction

https://stackblitz.com/~/github.com/johnsoncodehk/volar-starter

Any additional comments?

The reproduction above cannot reproduce the error (because the latest version of the Vue (Official) extension in the StackBlitz environment is only v2.0.7). You need to reproduce it in VSCode.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions