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.

Sign up for GitHub

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

Jump to bottom

Restore Vue 3 usePage generic type #1394

Merged
merged 6 commits into from
Feb 2, 2023
Merged

Restore Vue 3 usePage generic type #1394

merged 6 commits into from
Feb 2, 2023

Conversation

jessarcher
Copy link
Member

When converting the adapters to TypeScript, I forgot to copy over the existing type definition for usePage which used a generic.

This PR attempts to restore this, however, I can't currently get it to build.

Fixes #1381

@jessarcher jessarcher mentioned this pull request Jan 17, 2023
Closed
@hailwood
Copy link
Contributor

@jessarcher just a note to please check the other adapters too.
I can confirm that the same issue applies to the react adapter.

@jessarcher
Copy link
Member Author

@jessarcher just a note to please check the other adapters too. I can confirm that the same issue applies to the react adapter.

Good call! Looks like #1396 beat me too it though :)

@reinink
Copy link
Member

reinink commented Jan 18, 2023 •
edited
Loading

@innocenzi Hey! We've got this particular issue fixed in #1396 for React, but we're struggling to know exactly how to do this in the Vue adapters. We're getting this error:

src/app.ts:119:3 - error TS2322: Type '{ component: string; props: { [x: string]: unknown; errors: Errors & ErrorBag; }; url: string; version: string; scrollRegions: { top: number; left: number; }[]; rememberedState: Record<string, unknown>; resolvedErrors: Errors; }' is not assignable to type 'Page<T>'.
  Types of property 'props' are incompatible.
    Type '{ [x: string]: unknown; errors: Errors & ErrorBag; }' is not assignable to type 'PageProps & T & { errors: Errors & ErrorBag; }'.
      Type '{ [x: string]: unknown; errors: Errors & ErrorBag; }' is not assignable to type 'T'.
        'T' could be instantiated with an arbitrary type which could be unrelated to '{ [x: string]: unknown; errors: Errors & ErrorBag; }'.

119   return page.value
      ~~~~~~~~~~~~~~~~~


Found 1 error in src/app.ts:119

Do you have any recommendations on how to fix this?

@innocenzi
Copy link
Contributor

@reinink Looks like the page variable is the culprit; it has a generic type of Page but the generics are not constrained. I think using const page = ref<Page<any>>() would fix it. But I also recommend constraining the generics of usePage:

// in Vue
export function usePage<T extends PageProps>(): Page<T> {
  return page.value
}

// and in core
export interface Page<SharedProps extends PageProps = PageProps> {
  // ...
}

@libero-developer
Copy link

Any news on this?

@jessarcher jessarcher marked this pull request as ready for review February 2, 2023 01:02
@jessarcher jessarcher merged commit 60b167c into master Feb 2, 2023
@jessarcher jessarcher deleted the usePage-types branch February 2, 2023 23:33
@jessarcher jessarcher mentioned this pull request Feb 2, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JustInToCoding JustInToCoding JustInToCoding approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

usePage types not inheriting @inertiajs/core Page type
6 participants
@jessarcher @hailwood @reinink @innocenzi @libero-developer @JustInToCoding