What is type coercion in TypeScript?

In TypeScript, type coercion is the automatic conversion of values from one data type to another.

Rules for type coercion

Type coercion is generally triggered by context and the use of operators when the language rules don’t receive variables of a specific data type. In the latter case, TypeScript automatically converts values between compatible data types without explicit instructions.

Following are the cases of type coercion:

String to numeric conversion.
Numeric to string conversion.
Truthy and Falsy conversion in a boolean context.

Example

Consider the code snippet below, which demonstrates the above mentioned type coercion cases in TypeScript:

//Example 1: String to numeric coercion
let numericString: string = "1";
let result: number = 5 + +numericString; // Implicit coercion: +"1" converts the string to a number
console.log("Example 1: ",result); // Output: 6
//Example 2.1: Numeric to string coercion
let stringVar: string = "10"
let coercedString: string = 5 + 10 + stringVar;
console.log("Example 2.1: ",coercedString)
//Example 2.2: Numeric to string coercion
let numericVar: number = 5;
let concatenatedString: string = "The value is " + numericVar; // Coerces numberValue to a string for concatenation
console.log("Example 2.2: ",concatenatedString)
//Example 3.1: Truthy and falsy coercion
console.log("Example 3.1: ",false || numericVar)
//Example 3.2: Truthy and falsy coercion
console.log("Example 3.2: ",true && null)

Code explanation

In this code example:

Line 2-4: We’ve performed type coercion from string to numberic data type. The expression +numericString is a key player that converts a string to a number using the unary plus operator.
Line 7-9: We’ve performed string to numeric type coercion. Here the + operator is acting as a concatenation operator and concatenating the numeric sum 15 with the string type variable.
Line 11-13: We’ve again performed number to string coercion, but this time with a sentence.
Line 16: This is an example of conversion of a number to a truthy or falsy value. The expression false || numericVar is evaluated with boolean rules, and since numericVar is considered truthy, it is returned as the result.
Line 18: This is another example of a truthy and falsy coercion. In the expression true && null, null is percieved as a falsy value. The result of this boolean expression is the first falsy value of the expression i.e. null.

Type coercion restrictions in TypeScript

Although TypeScript offers type coercion, it still enforces type safety and static type checking. Therefore, some type coercion expressions may lead to compilation errors if the conversion is impossible or violates the language rules. Following is an example of the expressions that will result in errors: