core icon indicating copy to clipboard operation
core copied to clipboard

Cannot determine prop from mapped type

Open VividLemon opened this issue 4 months ago • 2 comments

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNqFVG1P2zAQ/iu3aJKZVKWk5bWUosGYtjEYArRNWqaRJdcScOzIdkpZyX/f2WnS0I3tg+3nfOd79d3ce53n/rRAb+ANdazS3IBGU+SjUKRZLpWBOSgcQwljJTNgJMoa1pHM8sW937WE1cT2QhGKWAptINMT2Lfv19g75FzCF6l48oK9CsWwW5kjQ0QYzHIeGSQKYOj0dgkPuy2G1/GMJr3jdOLfainI5bkVD72Y5FOO6lNuUrIbegNwHMuLyOz9B3dnVIGd+j6+wfjuL/e3embvQu9coUY1xdBreCZSEzQV+/jyDGeEG2Ymk4KT9D+YF6glL6yPldhhIRJyuyXnvH3vspuKyZU+nhkUug7KOmolSycfepRtm6rnQl+62/c33LtQlDaLDzlq32hKIM5cIe0NHCqM7nKZCkM1Yzpj8AgsS9zBJ+6Y8eqgM1RUOForT99GsZHqYfg54pRUOIsyBEoFikSDNoqCssrZiPa5fQ7w7QRS0TYeabh+Obcvy+poFDAGB3ACAziK8tREPP2Fw5NRef19AM6eVVjWjrVDO5JcH0Yaz4rsJypNxgOKo0erT2uD1qaNK3DR9dzed/uG2zebaFeVNgqrWB5XLdXXWzXYrsFODXZrEKw3KGhQr0Zsyznh4PYS7izh7hIG6y0ctHCviWQ1mgt573xv6nCuZG4z9WdtW4F3gMVEsZFVR1+rHgKr4wR4JCb79CXph7ZHy+lDZaYeL9UYkQKFubK/tD1M8oVD96m5eYPjqOBGryU4TgU6JcOFstHaq07VBNa1j5MBBK5fLHWatKnLrE195U+oWUOOpRwAo50mX/mf0ZWkUwcIai6Nm2KEu9X96jx7GmzVkk1unqnIIlWh53ddI4fe3ko9SRTVOIqxSW/dQM+oXHQiRXgwWHSpayXy8MeUqkyThRzr+5t+0PPK3w9MELQ=

Steps to reproduce

This is related to a previous issue I encountered https://github.com/vuejs/core/issues/10962

I'm not quite sure what makes this one different.

This is what my code was after trying:

import type {Numberish} from './CommonTypes'

export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
export type ColsBaseNumbers = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'

export type ColsNumbers =
  | ColsBaseNumbers
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | '6'
  | '7'
  | '8'
  | '9'
  | '10'
  | '11'
  | '12'

export type GutterNumbers = ColsBaseNumbers | 0 | '0'
export type ColsOrderNumbers = ColsBaseNumbers | 'first' | 'last'
export type ColsOffsetNumbers = ColsNumbers | 0 | '0'

type BreakpointFactory<
  Value,
  Name extends string = '',
  IsPartial extends boolean = true,
> = IsPartial extends true
  ? Partial<{
      [K in Breakpoint as `${Name}${Name extends '' ? K : Capitalize<K>}`]: Value
    }>
  : {
      [K in Breakpoint as `${Name}${Name extends '' ? K : Capitalize<K>}`]: Value
    }

export type OffsetBreakpointProps = BreakpointFactory<ColsOffsetNumbers, 'offset'>

export type OrderBreakpointProps = BreakpointFactory<ColsOrderNumbers, 'order'>

export type ColBreakpointProps = BreakpointFactory<boolean | ColsNumbers | 'auto'>

export type RowColsBreakpointProps = BreakpointFactory<ColsNumbers, 'cols'>

export type ContentColsBreakpointProps = Omit<
  BreakpointFactory<boolean | Numberish, 'contentCols'>,
  'contentColsXxl'
>

export type LabelAlignBreakpointProps = Omit<
  BreakpointFactory<string, 'labelAlign'>,
  'labelAlignXxl'
>

export type LabelColsBreakpointProps = Omit<
  BreakpointFactory<boolean | Numberish, 'labelCols'>,
  'labelColsXxl'
>

Numberish is number | string

export interface BFormRowProps extends RowColsBreakpointProps {}
const props = defineProps<BFormRowProps>()

What is expected?

This shouldn't throw an error. Types are correctly inferred, but doesn't work right. Plus it was saying "foo" in the reproduction was required, even though it was foo?: string

What is actually happening?

[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

1349|  }
1350|  
1351|  export interface BRowProps extends RowColsBreakpointProps {
   |                                     ^^^^^^^^^^^^^^^^^^^^^^
1352|    tag?: string
1353|    gutterX?: GutterNumbers

System Info

No response

Any additional comments?

No response

VividLemon avatar Oct 21 '24 21:10 VividLemon