Closed
Description
Vue version
3.3.13
Link to minimal reproduction
https://github.com/tragid/vue-generics-error
Steps to reproduce
- Create some base props type with generic. And 2 prop types extending that type with proper generic
export interface IBaseFormInput<T> {
label?: string;
required?: boolean;
readonly?: boolean;
disabled?: boolean;
description?: string;
value?: T;
}
export interface IFormTextInput
extends IBaseFormInput<string>,
IBaseFormInputWithPlaceholder,
IBaseFormInputWithAutocomplete {
}
export interface IFormCheckboxInput
extends IBaseFormInput<boolean>,
IBaseFormInputWithAutocomplete {
confirm?: {
header?: string;
message?: string;
accept: string;
reject?: string;
};
}
-
Create 2 components, whose props extend IFormTextInput (first component) and IFormCheckboxInput (second component)
-
Render that components in app with provided generic prop (value in example)
What is expected?
Components are rendered without errors
What is actually happening?
Components are rendered with errors.
Sometimes first component (textInput) renders wrong default value (passed empty string - but renders true). Console says it has boolean true as input prop.
Sometimes first component renders correctly, but second component (checkbox) renders with warnings, saying Boolean is passed as prop, but String is expected (but generic is boolean)




System Info
System:
OS: macOS 14.1.2
CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
Memory: 168.85 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
Browsers:
Chrome: 120.0.6099.109
Safari: 17.1.2
Safari Technology Preview: 17.4
npmPackages:
vue: ^3.3.13 => 3.3.13
Any additional comments?
Version 3.3.9 works as expected