🎉 We just launched our new React course! Get it with 20% off! 🎉

Two Ways to Force Types in TypeScript

Ferenc Almasi • 2022 September 26 • 📖 2 min read
  • twitter
  • facebook

There are two ways to force types in TypeScript (also known as type casting or type conversion). Using the bracket syntax, or using the as keyword. For example:

// Using bracket syntax
const age = <string>user.age

// Using the "as" keyword
const age = user.age as number
Copied to clipboard!

In the above code example, we are transforming one type into another, for example, a number to a string, or a string to a number. In both cases, the end result will be the same, there are no differences.

One thing to keep in mind is to stick to one or the other for consistency. In case you don't know the type upfront, it is also a common practice to use the any type to avoid type errors:

// Using bracket syntax
const age = <any>user.age

// Using the "as" keyword
const age = user.age as any
Copied to clipboard!

Only use the any type as the last resort, and if you are sure your application won't run into type errors.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Type Conversions in TypeScript

Of course, you can also go the other way around and convert types instead of forcing them. You can use the same type conversion method in TypeScript you would use in plain JavaScript. That is, for the above example, we can use the String or Number object to convert strings to numbers and vice versa.

// Converting a string to a number
const age: number = Number(user.age)

// Converting a number to a string
const age: string = String(user.age)

// Make sure you pass a valid numbe to Number
const age: number = Number('invalid') // This will result in NaN
Copied to clipboard!

Note that in case you pass an invalid number to the Number object, you will get NaN as a result. You can also convert types into booleans using the Boolean object:

Boolean(1)         // Returns true
Boolean('0')       // Returns true
Boolean([])        // Returns true
Boolean(null)      // Returns false
Boolean(undefined) // Returns false
Boolean(0)         // Returns false
Boolean(NaN)       // Returns false
Copied to clipboard!
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More