Typescript - Reactコンポーネントで "Cannot find name "エラー

質問

私は既存のReactのコードをTypeScriptに移行しているのですが、多くの問題にぶつかっています。 .js ファイル .ts ファイルです。

以下は問題のコードです。

import React from 'react';

const Footer = ({ children, inModal }) => (
    <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

の5行は <footer> から </footer> は赤い下線が引かれていて、マウスを置いた場所によって、次のような様々なエラーが出ます。

• 名前 'footer' を見つけることができません。
• '>' が予想されます。
• 名前 'div' が見つかりません。
• 正規表現リテラルが終了していません
• 演算子 '<' は 'boolean' および 'RegExp' 型には適用できません。

以下は、私の tsconfig.json ファイルです。

{
    "compilerOptions": {
        "outDir": "./dist/", // path to output directory
        "sourceMap": true, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es6",
            "dom"
        ],
        "types": [
            "node"
        ]
    },
    "include": [
        "./src/"
    ]
}

私は信じられないほど混乱しています、そして、いくつかの助けを非常に感謝します

どのように解決するのですか？

Typescript は、Typescript ファイルに JSX があることを期待していないのです。これを解決する最も簡単な方法は、ファイル名を .ts から .tsx .

Typescript ドキュメントにおける JSX