TypeScript and React issue

Question

Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:

import * as React from "react"; //red underline under "react"
import "./App.css";

import logo from "./logo.svg";

class App extends React.Component {
  render() {
    return <h1>Hello</h1>; //red underline under <h1> and </h1>
  }
}

export default App;

that way I just can't write any jsx code here, because it always appears the issue:

test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Can somebody please help me with this?

Answer 1

How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the @types packages along side React's dependencies, eliminating your problem.

Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).

Happy hacking!