Typescript version in VScode - reactjs

Question

I have a CRA app in VSCode.
My global TS version is:
My project TS version is (package.json):
VSCode uses the latest:
Now, when I try to add a 4.0 TS feature, the terminal shows a compilation error:
I tried to change the package.json TS version to latest and ran npm install but it didn't help.
My Questions are:
Why doesn't it compile?
Which TS version is used for PROBLEMS pane and which for terminal? I would expect the same error in both locations.
Thanks in advance!

Answer 1

When you run tsc -v in the terminal, you are calling a globally installed Typescript package which is showing you have version 4.8.4 installed.
You can verify this by running npm list -g --depth 0 which will list all the global packages you have installed, along with their versions.
However, when using npm scripts (e.g in CRA npm run build) the Typescript package inside your node_modules folder is called. Since this version of Typescript is 3.x the compilation will fail. By changing VSCode to use the workspace version, the same error will be shown.
Upgrading the version inside your package.json to the latest should fix this error. To be sure the correct version is being used, try using an npm script to list the version by including this vers script in your package.json
"scripts": {
"...": "your other scripts",
"vers": "tsc -v"
}
then run npm run vers in your terminal.
TLDR:
Q1.
The Typescript version used when running the CRA build script (3.x)
is targeted which will fail when using 4.x syntax.
Q2.
The problems pane in VSCode uses the VSCode Typescript version
(depends how up to date your VSCode is) unless manually switched to
use the workspace version (node_modules version).
The terminal will target your globally installed version.
NPM scripts will target the version inside your node_modules folder.