When you install React JS with TypeScript using the command “npx create-react-app my-app –template typescript” and open the application using Visual Studio Code (VS Code), then the VS Code IDE may through the following errors.
When you open the “App.tsx” file, it will underline several lines of code with red squiggles and if you hover your mouse on the error, you may get the following error message
“Cannot use JSX unless the ‘–jsx’ flag is provided”
If you open your ‘tsconfig.json’, there you may get the following error message
“Argument for ‘–jsx’ option must be: ‘preserve’, ‘react-native’, ‘react'”
Solution for VS Code Errors that comes when you install TypeScript version of React JS
The error mostly because of the version of TypeScript selected by your VS Code IDE.
Restarting the VS Code IDE sometimes fixes the problem, if not, we need to explicitly select the version of TypeScript from VS Code.
How to Change TypeScript version in Visual Studio Code ?
Press Ctrl + Shift + P to open the status bar inside Visual Studio Code (or you can go to the View tab in the menu, and select the option Command Palette) . Then you will get a status bar that may look like this
Now you can type the command “typescript: select” and press enter which will give the list of available TypeScript versions which may look like this
Selecting the newer version of TypeScript ( in my case 4.3.5) fixed the issue for me. It may be a different version in your system, so choose the version that fixes the problem. If you want to change again, you can repeat the above steps to change it back or to another version of TypeScript.