Setting TypeScript versions in Visual Studio Code goes unnoticed

I'm having trouble updating the version of TypeScript that Visual Studio Code is running.

After carefully reading through the response to this question, I attempted to modify my user settings using:


{
    "typescript.tsdk": "C:\\Users\\myUser\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib"
}

Unfortunately, this didn't resolve the issue. Additionally, I experimented with adjusting my workspace settings as follows:


{
    "typescript.tsdk": "./node_modules/typescript/lib"
}

However, this adjustment also seemed ineffective. When configuring my task runner to execute tasks.json, I specified the following parameters:


{
    "version": "0.1.0",
    "command": "tsc",
    "args": ["-v"],
    "echoCommand": true
}

Despite these efforts, pressing ctrl+shift+B displayed the output:

running command> tsc -v
Version 1.8.34

I'm unsure if there are additional steps required to update Typescript within Visual Studio Code. Any suggestions or recommendations would be greatly appreciated.

Note: Running tsc -v in both paths mentioned above returned 2.1.4.

Note II: I've attempted restarting Visual Studio Code multiple times to no avail.

Note III: Executing tsc -v from a command prompt under C: yielded a result of 2.1.4.

My current Visual Studio Code version is 1.8.1

Update:

In an effort to pinpoint the source of the outdated TypeScript version, I revised my tasks.json file to run where tsc. The resulting output was:

running command> where tsc
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.js
C:\Users\myUser\AppData\Roaming\npm\tsc
C:\Users\myUser\AppData\Roaming\npm\tsc.cmd

Identifying the location of the older TypeScript version shed light on the issue, but it remains unclear why the "overridden" version isn't being utilized.

It's possible that the override solely impacts features like intellisense rather than building processes. However, I am eager to find a solution to this dilemma.

typescriptvisual-studio-code

Answer №1

I specialize in enhancing TypeScript and JavaScript support within the realm of VSCode.

Setting the typescript.tsdk determines the version of TypeScript utilized for IntelliSense in VSCode, separate from the version used by tsc when running tasks. Tasks rely on the same logic as the command line to resolve tsc.

To incorporate your local copy of tsc into a task, you can modify the task.json file like so:

{
    "version": "0.1.0",
    "command": "./node_modules/.bin/tsc",
    "args": ["-v"],
    "echoCommand": true
}

For Windows users, consider updating the code snippet as follows:

{
    "version": "0.1.0",
    "command": ".\\node_modules\\.bin\\tsc.cmd",
    "args": ["-v"],
    "echoCommand": true
}

Hopefully, this explanation clarifies any confusion. If you have suggestions for improving the documentation or would like to contribute to enhancing it further, feel free to reach out or even submit a PR to bolster the resources available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the form using a custom component in react-hook-form: setting a default value

I have been learning ReactJS + TypeScript for 3 months now. Recently, I have a question about using react-hook-form (v7) to edit a form. I want to integrate my custom component into the form and I managed to do it on my own! Here is a snippet of my form p ...

reactjstypescriptformseditreact-hook-form

Exploring the power of Typescript alongside Styled Components and Material UI

Working with Typescript in conjunction with MUI and Styled-Components may lead to the need to pass props directly to MUI elements to address type errors... const Index = () => { return ( <StyledButton variant="contained" > ...

javascriptreactjstypescriptmaterial-uistyled-components

Sending VSCode to external functions

My primary entrypoint containing the activate() function is: extension.ts import * as vscode from "vscode"; import { subscribe } from "./eventListeners.ts"; export function activate(context: vscode.ExtensionContext) { vscode.command ...

typescriptvscode-extensions

Navigating the murky waters of Angular 2 component class methods: Should they be public or

I find it challenging to determine which methods should be designated as private and which should be public within a component class. It's generally straightforward in a service to determine whether a method should be public or private, for example: ...

angulartypescript

Passing Angular/Electron service output to a variable results in it being undefined

I am encountering a problem with my service. When I run the code marked #1, it successfully displays data in the console. However, when I attempt to assign it to a variable, I receive an undefined value. Here is the code snippet: Service: executeShell(c ...

node.jsangulartypescriptelectronangular9

Angular DOM not reflecting updates

Having trouble with the view not detecting changes in value on a component. I've attempted to use ChangeDetectorRef without success. After trying various solutions and spending an excessive amount of time on something that should work smoothly, it see ...

angulartypescriptgoogle-signin

I am looking to replicate a DOM element using Angular 4

I am interested in creating a clone of a DOM element. For example, if I have the following structure: <div> <p></p> <p></p> <p></p> <p></p> <button (click)="copy()"></button> & ...

angulartypescript

What are some strategies to avoid losing form data while switching between components without refreshing the page?

I am looking for a solution to seamlessly swap between two components, each containing a form, while retaining the data inputted by the user without submitting. This functionality is similar to switching tabs in simple HTML. My approach involves using a v ...

angulartypescript

Navigate between Angular Child Routes without requiring the Parent Route

In my Angular 13 application, I have implemented routes that lead to various modules with their own set of child routes. The routing configuration for each module looks like this: @NgModule({ declarations: [DashboardComponent], imports: [ ...

angulartypescriptroutes

Identifying and organizing scroll-related errors in AngularJS using TypeScript clustering

Attempting to incorporate lazy loading using Clusterize.js in AngularJS TypeScript, but encountering errors. Any expert advice would be greatly appreciated. HTML VIEW <div id="scrollArea" class="clusterize-scroll"> <ul id="contentArea" clas ...

angularjstypescriptclusterize

Angular Error: Unable to access property 'users' on a null value

I am working on a component that takes in data through the @Input() decorator regarding a group. My objective is to generate a new array of objects during the initialization of the component based on the data from the group array. Below is the TypeScript c ...

angulartypescript

Defining and initializing variables in TypeScript

Trying to get the hang of Angular and TypeScript, but I'm stuck on why I can't access my variable after declaring it. It looks something like this. export class aComponent implements OnInit { num : Number; num = currentUser.Id Encounterin ...

angulartypescript

Incorporate my personalized icons into the button design of ionic 2 actionSheet

I'm struggling to figure out how to incorporate my personal icon into the actionSheet feature of ionic 2/3. presentActionSheet() { let actionSheet = this.actionSheetCtrl.create({ title: 'Mode', buttons: [ { ...

javascriptangulartypescriptionic2

Parsing JSON results in the return of two objects

I am analyzing a JSON file, expecting it to return Message[] using a promise. This code is similar to the one utilized in the Heroes sample project found in HTTP documentation { "data": [ {"id":"1","commid":"0","subject":"test1subject","body":" ...

jsonangulartypescript

Leveraging the power of the Async pipe within an Angular TypeScript file

Using the async pipe in HTML involves utilizing the syntax "Products$ | async as products". But can we also access these same products in the TypeScript file? Is this possible? ...

angulartypescript

Expand the size of the imported gltf model within Three.js

After successfully loading a 3d model with a gltf extension using the GLTFLoader in Three.js, I encountered a new challenge. I needed to adjust the dimensions of the model dynamically when the window is resized, based on the values of window.innerWidth and ...

typescriptthree.js3dgltf

Implementing handleRequest as an asynchronous function within the passportjs guard

@Injectable() export class RefreshAuthGuard extends JwtAuthGuard { constructor( private readonly jwtService: JwtService, ) { super(); } public handleRequest(err: any, user: any, info: Error, ctx: any): any { if (err ...

typescriptnestjs

Bringing in TypeScript definitions for gridster

After starting a new ionic project, I decided to include the gridster.js library by running npm install gridster and npm install @types/jquery.gridster in the root directory of my project. However, when trying to import the installed definitions, I encount ...

cordovatypescriptionic-frameworktypescript-typingsgridster

Angular tutorial: Loading Excel file with header located on row n

Is there an easy way to read specific columns from an excel file in Angular, starting from a certain row as the header? Most of the code I found involves complex scripts, and I'm looking for a simpler solution. Below is the code I've come up wit ...

javascriptexcelangulartypescriptfrontend

Is it possible to store a TypeScript type predicate in a variable?

Let's consider a type predicate similar to the one shown in the TypeScript documentation: function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } Now, imagine we have some code structured like this: function in ...

typescripttypeguards