core
core copied to clipboard
Cannot determine prop from mapped type
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