Hello, I'm Julia.

Setting the Right Typescript Version For Your Repo

#devtools #typescript

3 min read

I encountered an extremely annoying issue a couple of days ago which I hadn't come across before, but is probably not that uncommon an issue. I had to spend a bit of time puzzling over what was going on, so I'm writing this post as I'll probably encounter this again at some point in the future.

The series of steps I took that resulted in the error were:

  • Updated package.json by updating the version of Typescript I wanted to use. I went from 4.0.3 to 4.8.
  • Ran yarn to install new version.
  • I made a number of changes to other parts of the code base as I went on my merry way. I started noticing some strange bugs after a while however, but as I had made numerous changes, I wasn't exactly sure what was causing it.
  • My strong hypothesis was that it was due to a Typecript version mismatch that was causing a number of incompatibility issues with some other packages, so I decided to downgrade Typescript back to 4.0.3 by repeating the first 2 steps.
  • When restarting my program, I was still encountering the incompatibility errors.
  • I decided to delete all my node modules and reinstall all packages. I still saw the same errors - what gives? ๐Ÿค”

To diagnose the issue, I needed to double check that it was indeed Typescript that was the issue. To do so, I ran yarn tsc --version in my repo's root directory. This confirmed that Visual Studio Code was still running Typscript 4.8. I'm not sure why this was the case, but it seemed to be accessing a global version of Typescript rather than the repo specific version.

To fix this, I first uninstalled then reinstalled Typescript to be double sure I had the correct version in my node modules:

  • I ran yarn remove typescript.
  • Then yarn add typescript@4.0.3

Next, I needed to specifically set the Typescript version that Visual Studio Code was using. This was a bit fiddly to access so here's a screenshot. This is located on the footer bar, towards the right hand side.

Visual Studio Code footer - setting Typescript version

You'll need to click on the curly braces icon, and from there, set the specific version of Typescript you want. For ease of use in the future, you can also pin the version permanently in your footer bar.

Everything worked hunky dory after that, so success! ๐Ÿ™Œ๐Ÿป

Web Mentions

Tweet about this post and have it show up here!

ยฉ 2016-2023 Julia Tan ยท Powered by Next JS.