TypeScriptで「モジュールの宣言ファイルが見つからない」エラーの解決法

エラーの内容

TypeScriptプロジェクトで、.tsxファイルから.jsxファイルをインポートした際に以下のエラーが発生しました。

App.tsx

import './App.css'
import { Home } from './Home';

function App() {
return (
    <div>
        <Home />
    </div>
);
};
export default App

Home.jsx

export const Home = () => {
    return (
        <div>
            <h1>Homeページ</h1>
        </div>
    );
};

モジュール './Home' の宣言ファイルが見つかりませんでした。'/path/to/Home.jsx' は暗黙的に 'any' 型になります。ts(7016)

エラーの原因

TypeScriptファイル（.tsx）からJavaScriptファイル（.jsx）をインポートすると、型定義がないためTypeScriptが型を推論できません。
これにより「モジュール './Home' の宣言ファイルが見つかりませんでした」というエラーが発生していました。
.jsxファイルには型の情報が含まれていないため、TypeScriptはその内容を型チェックできません。
型情報がない場合、TypeScriptはany型として扱います。

解決法

App.tsxのHomeのインポート文も import { Home } から import Home に修正しました。

Home.jsxを Home.tsxにリネームし、TypeScriptの型を追加しました。

App.tsx

import './App.css'
import Home from './Home';

function App() {
return (
    <div>
        <Home />
    </div>
);
};

export default App

Home.tsx

import React from 'react'

 const Home: React.FC = () => { // TypeScriptの型を追加
    return (
        <div>
            <h1>Homeページ</h1>
        </div>
    );
};

export default Home

これで、TypeScriptがコンポーネントの型を正しく理解できるようになりました。