Typescript - "Cannot find name" errors in React components

Question

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!

Answer 1

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