Skip to content

Wrong props parser with generics #9871

Closed
@tragid

Description

@tragid

Vue version

3.3.13

Link to minimal reproduction

https://github.com/tragid/vue-generics-error

Steps to reproduce

  1. 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;
  };
}
  1. Create 2 components, whose props extend IFormTextInput (first component) and IFormCheckboxInput (second component)

  2. 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)

Screenshot 2023-12-19 at 18 05 32 Screenshot 2023-12-19 at 18 04 49 Screenshot 2023-12-19 at 18 04 24 Screenshot 2023-12-19 at 18 04 09

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions