Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.
In programming, type conversion is the process of converting data of one type to another. For example, converting string data to number.
There are two types of type conversion in TypeScript:
- Implicit Conversion - Automatic type conversion.
- Explicit Conversion - Manual type conversion.
Note: TypeScript does not change how the JavaScript engine handles conversion. It only ensures that you intentionally perform conversions and catch mistakes early.
TypeScript Implicit Conversion
In certain situations, JavaScript automatically converts data types during execution. Since TypeScript compiles to JavaScript, it preserves this behavior — this is known as implicit type conversion. For example,
let result: any;
// Convert number to string
result = "3" + 2;
console.log(result, "-", typeof result);
// Convert boolean to string
result = "3" + true;
console.log(result, "-", typeof result);
// Convert null to string
result = "3" + null;
console.log(result, "-", typeof result);
Output
32 - string 3true - string 3null - string
In this example, we performed implicit type conversion using the + operator with a string and another data type.
Here,
"3" + 2- Converts the number 2 to string and joins it to"3", resulting in the string"32"."3" + true- Converts the booleantrueto string and joins it to"3", resulting in the string"3true"."3" + null- Converts null to string and joins it to"3", resulting in the string"3null".
Note: The typeof operator gives the data type of the variable.
TypeScript Explicit Conversion
In explicit type conversion, you manually convert one type of data into another using built-in functions of JavaScript. For example,
let result: any;
// Convert string to number
result = Number("5");
console.log(result, "-", typeof result);
// Convert boolean to string
result = String(true);
console.log(result, "-", typeof result);
// Convert number to boolean
result = Boolean(0);
console.log(result, "-", typeof result);
Output
5 - number true - string false - boolean
Here,
Number("5")- Changes the string"5"into the number 5.String(true)- Turns the booleantrueinto the string"true".Boolean(0)- Returnsfalsebecause 0 is a falsy value in JavaScript. Since TypeScript compiles to JavaScript, this behavior is preserved at runtime.
More on TypeScript Type Conversion
When you need to perform arithmetic operations with numeric strings in TypeScript, it's best to explicitly convert them using the Number() function.
This is because TypeScript may show a type error even though JavaScript allows implicit coercion at runtime.
Let's look at an example.
// Numeric string used with - , / , *
// results in number type
let result: number;
result = Number("4") - Number("2");
console.log(result, "-", typeof result);
result = Number("4") - 2;
console.log(result, "-", typeof result);
result = Number("4") * 2;
console.log(result, "-", typeof result);
result = Number("4") / 2;
console.log(result, "-", typeof result);
Output
2 - number 2 - number 8 - number 2 - number
The table shows the conversion of different values to String, Number, and Boolean in TypeScript.
| Value | String Conversion | Number Conversion | Boolean Conversion |
|---|---|---|---|
1 |
"1" |
1 |
true |
0 |
"0" |
0 |
false |
"1" |
"1" |
1 |
true |
"0" |
"0" |
0 |
true |
"ten" |
"ten" |
NaN |
true |
true |
"true" |
1 |
true |
false |
"false" |
0 |
false |
null |
"null" |
0 |
false |
undefined |
"undefined" |
NaN |
false |
'' |
"" |
0 |
false |
' ' |
" " |
0 |
true |
Understanding the rules for type conversion is crucial for avoiding unexpected results in your TypeScript code.
Here are some key points:
- Operations involving binary
+will convert numbers to strings in the case of string and number concatenation. - Logical operations convert operands to boolean values.
- Operators like
-,*, and/convert strings to numbers at runtime, but TypeScript may require explicit conversion for type safety. - Converting complex types (like objects) to primitives may result in data loss or unexpected string output.
By itself, TypeScript doesn't allow type conversions during runtime. All runtime type conversions/coercions are carried out by JavaScript.
What TypeScript does offer in addition to JavaScript is type assertion, where you manually tell TypeScript the type of a value.
Type assertion doesn't change the value at runtime; it only tells TypeScript to treat the value as a specific type during compile time. For example,
let value: any = "hello";
let strLength = (value as string).length;
console.log(strLength);
// Output: 5
Here, we are telling TypeScript to treat value as a string, so that we can safely access the string's length property.
To learn more, visit TypeScript Type Assertion.
Also Read: