Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-core): return boolean type when use defineProps to set optional boolean prop #7116

Closed
wants to merge 9 commits into from
36 changes: 31 additions & 5 deletions packages/runtime-core/src/apiSetupHelpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,19 @@ export function defineProps<
PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions
>(props: PP): Readonly<ExtractPropTypes<PP>>
// overload 3: typed-based declaration
export function defineProps<TypeProps>(): Readonly<TypeProps>
// the Boolean absent props will be cast to false, so the return type
// must be a boolean type
export function defineProps<TypeProps>(): Readonly<
{
[K in keyof TypeProps as TypeProps[K] extends boolean | undefined
? K
: never]-?: TypeProps[K]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
: never]-?: TypeProps[K]
: never]-?: NotUndefined<TypeProps[K]>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without NotUndefined, the '-?' will still remove 'undefined'.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, it won't when there's only boolean | undefined and no ?:

interface T {
  boolAndUndefined: boolean | undefined
}

type Test = {
  [K in keyof T]-?: T[K]
}
// type Test = {
//     boolAndUndefined: boolean | undefined;
// }

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgCrIN4ChnIEYD2BANgIIgAmAqpRDKBBQFz5HERwjIA+yArrXohGWAL5YsYAJ4AHFKggBnMMgC8mHMgDaAaWShkAawhSCMNAF0AtAH4WqXRbFYgA

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, modified.

} & {
[K in keyof TypeProps as TypeProps[K] extends boolean | undefined
? never
: K]: TypeProps[K]
}
>
// implementation
export function defineProps() {
if (__DEV__) {
Expand Down Expand Up @@ -142,13 +154,27 @@ type InferDefault<P, T> = T extends
? T | ((props: P) => T)
: (props: P) => T

type PropsWithDefaults<Base, Defaults> = Base & {
[K in keyof Defaults]: K extends keyof Base
type PropsWithDefaults<Base, Defaults> = {
[K in keyof Base as K extends keyof Defaults
? Defaults[K] extends undefined
? never
: K
: K]: Base[K];
} & {
[K in keyof Base as K extends keyof Defaults
? Defaults[K] extends undefined
? K
: never
: never]?: Base[K] | undefined;
} & Readonly<{
[K in keyof Defaults as Defaults[K] extends undefined
? never
: K]: K extends keyof Base
? Defaults[K] extends undefined
? Base[K]
: NotUndefined<Base[K]>
: never
}
: never;
}>

/**
* Vue `<script setup>` compiler macro for providing props default values when
Expand Down
8 changes: 7 additions & 1 deletion test-dts/setupHelpers.test-d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,20 @@ describe('defineProps w/ type declaration', () => {
// type declaration
const props = defineProps<{
foo: string
bool?: boolean
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider this case

      boolAndUndefined: boolean | undefined

}>()
// explicitly declared type should be refined
expectType<string>(props.foo)
// the Boolean absent props will be cast to false
expectType<boolean>(props.bool)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This implementation will lead it cannot jump to the declaration by clicking bool of props.bool (props.foo also).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll create a new PR with another implementation.

// @ts-expect-error
props.bar
})

describe('defineProps w/ type declaration + withDefaults', () => {
const res = withDefaults(
defineProps<{
bool?: boolean
number?: number
arr?: string[]
obj?: { x: number }
Expand All @@ -33,6 +37,7 @@ describe('defineProps w/ type declaration + withDefaults', () => {
z?: string
}>(),
{
bool: undefined,
number: 123,
arr: () => [],
obj: () => ({ x: 123 }),
Expand All @@ -53,6 +58,7 @@ describe('defineProps w/ type declaration + withDefaults', () => {
// @ts-expect-error
res.y.slice()

expectType<boolean | undefined>(res.bool)
expectType<string | undefined>(res.x)
expectType<string | undefined>(res.y)
expectType<string>(res.z)
Expand All @@ -70,7 +76,7 @@ describe('defineProps w/ union type declaration + withDefaults', () => {
union1: 123,
union2: () => [123],
union3: () => ({ x: 123 }),
union4: () => 123,
union4: () => 123
}
)
})
Expand Down