Typescript - "Cannot find name" errors in React components

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 }) => (
    
        
            {children}
        
    
);

export default Footer;

The five lines from ` to 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 '

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!

Typescript isn't expecting to see JSX in your Typescript file. The easiest way to resolve this is to rename your file from .ts to .tsx.

JSX in Typescript Documentation

Stack Overflow Q#51158080, score: 389