fix(compiler-sfc): setup props type should not be optional when setup default value

[webfansplz]

fix #4455

[ygj6]

I tried the demo provided in #4455, and it still fails to compile after incorporating this PR.

ERROR in D:\workspace\vue-next\Vue3-TS-error\src\App.vue.ts
7:2-7
[tsl] ERROR in D:\workspace\vue-next\Vue3-TS-error\src\App.vue.ts(7,3)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { value: number; }, { expose }: SetupContext<EmitsOptions>) => { props: { value: number; }; test: (value: number) => void; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ....'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'value' is missing in type 'Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ... 1 more ... & { .....' but required in type '{ value: number; }'.
ts-loader-default_0c5a263502dc9404

ERROR in D:\workspace\vue-next\Vue3-TS-error\src\App.vue.ts
10:2-7
[tsl] ERROR in D:\workspace\vue-next\Vue3-TS-error\src\App.vue.ts10,3)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { value: number; }, { expose }: SetupContext<EmitsOptions>) => { props: { value: number; }; test: (value: number) => void; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ....'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'value' is missing in type 'Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ... 1 more ... & { .....' but required in type '{ value: number; }'.
ts-loader-default_0c5a263502dc9404

webpack 5.51.1 compiled with 2 errors in 3128 ms

[webfansplz]

@ygj6

Sry, I misunderstood the meaning of the issue.

The reason maybe is that the option type of defineComponent is not overloaded correctly after compiled.

[LongJinCen]

Did you run the demo ?。With the demo I wrote, I can confirm that the problem is that after I gave the default value, props was still optional, not required, that's the problem, so the problem fixed by the PR I think is the problem I encountered。 @webfansplz @ygj6

And my demo failed because of the following error, not the way @ygj6 described it

TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'

I updated the demo，add a build script that use the compiler-sfc to compile the App.vue without webpack，and you can see the compiled App-compiled.ts In the root directory of the project。It compiles as follows。

import { defineComponent as _defineComponent } from 'vue'
import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

interface Props {
  value?: number
}

export default _defineComponent({
  props: {
    value: { type: Number, required: false, default: 1 }
  } as unknown as undefined,
  setup(__props: {
    value?: number // problem is here, the value is still optional
  }) {
    const props = __props
    console.log(props.value);
    function test(value: number) {
      console.log(value);
    }
    // because value is still optional, props.value maybe undefined, so there will be an error
    test(props.value)
    return (_ctx: any,_cache: any) => {
      return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.value), 1 /* TEXT */))
    }
  }
})
})

[webfansplz]

@ygj6 @LongJinCen

i think there two problems after compiled:

1. props type still optional
2. the option type of defineComponent is not overloaded correctly

that‘s why still fails to compile after incorporating this PR.

[LongJinCen]

By the way, I have another problem, I want to make a prop to be required at runtime, So I'm write interface like this

interface Props {
  value: number
}

when npm run build , But it still failed, reporting an error

[tsl] ERROR in /Users/bytedance/code/webpack5-ts-vue3/src/App.vue.ts(7,3)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { value: number; }, { expose }: SetupContext<EmitsOptions>) => { props: { value: number; }; test: (value: number) => void; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ....'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'value' is missing in type 'Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ... 1 more ... & { .....' but required in type '{ value: number; }'.
ts-loader-default_0c5a263502dc9404

ERROR in /Users/bytedance/code/webpack5-ts-vue3/src/App.vue.ts
10:2-7
[tsl] ERROR in /Users/bytedance/code/webpack5-ts-vue3/src/App.vue.ts(10,3)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { value: number; }, { expose }: SetupContext<EmitsOptions>) => { props: { value: number; }; test: (value: number) => void; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ....'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'value' is missing in type 'Readonly<LooseRequired<(Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }) | ({ ...; } & ... 1 more ... & { .....' but required in type '{ value: number; }'.

The problem is similar， defineComponent is not overloaded correctly @ygj6