What are the four different variations of typescript available?

As I delve into teaching myself Angular and updating my versions (node, angular-cli, ...), I have come across 4 different versions of Typescript. Can anyone shed some light on the differences between them?

In the screenshot below, on the left side is vscode displaying the result of "ng version". The data that got cut-off includes:

 - Angular CLI: 7.3.9
 - Node: 10.15.3
 - OS: win32 x64
 - Angular: 7.1.4
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

The right-side shows a cmd prompt open in my user location.

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

Here's my attempt at explaining it, feel free to correct me :)

  1. 3.1.6 This seems like the Typescript version used in my project
  2. 3.2.2 Likely the global version currently installed in %AppData%\Roaming\npm
  3. 3.4.5... a bit of a mystery. It turns out this is the latest available version at the time of posting. Although higher than what Angular 7.1.4 supports, so it might not work properly due to being a breaking change according to this source. Makes me wonder if it's actually showing something other than Typescript.
  4. 3.2.4 This one has me puzzled, unsure of its origin

I also checked npm list typescript locally and globally. While still learning, I'm not entirely sure what this means but here are the results:

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

angulartypescript

Answer №1

Version 3.1.6

Indeed, the Typescript version you see is specific to your project and is installed locally.

Version 3.2.2

The global version of Typescript remains consistent regardless of location; hence, it stays the same when running tsc --version.

Certain packages rely on specific versions of libraries for seamless functionality.

Version 3.2.4

This version of Typescript is a requirement for @angular/cli, automatically installed as a dependency alongside @angular/cli.

Version 3.4.5

In VS Code, you'll notice this version displayed in the corner. The editor utilizes its own internal version of Typescript since it's built using Typescript.

Answer №2

Your analysis is quite impressive and you are on the right track with your explanation. Here's some additional insight to fill in the missing pieces:

3.1.6, as you correctly mentioned, is the version installed for your specific project.

3.2.2 refers to the globally installed version that you are using.

3.2.4 represents the TypeScript version integrated by angular-cli.

3.4.5 is the most recent version supported by your current Visual Code setup. This is the version utilized by Visual Code for intellisense.

Based on what I know, your Angular project will operate on TSC version 3.1.6 since it's locally referenced. Feel free to correct me if I am mistaken.

You don't have to be concerned about facing any major changes since version 3.4.5 is specifically tailored for enhancing intellisense within VS Code.

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

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

javascriptcssreactjstypescriptmaterial-ui

Is it possible for a typed function to access object properties recursively?

Is there an efficient method in TypeScript to type a function that can recursively access object properties? The provided example delves two levels deep: function fetchNestedProperty<T, K extends keyof T>(obj: T, prop1: K, prop2: keyof T[K]) { r ...

typescript

Using React to render an icon based on the value of props

I am working on a vacation project using React (TS), NodeJS, and mySQL. I am attempting to implement save and like icons with Material UI based on certain props conditions. The icons are located within the div className "MenuContent". How can I create a fu ...

mysqlnode.jsreactjstypescript

Can anyone advise on the best way to pass a function as a prop in React using TypeScript?

Hey there! I'm currently attempting to create a button component that can perform two separate actions: one labeled as "START" which initiates a countdown using StoreTimer.start(), and the other labeled as "RESET" which resets the countdown with Store ...

javascriptreactjstypescript

Customizing a ng-template with my own HTML content - a step-by-step guide

As I work on creating a custom web component inspired by the accordion component from ng-bootstrap, I'm currently experimenting with the functionality. Feel free to test out the original component on stackblitz. One specific feature I am aiming for is ...

angularbootstrap-4web-componentng-bootstrap

Content of reusable angular form is not visible on the homepage

I am currently working on creating a reusable Angular form within an Ionic application. Despite following various tutorials and Stack Overflow posts, I have resolved all errors but unfortunately, the content does not display on the parent page. Here is my ...

htmlangularionic-frameworkangular-forms

Understanding Angular's Scoping Challenges

I have a function that retrieves an array and assigns it to this.usStates. main(){ this.addressService.getState().subscribe( (data:any)=>{ this.usStates = data; if(this.usStates.length===0) { this.notificationServic ...

angulartypescriptscoping

Discover the Location and Sign Up for Angular2+ Service

I'm currently using the Google Maps API to retrieve a user's geoLocation data, including latitude and longitude. My goal is to pass this information to a web API service in order to receive JSON output of surrounding addresses. I have implemented ...

javascriptangulargoogle-maps

What's the best way to provide route access to the same menu for two distinct user roles using AuthGuard within Angular?

I developed an application that includes three different user roles: ROLE_USER, ROLE_MODERATOR, and ROLE_ADMIN as shown below: export enum Role { User = 'ROLE_USER', Moderator = 'ROLE_MODERATOR', Admin = 'ROLE_ADMIN&apo ...

angular

The npm crash is caused by Firestore addDoc

My approach to importing firestore looks like this: import { getFirestore, addDoc } from "firebase/firestore"; However, it seems to be causing issues with npm running my react app as it gets stuck during compilation and eventually shows the foll ...

reactjstypescriptfirebasenpmgoogle-cloud-firestore

Angst with the Angular Command Line Interface

After installing the Angular CLI via the command prompt, I encountered an error related to @angular-devkit/build-angular. However, everything else seems to be working fine. Does anyone have any ideas as to why this might be happening? https://i.stack.im ...

angular

When a selection is made in React MUI Virtualized Autocomplete, the autocomplete menu scrolls back to the top

I am currently using reactMUI autocomplete with virtualization because the listbox is expected to contain thousands of items. The virtualization feature works fine, but when I add an onchange function, the listbox automatically scrolls back to the top wh ...

reactjstypescriptmaterial-ui

Combine multiple HTTP service calls in Angular's NgRx store into a single effect and trigger corresponding actions

Hey there, I am currently trying to call multiple HTTP services in parallel using forkJoin, but after it's finished, the actions are not being dispatched. doSearchCliente$ = createEffect(() => this.actions$.pipe( ofType(addCliente), ...

angularngrx-storengrx-effectsfork-join

Angular Routing can be a powerful tool for managing multiple article posts in an efficient and organized way

I am in the process of building a website with Angular that features numerous articles. Whenever a user clicks on an article, I want it to navigate to a new URL using routing. To achieve this, I have created a new Article component and here is how my app- ...

angulartypescriptangular-router

When executing npm run build for production, the resulting build does not include distribution for

I am encountering an issue with my Angular project, specifically during the build process. After running ng build, the dist folder is created with the correct build. However, when I run the command: ng build --prod it generates the production build as e ...

node.jsangularnpm

Guidelines for developing a wrapper component that takes both the internal and external components as props

I'm attempting to create a wrapped element for the purpose of wrapping something with a React context provider that is provided via props. EDIT: View my attempt here: https://stackblitz.com/edit/stackblitz-starters-lxdb6l?file=src%2FApp.tsx The reas ...

reactjstypescript

Conditional Types - Finding the perfect match for a nullable type

I am attempting to find a nullable type in a conditional type: interface Unwrapped { dummyProp: string; } interface UnwrappedArray<T extends Unwrapped> extends Array<T> { } interface Wrapped<T extends Unwrapped> { unwrapped: T; } type T ...

typescript

The error thrown is: "TypeError: device.devices.map is not a valid function

I encountered an error after adding products to the page and I'm having trouble identifying the cause. const {device} = useContext(Context) 91 | </div> > 92 | <div className="inner-display-collection"> | ^ ...

node.jsreactjstypescript

The FileSaver application generates a unique file with content that diverges from the original document

I'm attempting to utilize the Blob function to generate a file from information transmitted via a server call, encoded in base64. The initial file is an Excel spreadsheet with a length of 5,507 bytes. After applying base64 encoding (including newlines ...

angulartypescriptbase64filesaver.js

Sharing information with a service in Ionic and Angular

I need to send data to my service and incorporate it into a URL string. The code snippet below shows how I am obtaining the data in my constructor when the user navigates to the page: constructor(public alertController: AlertController, pri ...

angulartypescriptionic-framework