How to upgrade typescript version in a SPFX solution

Why do we need to upgrade typescript version in a SPFX solution?

As part of SPFX development we try to install 3^rd party libraries, there is a possibility that we might face type errors. For example, if we try to install ANTD package as part of your solution and use one of its components and try to build the solution. You might be seeing the type errors (TS1005,TS1109) as shown below.

Typescript errors

How to find out the typescript version?

When you build (Gulp build) the SPFX solution you will be able to find out the typescript version from the build log as shown below. 

Steps for updating the Typescript version.

In SPFX solution typescript version has dependency on the @Microsoft/rush-stack-compiler package version.  In the package.json if you have @microsoft/rush-stack-compiler-2.7 then the typescript version is 2.7.x. 

1.  In the SPFX solution deleted the node_modules folder. It will remove all the packages that are installed. 
2. On the package.json under the dev dependencies remove the @microsoft/rush-stack-compiler-2.7 entry and update it with @microsoft/rush-stack-compiler-3.3 with version 0.1.7.

           

      3.   Open the tsconfig.json file and update the extends attribute with the latest rush stack compiler version. 

            

             4.  Do a npm install to install all the packages. 

     Now when you try to do a gulp build you will be able to see that the typescript version is updated to 3.3 version. 

     Reference:- https://sympmarc.com/2019/03/15/common-issues-in-spfx-1-8-0-with-typescript-3-3/