Type Casting in JavaScript and TypeScript

1. Implicit Conversion in JavaScript
2. Explicit Conversions in JavaScript
3. Type Casting in TypeScript

This article will discuss type casting or type conversion using different JavaScript and TypeScript methods.

There are two ways to perform type conversion in JavaScript: implicit and explicit.

Implicit Conversion in JavaScript

If JavaScript recognizes a given data type as wrong, it will automatically recast it into the correct one. This process is called an implicit conversion.

JavaScript can do implicit type conversion through the following.

Implicit Conversion to String in JavaScript

If + is used with a numeric string, then JavaScript returns an output by connecting the numerical string value with the remaining value of the code.

Example:

let value;

value = '1' + 2;
console.log(value)  // Output "12"

value = '1' + true;
console.log(value)  // Output "1true"

If the remaining value is a number, JavaScript automatically converts it to a string.

Implicit Conversion to Number in JavaScript

If mathematical operators -, *, / follow a numeric string, the output would also be numeric.

Example:

let value;

value = '2' - '1';
console.log(value);  // Output 1

value = '2' - 1;
console.log(value);  // Output 1

value = '2' * 1;
console.log(value);  // Output 2

value = '2' / 1;
console.log(value);  // Output 2

Implicit Conversion of Non-Numeric Strings to NaN in JavaScript

If a non-numeric string is followed by mathematical operators of -, *, /, the output would be returned as NaN (Not a Number).

Example:

let value;

value = 'hello' - 'world';
console.log(value);  // Output NaN

value = 'Hello' - '2';
console.log(value);  // Output NaN

Implicit Conversion of Boolean to Number in JavaScript

Since JavaScript considers false as 0 and all nonzero numbers as true, then true would be 1 when it needs to be changed to a number.

Example:

let value;

value = 2 + true;
console.log(value);  // Output 3

value = 2 + false;
console.log(value);  // Output 2

Implicit Conversion of null to Number in JavaScript

If null is used with a numeric, it would be 0.

Example:

let value;

value = 2 + null;
console.log(value);  // Output 2

value = 2 - null;
console.log(value);  // Output 4

Implicit Conversion of undefined to NaN in JavaScript

When undefined is used with a number, Boolean, or null, the output is returned as NaN.

Example:

let value;

value = 2 + undefined;
console.log(value);  // Output NaN

value = true + undefined;
console.log(value);  // Output NaN

value = null + undefined;
console.log(value);  // Output NaN

Explicit Conversions in JavaScript

In JavaScript, we can manually convert a specific data type to a preferred one. This process is called explicit conversion, done by calling some built-in methods.

Explicit Conversion to Number in JavaScript

Using the Number() method in JavaScript, numeric strings, boolean True and False, null can be converted to a numeric type. true will be considered 1, and false and null will also be considered 0.

Example 1:

let value;

value = Number('20');
console.log(value);  // Output 20

value = Number(false);
console.log(value);  // Output 0

Example 2:

let value;
value = Number(null);
console.log(value);  // Output 0

let value = Number(' ')
console.log(value);  // Output 0

If an invalid string is used with the Number() method, the output will return as NaN.

Furthermore, there are other methods like parseInt() and parseFloat() where strings are parsed and returned as an integer and floating-point, respectively. Also, unary + operator is another way to convert numbers.

Explicit Conversion to String in JavaScript

String() and toString() can convert data types to strings in JavaScript.

Example:

let value;

value = String(1 + 2);
console.log(value);  // Output "3"

value = String(null);
console.log(value);  // Output "null"

value = (20).toString();
console.log(value);  // Output "20"

It is important to note that String() converts null and undefined to string, but toString() gives an error.

Explicit Conversion to Boolean in JavaScript

JavaScript considers all undefined, null, 0, NaN, '' as false while all other values are considered true.

Example:

let value;
value = Boolean('');
console.log(value);  // Output false

value = Boolean(undefined);
console.log(value);  // Output false

value = Boolean(null);
console.log(value);  // Output false

value = Boolean(NaN);
console.log(value);  // Output false

Type Casting in TypeScript

Use the as Keyword for Type Casting in TypeScript

When the as keyword is used, it informs the compiler to consider the entity as another type rather than what the compiler thinks it is. Therefore, the as keyword performs type assertion in TypeScript.

Syntax:

let a: typeA;
let b = a as typeB;

Use the <> Operator for Type Casting in TypeScript

In addition, we can also use the operator <> to perform typecasting in TypeScript.

Syntax:

let a: typeA;
let b = <typeB>a;