Laravel по-русски

DzonyBB +7

Сообщений: 138

Laravel 12 React TypeScript StarterKits Default Layout

Привет всем собственно вопрос в заголовке . Решил испробовать эту связку , но столкнулся с проблемой несовпадения типов. Использую PHP Storm . Методом проб и ошибок добился что осталась одна ошибка в строке

 page.then((module:ComponentProps<any>)

ругается на <any> . А так код рабочий , и все работает . Но все равно смущает красная строка . Может ли кто нибудь поделиться своими соображениями и подправить мой код . Заранее спасибо . Вот весь мой код .
P.S Пробовал через Copilot , но с каждым разом количество ошибок увеличивалось и достигло почти 70. ))
    И в результате он завис. )) 

import '../css/app.css';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { initializeTheme } from './hooks/use-appearance';
import { ComponentProps,ReactNode} from 'react';
import Layout from './layouts/app/app';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({

    title: (title) => `${title} - ${appName}`,

    // resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),

    resolve: (name) => {

        const page = resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx'));
        page.then((module:ComponentProps<any>) => {
            module.default.layout = module.default.layout || ((page:ReactNode) => <Layout children={page} />);
        });
        return page;
    },

    setup({ el, App, props }) {
        const root = createRoot(el);

        setTimeout(() => {
            delete el.dataset.page;
        });

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

// This will set light / dark mode on load...
initializeTheme();

Изменено DzonyBB (08.03.2025 13:53:07)

dora88flora +1

Сообщений: 1

Re: Laravel 12 React TypeScript StarterKits Default Layout

The any type, while it makes the error disappear, isn't ideal for type safety. The core of the problem is that TypeScript doesn't inherently know the structure of the module resolved by resolvePageComponent, particularly that it will have a default export which is a React component and might have a layout property.

To fix this, you should define a specific interface for your Inertia page components, let's call it InertiaPageComponent. This interface would extend ComponentType<any> (a better type for React components than ComponentProps) and include an optional layout property. Then, explicitly tell TypeScript that resolvePageComponent will return a Promise that resolves to an object with a default export of type InertiaPageComponent. This way, you provide the necessary type information, allowing PhpStorm to understand the module's structure and eliminate the red line while maintaining type safety.

---

free cat translator app