206

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?

Fabian Lauer
  • 8,891
  • 4
  • 26
  • 35
Richard Fuhr
  • 3,195
  • 3
  • 22
  • 14
  • tsc --version ?? – Hackerman Sep 23 '16 at 20:07
  • 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. – Igor Sep 23 '16 at 20:07
  • @Hackerman Nope, that just shows you the global TSC version. – Fabian Lauer Sep 24 '16 at 12:44
  • yarn version of typescript compiler: `yarn tsc --version`, for vscode TypeScript version you can see updates/changelog - e.g. https://code.visualstudio.com/updates/v1_66 says for example "VS Code now bundles TypeScript 4.6.3." – jave.web Apr 09 '22 at 09:23

9 Answers9

328

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 typescript@2.0.5
  2. Open VS Code User Settings (F1 > Open User Settings)
  3. Update/Insert "typescript.tsdk": "{your_global_npm_path}/typescript/lib" you can find out {your_global_npm_path} by typing 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 typescript@2.0.5

    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:

Fabian Lauer
  • 8,891
  • 4
  • 26
  • 35
  • 6
    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 Fuhr – Cody Dec 09 '16 at 19:10
  • Adding this setting caused visual studio code to completely disable all typescript language features. This is not the answer you are looking for. – BentOnCoding Dec 12 '16 at 16:36
  • 3
    @BentOnCoding 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 ;-) – Fabian Lauer Dec 12 '16 at 17:31
  • VS Code now seems to be getting TypeScript version updates automatically, so the answer here may no longer be current. – Mickey Segal Sep 14 '17 at 17:35
  • 2
    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: https://code.visualstudio.com/docs/typescript/typescript-compiling – Itanex Feb 22 '19 at 20:42
  • If you are missing the bottom status bar as I was, you can enable it under View -> Appearance -> Show Status Bar – goWithSwagger Jun 16 '21 at 18:28
  • 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) – jave.web Apr 09 '22 at 08:58
  • FYI: VsCode must be opened in the folder with the `tsconfig`? `packages.json`? file to allow "choose workspace version". – LosManos Sep 09 '22 at 12:38
33

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"
}
DAXaholic
  • 33,312
  • 6
  • 76
  • 74
22

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
gomisha
  • 2,587
  • 3
  • 25
  • 33
16

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.

Julien
  • 5,243
  • 4
  • 34
  • 35
  • Does the command require more typescript versions? Since for this command I have "No matching commands" – jave.web Apr 09 '22 at 09:20
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 typescript@2.7.2

Replace 2.7.2 with the version you want to install.

mattnedrich
  • 7,577
  • 9
  • 39
  • 45
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.

etd
  • 31
  • 3
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.

Richard Fuhr
  • 3,195
  • 3
  • 22
  • 14
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.

Lombas
  • 1,000
  • 1
  • 8
  • 24
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.

wonea
  • 4,783
  • 17
  • 86
  • 139