Comprehending the concept of TypeScript type assertion

Question

Comprehending the concept of TypeScript type assertion

Currently, I'm learning TypeScript and I came across a code snippet that is causing some confusion.

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(typeof(str2))

log: String

From my understanding, initially str was inferred as a String, then it was asserted to be a number when assigned to str2. Str2 was explicitly defined as a number. So why are both str and str2 not of type number since one is converted to a number and the other is declared as a number?

typescript

Answer 1

Answer №1

When utilizing TypeScript type assertion, it's crucial to understand that it does not actually convert the value of the expression. Instead, it simply instructs the TypeScript compiler to treat it as a specific type. Therefore, upon examining the compiled code, you won't come across instances where the number is explicitly mentioned. This discrepancy between expectations and behavior can be attributed to this distinction. To effectively convert a value into a number, the recommended approach involves using the parseInt function:

var str = '1' 
var num:number = parseInt(str)   // The value of 'str' is now interpreted as a number 
console.log(typeof(num))

log: Number

Answer 2

When utilizing TypeScript type assertion, it's crucial to understand that it does not actually convert the value of the expression. Instead, it simply instructs the TypeScript compiler to treat it as a specific type. Therefore, upon examining the compiled code, you won't come across instances where the number is explicitly mentioned. This discrepancy between expectations and behavior can be attributed to this distinction. To effectively convert a value into a number, the recommended approach involves using the parseInt function:

var str = '1' 
var num:number = parseInt(str)   // The value of 'str' is now interpreted as a number 
console.log(typeof(num))

log: Number

Comprehending the concept of TypeScript type assertion

Answer №1

Similar questions

Oops! The program encountered an issue where it couldn't access the "Point" property because it was undefined. This occurred while working with openlayers 3 and jsts on

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

Tips and tricks for sending data to an angular material 2 dialog

Generate a unique Object URL for the video source by utilizing the binary string obtained from the backend

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

Alerts in Angular templates of inherited class in WebStorm

Ways to display "No records" message when the filter in the material table in Angular returns no results

Steps to transfer extra files such as config/config.yaml to the .next directory

Tips for Achieving Observable Synchronization

Rearrange list items by dragging and dropping

Issue with Date generation in TypeScript class causing incorrect date output

Using a Typescript variable prior to its assignment

What steps can be taken to fix error TS2731 within this code snippet?

Definitions for nested directories within a main index.d.ts

Angular 8 HTTP Interceptor causing issues with subscriptions

I built a custom Angular application integrated with Firebase, and I'm looking for a way to allow every user to have their individual table for managing tasks

``Using backticks to denote HTML syntax - Leveraging Google Charts to create

Retrieve the value from an HTML class using Angular

Unable to successfully remove item using Asyncstorage

What is the best way to optimize reactive values using the Vue composition API?