[2.x] Declare global types for React PageProps (#405)

* declare types for page props * Also for JSX * missing import * fix TS2310 * include "skipLibCheck"
laravel · Sep 11, 2024 · 8f4176b · 8f4176b
1 parent 2bdef9f
commit 8f4176b
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 18 deletions.
diff --git a/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx b/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -3,10 +3,11 @@ import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
-import { Link } from '@inertiajs/react';
-import { User } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
+
+export default function Authenticated({ header, children }: PropsWithChildren<{ header?: ReactNode }>) {
+    const user = usePage().props.auth.user;
 
-export default function Authenticated({ user, header, children }: PropsWithChildren<{ user: User, header?: ReactNode }>) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
     return (

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Dashboard.tsx b/stubs/inertia-react-ts/resources/js/Pages/Dashboard.tsx
@@ -1,11 +1,9 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/react';
-import { PageProps } from '@/types';
 
-export default function Dashboard({ auth }: PageProps) {
+export default function Dashboard() {
     return (
         <AuthenticatedLayout
-            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
         >
             <Head title="Dashboard" />

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Profile/Edit.tsx b/stubs/inertia-react-ts/resources/js/Pages/Profile/Edit.tsx
@@ -5,10 +5,9 @@ import UpdateProfileInformationForm from './Partials/UpdateProfileInformationFor
 import { Head } from '@inertiajs/react';
 import { PageProps } from '@/types';
 
-export default function Edit({ auth, mustVerifyEmail, status }: PageProps<{ mustVerifyEmail: boolean, status?: string }>) {
+export default function Edit({ mustVerifyEmail, status }: PageProps<{ mustVerifyEmail: boolean, status?: string }>) {
     return (
         <AuthenticatedLayout
-            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>}
         >
             <Head title="Profile" />

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx b/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
@@ -5,10 +5,9 @@ import TextInput from '@/Components/TextInput';
 import { Link, useForm, usePage } from '@inertiajs/react';
 import { Transition } from '@headlessui/react';
 import { FormEventHandler } from 'react';
-import { PageProps } from '@/types';
 
 export default function UpdateProfileInformation({ mustVerifyEmail, status, className = '' }: { mustVerifyEmail: boolean, status?: string, className?: string }) {
-    const user = usePage<PageProps>().props.auth.user;
+    const user = usePage().props.auth.user;
 
     const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
         name: user.name,

diff --git a/stubs/inertia-react-ts/resources/js/ssr.tsx b/stubs/inertia-react-ts/resources/js/ssr.tsx
@@ -17,9 +17,7 @@ createServer((page) =>
             // @ts-expect-error
             global.route<RouteName> = (name, params, absolute) =>
                 route(name, params as any, absolute, {
-                    // @ts-expect-error
                     ...page.props.ziggy,
-                    // @ts-expect-error
                     location: new URL(page.props.ziggy.location),
                 });
 

diff --git a/stubs/inertia-react-ts/resources/js/types/global.d.ts b/stubs/inertia-react-ts/resources/js/types/global.d.ts
@@ -1,5 +1,7 @@
+import { PageProps as InertiaPageProps } from '@inertiajs/core';
 import { AxiosInstance } from 'axios';
 import { route as ziggyRoute } from 'ziggy-js';
+import { PageProps as AppPageProps } from './';
 
 declare global {
     interface Window {
@@ -8,3 +10,7 @@ declare global {
 
     var route: typeof ziggyRoute;
 }
+
+declare module '@inertiajs/core' {
+    interface PageProps extends InertiaPageProps, AppPageProps {}
+}
diff --git a/stubs/inertia-react-ts/tsconfig.json b/stubs/inertia-react-ts/tsconfig.json
@@ -9,6 +9,7 @@
         "target": "ESNext",
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
+        "skipLibCheck": true,
         "noEmit": true,
         "paths": {
             "@/*": ["./resources/js/*"],

diff --git a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -3,9 +3,11 @@ import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
-import { Link } from '@inertiajs/react';
+import { Link, usePage } from '@inertiajs/react';
+
+export default function Authenticated({ header, children }) {
+    const user = usePage().props.auth.user;
 
-export default function Authenticated({ user, header, children }) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
     return (

diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
@@ -1,10 +1,9 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/react';
 
-export default function Dashboard({ auth }) {
+export default function Dashboard() {
     return (
         <AuthenticatedLayout
-            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
         >
             <Head title="Dashboard" />

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
@@ -4,10 +4,9 @@ import UpdatePasswordForm from './Partials/UpdatePasswordForm';
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
 import { Head } from '@inertiajs/react';
 
-export default function Edit({ auth, mustVerifyEmail, status }) {
+export default function Edit({ mustVerifyEmail, status }) {
     return (
         <AuthenticatedLayout
-            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>}
         >
             <Head title="Profile" />