While working on my latest unboxing article series for the latest release of the SharePoint Framework (SPFx), v1.20, I called out a few long-standing issues.
SharePoint Framework v1.20 - What's in the Latest Release
Learn what I found while picking apart the latest SharePoint Framework (SPFx) release, v1.20. There's not much in this release, but enough worth covering.
https://www.voitanos.io/blog/sharepoint-framework-v1-20-whats-in-latest-update-of-spfx/
One of the issues that gets under my skin is how slow the SPFx team is to adopt recent versions of important dependencies including React, Fluent UI React controls, and TypeScript.
As I researched the TypeScript one, I decided to see if it would be possible to upgrade SPFx project to use a more modern version of TypeScript - version 5. So far in my testing, it’s working for SPFx v1.19 & SPFx v1.20.
So, in this article, I want to show you how to upgrade your projects to use the latest major version of TypeScript.
A word of caution: Microsoft has not said TypeScript v5 is supported by the SPFx. In fact, both SPFx v1.19 & v1.20 still include TypeScript v4.7.4.
Exercise caution if you decide to upgrade your projects. However, this is a non-destructive change to your project. If you encounter issues, you can always roll back to a supported state.
Starting with the SPFx v1.8 release, Microsoft decoupled the version of TypeScript from the SPFx version. This was done using a separate package from the Rush team that allowed SPFx & it’s dependencies to use a different TypeScript version.
You can learn more how this works, and how to update your project to use different TypeScript versions from my article, Use Different Versions of TypeScript in SPFx projects.
Use Different Versions of TypeScript in SPFx projects
In this post, I explain what versions of TypeScript you can use and how to change which TypeScript compiler version in your SPFx project.
https://www.voitanos.io/blog/use-different-typescript-versions-in-sharepoint-framework-projects/
To use TypeScript v5, specifically v5.3, in your SPFx project, you’ll need to upgrade your version of ESLint, TypeScript, and the Rush Stack Compiler utility package.
Why upgrade TypeScript?
You might be wondering, if TypeScript v4.7 works, why upgrade?
It’s a fair question! For me, it boils down to two things:
Take advantage of new language features
Microsoft released TypeScript v5 on March 16, 2023… this release included a lot of new features and optimizations to the language:
This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuration, and made many other improvements.
There’s a lot in the TypeScript v5.0 release (and even more in subsequent releases)! Learn more from these release announcements:
Announcing TypeScript v5.0
Daniel Rosenwasser is the product manager of the TypeScript team. Learn what's new in TypeScript v5.0!
https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/
Announcing TypeScript v5.1
Daniel Rosenwasser is the product manager of the TypeScript team. Learn what's new in TypeScript v5.1!
https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/
Announcing TypeScript v5.2
Daniel Rosenwasser is the product manager of the TypeScript team. Learn what's new in TypeScript v5.2!
https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/
Announcing TypeScript v5.3
Daniel Rosenwasser is the product manager of the TypeScript team. Learn what's new in TypeScript v5.3!
https://devblogs.microsoft.com/typescript/announcing-typescript-5-3/
New language features is an obvious benefit, but that’s not what motivated me to upgrade.
Better support for developer tools
When you want to use non-standard development tools in your SPFx project, like testing tools, it can be quite challenging to get the right matrix of matching or supported versions. For example, let’s say you want to add automated testing to your SPFx project using the popular library Jest.
Jest expects the target project to be JavaScript, not TypeScript. To get it to work with TypeScript, you install an adapter and configure Jest to run all code through the adapter before Jest executes the test suite.
But you must use a adapter who’s version matches the Jest version. OK… makes sense… what’s so hard?
Well, the adapters only support specific versions of TypeScript. So, you first have to find the version of the adapter that works with the version of TypeScript you’re using in your SPFx project. That version of the adapter will dictate what version of Jest you can use.
For me, the latest version of the mocking suite I use doesn’t support TypeScript versions lower than v5. So… at the time of writing this article, I can’t use it with any version of SPFx
… until I wrote this article!
Let’s see how to upgrade your SPFx v1.19 or SPFx v1.20 project to TypeScript v5.3!
Uninstall existing packages
First, uninstall the existing Rush Stack Compiler package as each one only works with a specific version of SPFx:
npm uninstall @microsoft/rush-stack-compiler-4.7 -DE
Upgrade and install new packages
Next, upgrade the versions of ESLint and TypeScript:
npm install [email protected] -DE
npm install [email protected] -DE
Finally, install the Rush Stack Compiler package for TypeScript v5.3:
npm install @microsoft/[email protected] -DE