在react组件中出现typescript-“找不到名称”错误

我把我现有的反应代码移植到TypeScript身上,我碰到了很多问题,其中一个是我做的时候很多“找不到名字”的错误。 .js 文件夹 .ts 文件夹。

以下是相关代码:

import React from 'react';

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

export default Footer;

五行 <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/"
    ]
}

我非常困惑,非常感谢您的帮助!