usePage() not working on Typescript

[krzar]

I'm creating project in Laravel 8 + Vue 3 with Typescript and Inertia

I got this error all the time

TS2571: Object is of type 'unknown'.

on this code

console.log(usePage().props.value.auth.user);

There is my auth and user interface:

export interface UserInterface {
    id: number
    name: string
    email: string
}

export interface AuthInterface {
    user?: UserInterface
}

When I console.log without .user, everythink is fine.

There is my usePage function:

import {usePage as inertiaUsePage} from "@inertiajs/inertia-vue3";

export const usePage = () => {
    return inertiaUsePage<PageProps>();
}

export interface PageProps {
    auth: AuthInterface
}

[flick36]

See here: #757

[WalrusSoup]

I ran into this and ended up with this solution based on the above comment (@flick36). Hopefully it's correct, still learning the ropes for Inertia.

// InertiaPage.d.ts
import { PageProps } from "@inertiajs/inertia";

interface DashboardPageProps extends PageProps {
    community_leaders:  User[]
}
// more below depending on the page rendered

Then over in the dashboard:

const communityLeaders = usePage<DashboardPageProps>().props.value.community_leaders

[felipeva]

For react, I ended with something like this(for some reason, your example didn't work), specifically for props:

export interface PagePropsInterface extends Page<PagePropsInterface> {
  company: CompanyInterface;
}

then calling usePage hook:

const {company} = usePage<PagePropsInterface>().props;

[d8vjork]

Just declare this on top of your app (maybe your app.ts where Vue is initialised, dunno about React tho):

declare module "@inertiajs/inertia" {
  interface PageProps {
    auth: {
      user: Record<string | symbol, unknown> | null
    }
  }
}

// Then using it should show some autocompletion if properly configured in your IDE
usePage().props.value.auth.user?.name