What TypeScript version is Visual Studio Code using? How to update it?
Asked Answered
I

9

220

How can I tell what version of TypeScript is being used in Visual Studio Code? In particular, I had been using TypeScript 1.8.10 and VSCode 1.4.0. I first updated VSCode to the latest version, which was 1.5.3. But checking from the command line, I saw that my TypeScript version was still 1.8.10. So I updated TypeScript from the command line, and it is now 2.0.3 .

Is there a way to tell for sure whether Visual Studio Code is using version 2.0.3?

Is there a method for updating Visual Studio Code that will automatically update TypeScript to the latest released version, or does the TypeScript update have to be done independently?

Ironstone answered 23/9, 2016 at 20:5 Comment(5)
tsc --version ??Gasholder
I believe its a project file setting. If you open the project file (like a .csproj file) with notepad you can remove the typescript version element which should force the project to use the latest version installed on the PC.Lentil
@Gasholder Nope, that just shows you the global TSC version.Prescriptible
yarn version of typescript compiler: yarn tsc --version, for vscode TypeScript version you can see updates/changelog - e.g. code.visualstudio.com/updates/v1_66 says for example "VS Code now bundles TypeScript 4.6.3."Hurtle
related question: How do I force Visual Studio Code to always use my workspace's version of TypeScript for all projects?Uther
P
342

Can TypeScript be updated automatically?

VS Code ships with a recent stable version of TypeScript.

– from VS Code docs

This means there's no way to automatically upgrade the TypeScript version used by VS Code. You can however override the TypeScript version VS Code uses by modifying either the user settings or the workspace settings.


What TypeScript version is VS Code using?

When you open a TypeScript file, VS Code should display the TypeScript version in the status bar at the bottom right of the screen:

VS Code status bar TypeScript version

In newer versions (or when the status bar is crowded?) you may have to hover the mouse over the {} next to TypeScript to see a pop-up with the information:

VS Code status bar TypeScript version shown on hover

Changing the global TypeScript version

  1. Install the desired TypeScript version globally, for example npm install -g [email protected]
  2. Open VS Code User Settings (F1 > Open User Settings)
  3. Update/Insert "typescript.tsdk": "{GLOBAL_NPM_PATH}/typescript/lib"

Tip: You can find out {GLOBAL_NPM_PATH} by running npm root -g.

Now all of the projects you open with VS Code will use this TypeScript version, unless of course there is a workspace setting that overrides this.


Changing the local TypeScript version

  1. Open the project in VS Code

  2. Install the desired TypeScript version locally, for example npm install --save-dev [email protected]

    The --save-dev will update your project's package.json, adding the TypeScript version you installed as a devDependency.

  3. Open VS Code Workspace Settings (F1 > Open Workspace Settings)

  4. Update/Insert "typescript.tsdk": "./node_modules/typescript/lib"

    Now only the project you installed this TypeScript version in will use that TypeScript version, the global installation will be ignored by VS Code in this project.

  5. Having added the typescript.tsdk entry it's then also necessary to use the VS Code UI to select the new version:

    • Click on the version displayed in the VS Code footer:

      vs code footer

    • Select it in the UI:

      select ts version in UI


See also:

Prescriptible answered 24/9, 2016 at 12:41 Comment(8)
FYI I'm on Windows, I had to put the full path to my global node modules folder -- C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib. You can double check yours with npm root -g in the command line. Otherwise, this should probably be marked as the answer @Richard FuhrCandidate
Adding this setting caused visual studio code to completely disable all typescript language features. This is not the answer you are looking for.Heirdom
@Heirdom This won't disable anything. Check for typos in the tsdk path and make sure TypeScript is installed in your repo. Also, 11 other people found this correct enough to upvote ;-)Prescriptible
VS Code now seems to be getting TypeScript version updates automatically, so the answer here may no longer be current.Biathlon
This setting can be applied to a workspace setting instead so that a project that is specifically targeting a specific version it can be configured to stay that way. Also, NOTE you cannot target the MSI installed versions they are not compatible. See the site: code.visualstudio.com/docs/typescript/typescript-compilingCandicandia
If you are missing the bottom status bar as I was, you can enable it under View -> Appearance -> Show Status BarGravy
I only have "Type Script" in the bottom bar, if I hover, it only says "Select Language Mode" and if I click it that's what opens. No version nowhere. (Linux/Ubuntu)Hurtle
FYI: VsCode must be opened in the folder with the tsconfig? packages.json? file to allow "choose workspace version".Augustusaugy
K
37

Visual Studio Code comes with its own stable version of TypeScript but you can switch to a newer version as described in their docs

VS Code ships with a recent stable version of TypeScript. If you want to use a newer version of TypeScript, you can define the typescript.tsdk setting (File > Preferences > User/Workspace Settings) pointing to a directory containing the TypeScript tsserver.js file.
...
For example:

{
   "typescript.tsdk": "node_modules/typescript/lib"
}
Keithakeithley answered 24/9, 2016 at 12:29 Comment(4)
My tsc --version is 2.0.3 but can not find tsserver.js file on my Mac so can not change setting in VSCodeIronstone
Adding this setting caused visual studio code to completely disable all typescript language features. This is not the answer you are looking for.Heirdom
I think this is described more clearly here gist.github.com/tonysneed/bb6d442103a057578a9498f106e45ac5Phyllode
i do not see typescript.tsdk option in v1.55.2Doreendorelia
S
23

Is there a way to tell for sure whether Visual Studio Code is using version 2.0.3?

Open up a TypeScript file in Visual Studio Code and in the bottom right you will see the version of TypeScript it's using:

enter image description here

Is there a method for updating Visual Studio Code that will automatically update TypeScript to the latest released version, or does the TypeScript update have to be done independently?

The way I've been doing it is to explicitly tell Visual Studio Code the folder where your TypeScript npm module is installed. I'm on Windows, so after you run the npm command to install TypeScript (npm install -g typescript) it will install it in this folder:

C:\Users\username\AppData\Roaming\npm\node_modules\typescript\

So you need to tell Visual Studio Code to use the lib folder of your TypeScript npm install. You do this by:

  1. Open VS Code settings (File -> Preferences -> Settings)

  2. Search for typescript.tsdk setting enter image description here

  3. Find where npm installed TypeScript with: npm list -g typescript. In my case, it returned C:\Users\username\AppData\Roaming\npm

  4. Override the value of typescript.tsdk setting to: C:\\Users\\username\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib Note the use of double backward slashes to have a properly escaped string with backward slashes.

  5. Confirm that VS Code is using the npm version of TypeScript for intellisense by opening a TypeScript file, clicking the TypeScript version number in the bottom right and seeing in the task window that VS Code is loading TypeScript from the directory specified in step 4:

enter image description here

  1. Confirm that VS Code is using the correct version of TypeScript for compiling by going to this folder and changing the name of the file:

C:\Users\username\AppData\Roaming\npm\tsc.cmd (to something like tsc1.cmd)

Now try building in VS Code (Tasks -> Run Tasks -> tsc:build - tsconfig.json) and you should get this error message in the VS Code terminal window:

'tsc' is not recognized as an internal or external command, operable program or batch file.
The terminal process terminated with exit code: 1
  1. Change the file back to tsc.cmd and you should now be able to build and have Intellisense in VS Code for the globally installed TypeScript node package
Sweeps answered 20/6, 2018 at 17:55 Comment(2)
Why was this not an edit of the answer that already had 99% of this information?Scarface
I guess we'll never knowCouperin
M
19

To automatically use the Typescript version installed in your workspace's node_modules, without having to configure it every time you set up a new workspace, you can set the default Typescript setting in the User Settings JSON (not Workspace) to use a relative path:

{
    // ... other User settings
    "typescript.tsdk": "./node_modules/typescript/lib"
}

Now, when you run the "Select Typescript Version..." command, the "VS Code's Version" will always be the same as the "Workspace Version":

'Select Typescript Version...' command

The only potential downside to this is that it means you always need Typescript installed in the workspace you're working in. Though, if you're writing Typescript anywhere, I think that's a reasonable expectation.

Modestia answered 22/4, 2020 at 22:23 Comment(1)
Does the command require more typescript versions? Since for this command I have "No matching commands"Hurtle
M
9

You should see a version number listed on the bottom bar:

enter image description here

If you click on the number (2.4.0 above) you will be presented with an option to choose the version you would like to use:

enter image description here

If you don't see the version you want that means it probably isn't installed and you have to install it.

npm install -g [email protected]

Replace 2.7.2 with the version you want to install.

Milldam answered 12/3, 2018 at 13:31 Comment(0)
I
2

I recommend installing the JavaScript and TypeScript Nightly extension, which will make VS Code act as if its built-in version is the current typescript@next from npm.

Incandesce answered 4/12, 2020 at 22:33 Comment(0)
I
1

Though I could not find the file tsserver.js when I used Spotlight on my Mac, I tried again using mdfind, and I found its location to be "/usr/local/lib/node_modules/typescript/lib/"

So I used that path when editing my Workspace settings in settings.json

Now I am using my most recent version of TypeScript, and VSCode tells me that I am using my most recent version.

Ironstone answered 26/9, 2016 at 23:1 Comment(0)
V
1

Typescript package has a compiler and a language service. VScode comes with a Typescript language service, not with the compiler. You can see the language service in the bottom right, like the other answers show, but you can't see what compiler version is been used.

You can have different versions for the compiler and the language service.

Virgina answered 27/9, 2018 at 13:20 Comment(0)
G
0

I have had a similar problem and now I succeeded in having an up-to-date version of TypeScript by modifying the environment variables on my system. In my case, we need a TypeScript version higher than 2. But I was only able to use version 1.8.3. First thing is I went to my system environment variables and checked the path variable. In there I found a reference to TypeScript version 1.8.3.

C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8.3\

When I checked the parent directory, this was also the highest version installed in that directory. I would have thought by globally installing the latest version, that I would see this here too but it is not there. The version you see here is the one that got installed with Visual Studio (not visual studio code).

So I went to Visual Studio and updated the TypeScript library to the latest version via Options > Extensions and Updates. There I searched for the latest version of TypeScript and installed it.

This made a new version available in the parent directory mentioned earlier. I then changed the path variable to:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.2\

When I now open VS Code and type tsc -v I see that I am using the latest version. No mismatch message any more, etc. Hope this helps you guys out a bit.

Garate answered 13/4, 2017 at 9:52 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.