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(compiler-sfc): setup props type should not be optional when setup default value #4466

Merged
merged 4 commits into from
Sep 2, 2021

Conversation

webfansplz
Copy link
Member

fix #4455

@webfansplz webfansplz changed the title fix(compiler-sfc): props type should not be optional when setup default value fix(compiler-sfc): setup props type should not be optional when setup default value Aug 29, 2021
@ygj6
Copy link
Member

ygj6 commented Aug 30, 2021

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
Copy link
Member Author

webfansplz commented Aug 30, 2021

@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.

@webfansplz webfansplz closed this Aug 30, 2021
@LongJinCen
Copy link

LongJinCen commented Aug 30, 2021

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 webfansplz reopened this Aug 30, 2021
@webfansplz
Copy link
Member Author

@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
Copy link

LongJinCen commented Aug 30, 2021

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

@yyx990803 yyx990803 merged commit 8580796 into vuejs:master Sep 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

关于使用 compiler-sfc 编译 script setup ts 文件的问题
5 participants