Cannot determine prop from mapped type

VividLemon commented 3 weeks ago

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 commented 3 weeks ago

System: OS: Windows 10 10.0.19045 CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz Memory: 4.22 GB / 15.39 GB Binaries: Node: 20.8.0 - ~\AppData\Local\fnm_multishells\2212_1729541288273\node.EXE npm: 10.1.0 - ~\AppData\Local\fnm_multishells\2212_1729541288273\npm.CMD pnpm: 9.5.0 - ~\AppData\Local\fnm_multishells\2212_1729541288273\pnpm.CMD bun: 1.0.29 - ~.bun\bin\bun.EXE Browsers: Edge: Chromium (127.0.2651.98) Internet Explorer: 11.0.19041.4355

edison1105 commented 3 weeks ago

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

This limitation has been resolved in 3.3. The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.

conditional types, are not supported see https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations

use /* @vue-ignore */ to prevent errors

export interface MyProps extends /* @vue-ignore */ RowColsBreakpointProps {
  foo?: string
}

vuejs / core