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

Question

[BayraevAli]

Выдает ошибку 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;

Comments

[WbICHA]

tsconfin.json
https://cdn.discordapp.com/attachments/97005112304...
https://cdn.discordapp.com/attachments/97005112304...

Ты серьёзно сделал аж 2 скриншота тсконфига, вместо того, чтобы его тупо сюда скопировать? И даже тут ты не смог их загрузить, как изображения?
Нет, ну за такое грех помогать.

[BayraevAli]

WbICHA, Так уж и быть, удовлетворю интерес.
1) скриншот сделал, потому-что тсконфиг был великоват, ограничение по количеству символов (позже просто урезал)
2) сами скриншоты банально сюда не заливались по непонятной мне причине, НО МОЯ БЕДА, забыл сделать вставку
Хотелось бы попросить не быть таким вредным, указал на проблему, ошибку - достаточно. Без этих "грех помогать". Вас никто не принуждает к помощи, иди мимо, если так не устраивает, не порть тред. Он может быть полезен многим людям.

Answer 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.

Comments

[BayraevAli]

Большое спасибо за помощь!
В package.json установлены следующие типы: "@types/axios", "@types/react", "@types/redux", "@types/react-redux", "@types/react-router-dom".

Правда, есть нюанс. Что со `"strict": true`, что без в tsconfig, видимо, необходимо в typings.d.ts путь к файлам писать не относительный. Т.е. либо сразу файл "MyComponent", либо путь, начинающийся с имени модуля или псевдонима модуля. В общем как я понял это название разработчик сам определяет. Т.е. если файл декларируемый лежит по пути "./components/Main/Main.jsx", то писать следует "NameOfModule/components/Main/Main.jsx"

Из этого вытекает следующее явление. При `"strict": true`, как я понял, приходится писать и в App.tsx условном путь с использованием названия модуля, при этом, оно должно совпадать с тем, что написано в typings.d.ts .
App.tsx

import Main from 'dont_care/components/Main/Main.jsx'; // выдает ошибку 
import Header from 'codebar/components/Header/Header.jsx';

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

Но проблема в том, что если даже правильно написать импорты App.tsx, то уже при компиляции пишет Could not find a declaration file for module './components/Main/Main.jsx'. 'c:/.../Codebar/codebar_frontend/src/components/Main/Main.jsx' implicitly has an 'any' type.

При отсутствии `"strict": true`, декларативный файл оставляем с названием модуля, а в App.tsx пишем относительный путь и все работает четко. Однако мне интересно, как заставить это работать с "strict":true ?

[Pacemaker76]

У тебя проблемы с tsconfig. Закомментируй свой старый и попробуй такой вариант:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Этот конфигурационный файл TypeScript настроен для использования модулей ES6 и импортов и экспортов в стиле ES6. Это позволяет использовать обычные импорты и экспорты, без необходимости дополнительного декларирования каждого модуля.

Также в конфиге установлено "allowSyntheticDefaultImports": true, что позволяет использовать импорты синтетических значения по умолчанию для модулей, которые не экспортируют значение по умолчанию. Все это упрощает работу с модулями и минимизирует количество дополнительных действий, которые нужно совершать для правильной настройки импортов.

Таким образом, можно использовать конфигурацию TypeScript без дополнительной декларации каждого модуля для импортов, и это поможет избегать проблем с импортами, если зависимости написаны в соответствии со стандартом ES6.

[Модератор]

Pacemaker76, Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.