vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.8k stars 8.35k forks source link

TSX can't add custom props because of IntrinsicAttributes don't extends any interface. #12384

Open zhiyuanzmj opened 1 week ago

zhiyuanzmj commented 1 week ago

Vue version

vue3.5.10

Link to minimal reproduction

https://stackblitz.com/github/zhiyuanzmj/vue-jsx-reproduction?file=src%2FApp.tsx

Steps to reproduce

I want to custom props for every components. But In vue/jsx-runtime IntrinsicAttributes only extends ReservedProps. The ReservedProps is a type, not a interface. So i can't use declare module to extend custom props.

// jsx.d.ts
declare module 'vue' {
  interface HTMLAttributes {
    vPermission?: string
    vLoading?: boolean
  }
  // How can i customize the props of every components?
  interface ReservedProps {
    vPermission?: string
    vLoading?: boolean
  }
}

export {}

Just like react:

// jsx.d.ts
declare module 'react' {
  interface HTMLAttributes {
    vPermission?: string
  }
  interface Attributes {
    vPermission?: string
  }
}

export {}

What is expected?

How about add ComponentCustomProps to extends IntrinsicAttributes .

import type { ComponentCustomProps } from '@vue/runtime-dom'

declare global {
  namespace JSX {
    // ...
    export interface IntrinsicAttributes extends ComponentCustomProps {}
  }
}

What is actually happening?

I can't find any way to custom props.

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 94.11 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 9.12.3 - ~/Library/pnpm/pnpm
    bun: 1.0.13 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.2

Any additional comments?

No response