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

TSX typecheck failed when component's props is an empty object #4051

Open
07akioni opened this issue Jul 2, 2021 · 6 comments · May be fixed by #7419
Open

TSX typecheck failed when component's props is an empty object #4051

07akioni opened this issue Jul 2, 2021 · 6 comments · May be fixed by #7419

Comments

@07akioni
Copy link
Contributor

07akioni commented Jul 2, 2021

Version

3.1.3

Reproduction link

https://github.com/07akioni/vue-tsx-bug

image

Steps to reproduce

Follow the link

What is expected?

No error

What is actually happening?

Error

07akioni added a commit to tusen-ai/naive-ui that referenced this issue Jul 2, 2021
@yyx990803
Copy link
Member

Is this a regression?

@yyx990803 yyx990803 added scope: types 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Jul 2, 2021
@07akioni
Copy link
Contributor Author

07akioni commented Jul 2, 2021

Is this a regression?

Yes. 3.0.10 works without error.

@yyx990803
Copy link
Member

/cc @pikax @johnsoncodehk would appreciate some insights into this

@pikax
Copy link
Member

pikax commented Jul 7, 2021

would appreciate some insights into this

Caused by #3656

I'll work on a fix.

@johnsoncodehk
Copy link
Member

johnsoncodehk commented Jul 7, 2021

Sorry about that. 🙈

Maybe combine [K in keyof O]?: unknown; and [K in OptionalKeys<O>]?: InferPropType<O[K]>; is works.

export declare type ExtractPropTypes<O> = O extends object ? {
    [K in RequiredKeys<O>]: InferPropType<O[K]>;
} & {
    [K in keyof O]?: InferPropType<O[K]>;
} : {
    [K in string]: any;
};

@jackhe16
Copy link

jackhe16 commented Aug 5, 2021

In fact, this problem has always existed, I was wondering if I can modify the code here as

- props: PropsOptions & ThisType<void>
+ props: PropsOptions

All the time, The type PropsOptions is deduced as Readonly<ComponentPropsOptions<Data>> related to here

This will cause a lot array properties in $props due to type ComponentPropsOptions

It can be verified by the following code:

// HelloWorld.tsx

import { defineComponent } from "vue";

export const HelloWorld = defineComponent({
  name: "HelloWorld",
  props: {},
  setup() {
    return () => {
      return (
        <div class="hello">
          <h1>hello</h1>
        </div>
      );
    };
  },
});

const helloWorld = new HelloWorld();
type Keys = keyof typeof helloWorld.$props;

// Before modified

// ("length" | "toString" | "toLocaleString" | "concat" | "join" | "slice" | "indexOf" | "lastIndexOf" | "every" | "some" | "forEach" | "map" | "filter" | "reduce" | "reduceRight" | "find" | "findIndex" | "entries" | "keys" | "values" | "includes" | "flatMap" | "flat" | DefaultKeys<readonly string[]> | ((() => IterableIterator<never>) & string) | ((() => string) & string) | ((() => string) & string) | ({
//   (...items: ConcatArray<never>[]): never[];
//   (...items: ConcatArray<never>[]): never[];
// } & string) | (((separator?: string | undefined) => string) & string) | (((start?: number | undefined, end?: number | undefined) => never[]) & string) | (((searchElement: never, fromIndex?: number | undefined) => number) & string) | (((searchElement: never, fromIndex?: number | undefined) => number) & string) | ({
//   <S extends never>(predicate: (value: never, index: number, array: readonly never[]) => value is S, thisArg?: any): this is readonly S[];
//   (predicate: (value: never, index: number, array: readonly never[]) => unknown, thisArg?: any): boolean;
// } & string) | (((predicate: (value: never, index: number, array: readonly never[]) => unknown, thisArg?: any) => boolean) & string) | (((callbackfn: (value: never, index: number, array: readonly never[]) => void, thisArg?: any) => void) & string) | ((<U>(callbackfn: (value: never, index: number, array: readonly never[]) => U, thisArg?: any) => U[]) & string) | ({
//   <S extends never>(predicate: (value: never, index: number, array: readonly never[]) => value is S, thisArg?: any): S[];
//   (predicate: (value: never, index: number, array ...


// After modified

// type Keys = keyof VNodeProps | keyof AllowedComponentProps

@yyx990803 yyx990803 added 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels May 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants