I am migrating my existing React code over to TypeScript and I am hitting a lot of issues, one of them being a lot of "Cannot find name" errors when I make my .js files .ts files.

Here is the code in question:

import React from 'react';

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

export default Footer;

The five lines from <footer> to </footer> are underlined in red and give me various errors, depending where I hover my mouse, such as:

• Cannot find name 'footer'.
• '>' expected
• Cannot find name 'div'
• Unterminated regular expression literal
• Operator '<' cannot be applied to types 'boolean' and 'RegExp'

Here is my tsconfig.json file:

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

I am incredibly confused and would greatly appreciate some help!