Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-bc7ekd?file=vue-project%2Fsrc%2Fcomponents%2FButton.vue

Steps to reproduce

Vue's runtime-dom.d.ts ButtonHTMLAttributes interface is causing VS code to throw ts errors when defining a custom Button component with a bound disabled attribute.

Created a custom IButton interface as follows:

export interface IButton {
        label: string,
        icon?: string | null,
        iconAlign?: string | null,
        action?: string | null,
        loading?: string | null,
        disabled?: HTMLButtonElement["disabled"],
        type?: HTMLButtonElement["type"],
        precedence?: string,
    }

Template code:

<template>
    <button :disabled="loading || disabled" :type="type" :class="classes">
...

TS error appearing on :disabled attr binding:

Type 'string | boolean | undefined' is not assignable to type 'Booleanish | undefined'.
  Type 'string' is not assignable to type 'Booleanish | undefined'.ts(2322)
runtime-dom.d.ts(403, 5): The expected type comes from property 'disabled' which is declared here on type 'ButtonHTMLAttributes & ReservedProps & Record<string, unknown>'

When copying the Booleanish type as it's defined in the runtime-dom.d.ts file in our own project's global.d.ts:

type Booleanish = boolean | 'true' | 'false';

TS is seeing the 'true' & 'false' strings and still showing the error above as it's resolving the Booleanish defined type to bool, string or undefined. This isn't the case with Vue's ButtonHTMLAttributes as the Booleanish type isn't being resolved up the stack.

What is expected?

Export the Booleanish type in runtime-dom.d.ts.

What is actually happening?

Showing as problems in files in VS Code as a result.

System Info

No response

Any additional comments?

No response

Perhaps you can use ButtonHTMLAttributes['disabled'], which is exported in runtime-dom.d.ts.

Perhaps you can use ButtonHTMLAttributes['disabled'], which is exported in runtime-dom.d.ts.

Good spot - it was the loading prop on the IButton that has a broad 'string' type, narrowing that to HTMLButtonElement["disabled"] or explicitly as 'true' | 'false' | null worked!