How to strongly type inertia.js usePage Hook

usePage is hook to to access shared data on numerous pages But that Data it's not Type How to make it strongly typed this is normal javascript without type const { user,jetstream,errorBags } = usePage().props; how to tell type script that usePage().props contain those data

ShareInertiaData.php

class ShareInertiaData
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  callable  $next
     * @return \Illuminate\Http\Response
     */
    public function handle($request, $next)
    {
        Inertia::share(array_filter([
            'jetstream' => function () use ($request) {
                return [
                    'canCreateTeams' => $request->user() &&
                                        Jetstream::hasTeamFeatures() &&
                                        Gate::forUser($request->user())->check('create', Jetstream::newTeamModel()),
                    'canManageTwoFactorAuthentication' => Features::canManageTwoFactorAuthentication(),
                    'canUpdatePassword' => Features::enabled(Features::updatePasswords()),
                    'canUpdateProfileInformation' => Features::canUpdateProfileInformation(),
                    'flash' => $request->session()->get('flash', []),
                    'hasAccountDeletionFeatures' => Jetstream::hasAccountDeletionFeatures(),
                    'hasApiFeatures' => Jetstream::hasApiFeatures(),
                    'hasTeamFeatures' => Jetstream::hasTeamFeatures(),
                    'hasTermsAndPrivacyPolicyFeature' => Jetstream::hasTermsAndPrivacyPolicyFeature(),
                    'managesProfilePhotos' => Jetstream::managesProfilePhotos(),
                ];
            },
            'user' => function () use ($request) {
                if (! $request->user()) {
                    return;
                }

                if (Jetstream::hasTeamFeatures() && $request->user()) {
                    $request->user()->currentTeam;
                }

                return array_merge($request->user()->toArray(), array_filter([
                    'all_teams' => Jetstream::hasTeamFeatures() ? $request->user()->allTeams() : null,
                ]), [
                    'two_factor_enabled' => ! is_null($request->user()->two_factor_secret),
                ]);
            },
            'errorBags' => function () {
                return collect(optional(Session::get('errors'))->getBags() ?: [])->mapWithKeys(function ($bag, $key) {
                    return [$key => $bag->messages()];
                })->all();
            },
        ]));

        return $next($request);
    }
}

welcome.tsx

const Welcome = (props:React.FC) => {
    console.log(usePage().props);

    const { user } = usePage().props;


    return (

aymenoppa

5 years ago

Level 1

i remember a problem i had in java i created a new class that extend a not typed class , i added field to it then use it

aymenoppa

5 years ago

Level 1

After tries and Errors i fix it

import React from 'react';
import {InertiaLink, usePage} from '@inertiajs/inertia-react'
import {Page, PageProps} from "@inertiajs/inertia";

export interface propsInterface extends Page<PageProps> {
    props: {
        user: Function,
        canLogin: boolean,
        canRegister: boolean ,
        jetstream: {
            canCreateTeams:boolean,
            canManageTwoFactorAuthentication:boolean,
            canUpdatePassword:boolean,
            canUpdateProfileInformation:boolean,
            flash:Array<any>,
            hasAccountDeletionFeatures:boolean,
            hasApiFeatures:boolean,
            hasTeamFeatures:boolean,
            hasTermsAndPrivacyPolicyFeature:boolean,
            managesProfilePhotos:boolean,
        } ,
        laravelVersion: String,
        phpVersion: String,

    }
}

    const {user,canLogin,canRegister,jetstream} = usePage<propsInterface>().props;

4 likes

patrick_j

3 years ago

Level 1

Thanks @aymenoppa !

I ended doing this:

interia.d.ts

import type { Page, PageProps, Errors, ErrorBag } from '@inertiajs/inertia';

declare global {
    interface InteriaPage extends Page<PageProps> {
        props: {
            errors: Errors & ErrorBag;
            auth: {
                user: {
                    name: string;
                };
            };
            laravelVersion: string;
            phpVersion: string;
        };
    }
}

Hook in React components:

    const { auth } = usePage<InteriaPage>().props;

2 likes

erbelion

2 years ago

Level 1

this one worked for me:

declare module '@inertiajs/core' {
    interface PageProps extends Page<PageProps> {
        auth: {
            status: number | null
            user: {
                id: number
                name: string
            }
        }
        route: {
            name: string
        }
    }
}

JBinc10

2 years ago

Level 1

Adding this as I tried each example here and this is what worked for me on Laravel 10 for my react front end.

NPM package: @inertiajs/react - 1.0.13

import type { Page, PageProps, Errors, ErrorBag } from "@inertiajs/core";

declare global {
    interface InertiaProps extends Page<PageProps> {
        errors: Errors & ErrorBag;
        siteTitle: string;
        sidebarLinks: SidebarLinkProps[];
        [key: string]: any;
    }
}

I was getting a Typescript error when not including "[key: string]: any;"

Usage:

const { sidebarLinks } = usePage<InertiaProps>().props;

Please or to participate in this conversation.