Problem with using TypeScript in Vite React App

Question

I am familiar with React and I decided I will also learn how TypeScript is written so I can use React + Typescript together.

I created latest Vite React app but I have lot of problems with imports, I was trying searching it with google but couldn't find any really good answers.

Example:

import React, { JSX } from "react";
import TodoList from "./components/TodoList";

function App(): JSX.Element {
    const todos = [{id: 1, text: "Finish the course"}]
    return (
        <div>
            <h1>Hello world</h1>
            <TodoList items={todos}/>
        </div>
  )
}

export default App

On this simple code I get those errors:

• Type 'Element' is missing the following properties from type 'ReactElement ': type, props, key
• Property 'h1' does not exist on type 'JSX.IntrinsicElements'.

When I googled those errors all I found was to write in capital letters, but that couldn't work with HTML/JSX. I also tried : React.FN but taht also don't work.

Answer 1

I found out what was the main problem.

1. It was that my IDE (WebStorm) was reading typescript module from another project (it was not the same version).

2. Also second thing is that React.FC is not working the same as the tutorial I watched. Also JSX.Element is depreceted.

So I used React.ReactElement and now it is working. Thanks to: Stack Overflow Question/Answer