How does a brand new installation of VSCode believe it comes pre-equipped with TypeScript capabilities?

Operating on Windows 10 Enterprise,

After investing several hours and experimenting on various VMs,

Interesting Observation #1

Upon opening a .ts file in vscode, it appears to be recognized as TypeScript 2.3.4 as per the screenshot provided below:

https://i.sstatic.net/FOjOa.png

Interesting Observation #2

However, attempting to execute a .ts file in VSCode (using control-shift-b) results in the following error:

'tsc' is not recognized as an internal or external command,

Interesting Observation #3

Upon scouring through all storage disks, I discovered that tsc.cmd only resides within Visual Studio 2015 at the specified location. It is not part of VSCode.

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\node_modules\.bin\tsc.cmd

Interesting Observation #4

The documentation for TypeScript falsely declares that:

“VS Code ships with a recent stable version of the TypeScript language service”

https://code.visualstudio.com/Docs/languages/typescript

Interesting Observation #5

Reviewing other relevant SO posts: Does VS Code install TypeScript, and if so: where? It is evident that I must manually install TypeScript and address any version conflict warnings that may arise.

"Version mismatch! global tsc (2.1.5) != VS Code's language service (2.2.1). Inconsistent compiler errors might occur"

More details can be found at: https://code.visualstudio.com/Docs/languages/typescript

Question:

Why does a fresh installation of VSCode believe it is equipped with TypeScript 2.3.4, as illustrated in the above screenshot?

typescriptvisual-studio-code

Answer №1

Visual Studio Code includes the powerful TypeScript language service:

Visual Studio Code comes equipped with an up-to-date stable release of the TypeScript language service, which may differ from the version of TypeScript you have installed globally or locally in your project. The current version of the TypeScript language service is visible in the Status Bar when working on a TypeScript or JavaScript file:

This service provides features like intellisense and syntax highlighting, without actually being the compiler itself.

Answer №2

In reference to a statement made by @Sarah Smith, Visual Studio Code comes equipped with its own TypeScript language service:

Visual Studio Code includes a current stable version of the TypeScript language service, which may differ from the global or local installations of TypeScript on your system.

Although Visual Studio Code may not recognize having the TypeScript compiler installed, it does rely on the language service, which in your instance is at version 2.3.4.

Essentially, the integration of TypeScript into the editor functions as a separate extension for Visual Studio Code. While it does not appear in the extension panel due to being a default part of VS Code, it does enhance the editor with TypeScript compiler features.

Interestingly, the TypeScript extension's source code is located within the same repository as the remainder of Visual Studio Code, at least up until June 2017.

On a related note, I previously addressed a similar query which might offer some insights: What is the TypeScript version utilized by Visual Studio Code and how can it be updated?.

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

React's setState is not reflecting the changes made to the reduced array

I am currently working on a custom component that consists of two select lists with buttons to move options from the available list to the selected list. The issue I am facing is that even though the elements are successfully added to the target list, they ...

javascriptreactjstypescript

Enabling Javascript compilation while overlooking typescript errors

Currently, I am working in VS Code with create-react-app using TypeScript. Whenever there are type errors, they show up in the browser and prevent compilation by TypeScript. I am looking for a way to only see these errors in the Google console and termin ...

reactjstypescript

I'm perplexed as to why my array remains empty despite assigning a value to it in my controller. (Just to clarify, I am working with AngularJS, not Angular)

I spent a whole day debugging this issue without any luck. Issue: this.gridOptions.data = this.allTemplatesFromClassificationRepo ; **this.allTemplatesFromClassificationRepo ** remains an empty array. I have already called the activate() function to assig ...

angularjstypescript

What is the best way to resolve the "unknown" type using AxiosError?

I'm currently working on developing a customized hook for axios, but I've encountered the following error: Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<AxiosError<unknown, any> | unde ...

reactjstypescriptaxios

Retrieve a specific subset of a union based on the class in a generic function

This question shares similarities with another post I made, but this time focusing on using classes instead of plain objects. class Exception1 extends Error { constructor(message: string, public arg1: string) { super(message); } } class Ex ...

typescripttypescript-generics

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

javascriptangulartypescriptgulpsystemjs

Tips for detecting the end of a scroll view in a list view

I've encountered an issue with my scrollView that allows for infinite scrolling until the banner or container disappears. What I'm aiming for is to restrict scrolling once you reach the last section, like number 3, to prevent the name part from m ...

typescriptreact-nativearraylistexposcrollview

typescript - add a global library import statement to every script

Recently, I began working on a TypeScript project in Node.js. I am looking to add import 'source-map-support/register'; to all of my .ts files for better visibility of TS source in stack traces. Is there a method to implement this without manuall ...

node.jstypescript

Challenges with Type Casting in TypeScript

Upon reviewing a specific piece of code, I noticed that it is not producing any compile time or run time errors even though it should: message: string // this variable is of type string -- Line 1 <br> abc: somedatatype // lets assume abc is of some ...

typescript

"Retrieving an element from an array may result in a value of

While going through an array of objects in my Angular component class, I faced a strange issue where the properties kept showing up as undefined. The function responsible for this behavior looks like this: upload(): void { const { fileHandles, related ...

angulartypescript

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

Issues have arisen with the CSS module system in my project. Below are snippets from various code files and configurations: react-app-env.d.ts, craco.config.js, CircleButtonWithMessage.module.less, CircleButtonWithMessage.tsx, as described below: //react-a ...

javascriptreactjstypescriptwebpackless

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Having trouble with using New Line '\n' ' ' in Typescript Here is an example of my typescript code: this.custPartyAddress = estimation.partyName + ',' + '\n' + estimation.partyAddress + ',' + ...

htmltypescriptbootstrap-4newline

Utilizing Dynamic Class Names in Angular 7 with Typescript

In the process of developing an Angular 7 application, I have created a form component that is intended to be used for various entities. As part of this, I defined a variable route: {path: ':entity/create', component: FormComponent} While this ...

angulartypescript

What are some alternative methods for automating WhatsApp messages?

In Visual Studio code, I utilized the base interpreter 'conda', specifically miniconda 3 import pywhatkit pywhatkit.sendwhatmsg("xxxxxxxx", "good morning from python",10,00) x represents the phone number The issue I'm ...

pythonvisual-studio-codeautomationanacondawhatsapp

Unlock the full potential of working with TaskEither by utilizing its powerful functionality in wrapping an Option with

After exploring various examples of using TaskEither for tasks like making HTTP requests or reading files, I am now attempting to simulate the process of retrieving an item from a database by its ID. The possible outcomes of this operation could be: The i ...

typescriptfunctional-programmingfp-ts

How can I modify the appearance of folders in FileSystemProvider?

I have created an extension for vscode that includes a virtual filesystem with fake directories and files. While the extension is functioning properly, I am facing some challenges in customizing certain aspects due to lack of documentation. 1) I need to u ...

typescriptvisual-studio-codevscode-extensions

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

I have a current function in my code that dynamically creates components and then generates a table of contents once the components are added to the DOM. This service retrieves all h3 elements from the DOM to include in the table of contents: generateDy ...

javascriptangulartypescriptdom

What is the best time to initialize .env variables in a NodeJS application?

Building a NodeJS Express REST API with TypeScript requires loading environment variables using the dotenv package. In my code, I access the .env variables in two different files: index.ts, which serves as the entry point, and in a separate file called My ...

node.jstypescriptexpressenvironment-variableslifecycle

Sending data to a parent component from a popup window in Angular Material using a button click while the window is still open

How can I retrieve data from an Angular Material Dialog Box and send it to the Parent component? I am able to access data after the dialog box is closed. However, I am wondering if there is a way to retrieve data while the dialog box is still open, especi ...

angulartypescriptangular-materialangular8material-dialog

Next.js routing can sometimes be unpredictable, especially when navigating from a nested route

I recently set up a directory named dashboard within the pages folder, and it contains the following files: index.tsx customers.tsx invoice.tsx items.tsx When a user navigates to http://localhost:3000/dashboard, the index.tsx page is displayed. However, ...

typescriptnext.js