@BayraevAli

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

Выдает ошибку Could not find a declaration file for module '.../src/components/Main/Main.jsx' implicitly has an 'any' type.
и Could not find a declaration file for module '.../src/components/Header/Header.jsx' implicitly has an 'any' type.

Суть вот в чем, я недавно установил TS в своё React приложение. Подключил tsconfig.json. Переделал App.jsx в App.tsx , затем, чтобы подключать к нему компоненты .jsx, я добавил файлик который по идее должен был позволять это делать. Этот файлик называется typings.d.ts.

И да, я просто не хотел пока переделывать все компоненты в .tsx, но узнал, что можно как есть пока подключить.

Файлы:

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


tsconfin.json
{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es2016",
    "jsx": "preserve",                               
    /* Modules */
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    /* Type Checking */
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src",
    "src/typings.d.ts"
  ]
}


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

function App(): JSX.Element {
  return (
    <div className="App">
      <Header />
      <hr />
      <Main />
    </div>
  );
}

export default App;
  • Вопрос задан
  • 467 просмотров
Решения вопроса 1
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы