gulp serve shows [tsc] typescript version: 3.3.4000 while package.json has "typescript": "^4.0.3"

Question

I have installed jest and testing-creat-library in my react app, but when I do a gulp build, I get the following errors:

[14:11:27] Error - [tsc] node_modules/@testing-library/dom/node_modules/pretty-format/build/index.d.ts(7,13): error TS1005: '=' expected.
[14:11:27] Error - [tsc] node_modules/@testing-library/dom/node_modules/pretty-format/build/index.d.ts(7,18): error TS1005: ';' expected.
[14:11:27] Error - [tsc] node_modules/@testing-library/dom/node_modules/pretty-format/build/index.d.ts(7,31): error TS1005: ';' expected.
[14:11:27] Error - [tsc] node_modules/@testing-library/dom/node_modules/pretty-format/build/index.d.ts(7,36): error TS1005: ';' expected.
[14:11:27] Error - 'tsc' sub task errored after 3.57 s

Following this github issue page, I upgraded my typescript from 3.8.3 to 4.0.3. It still did not solve my issue.

But when I run gulp build, I see the following: [tsc] typescript version: 3.3.4000 Why it is still referencing to an older version, while in package.json I have specified a higher version?

How can I solve the error above?

---

package.json

 "dependencies": {
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@microsoft/sp-property-pane": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.4",
    "@types/jest": "^26.0.14",
    "@types/node": "^14.11.8",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.5.2",
    "jest-junit": "^12.0.0",
    "office-ui-fabric-react": "6.214.0",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "react-test-renderer": "^16.13.1",
    "ts-jest": "^26.4.1",
    "typescript": "^4.0.3"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@types/chai": "3.4.34",
    "@types/es6-promise": "0.0.33",
    "@types/mocha": "2.2.38",
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.3",
    "@types/webpack-env": "1.13.1",
    "ajv": "^5.2.2",
    "gulp": "^3.9.1"
  }

Answer 1

If you want SPFx to use a different version of TypeScript you need to change your @microsoft/rush-stack-compiler-3.3 dependency. You can pick a TypeScript version you want here.

After installing the new @microsoft/rusk-stack-compiler you'll have to change it at the top of your tsconfig.json.