• Как использовать добавленный typescript в React, не изменяя расширение каждого компонента на tsx?

    @Pacemaker76
    А можешь скинуть свой package.json? Что-то мне кажется, что у тебя типы не подгружены

    Также в tsconfig.json убери "skipLibCheck": true, так как он отключает проверку файлов объявлений типов, что не позволяет TypeScript правильно определять типы в ваших компонентах.

    Проблема заключается в том, что вы пытаетесь подключить модули .jsx в файле .tsx, и TypeScript не может найти соответствующие файлы декларации для этих модулей. Вы создали файл typings.d.ts, чтобы попытаться решить эту проблему, но указали неправильное имя модуля.

    Вам следует изменить файл typings.d.ts следующим образом:

    declare module './components/Header/Header.jsx' {
    import { FC } from 'react';
    const Header: FC;
    export default Header;
    }

    declare module './components/Main/Main.jsx' {
    import { FC } from 'react';
    const Main: FC;
    export default Main;
    }
    В этом случае корректно указаны модули для файлов компонентов: Header.jsx и Main.jsx. Обратите внимание на добавление расширения .jsx в имена модулей.

    Теперь в вашем файле App.tsx подключение модулей .jsx должно проходить без ошибок:

    import './App.css';
    import Main from './components/Main/Main.jsx';
    import Header from './components/Header/Header.jsx';
    import React from 'react';

    function App(): JSX.Element {
    return (
    < className="App">




    );
    }

    export default App;
    Убедитесь, что имя каждого модуля в вашем файле typings.d.ts соответствует имени модуля, указанному при импорте в App.tsx.
    Ответ написан
    3 комментария