Typescript Trying The Addition Of Two Variables But Get The Concatenation Of The Two

So, you're here because you’ve come across a common issue in TypeScript when trying to add two variables but ending up with concatenation instead. Don't worry; you're not alone in facing this challenge! Let’s dive into why this happens and how you can resolve it to work with TypeScript smoothly.

In TypeScript, when you use the `+` operator on two variables, the behavior can vary depending on the types of the variables involved. If the two variables are both strings, using the `+` operator will concatenate them together. This is the default behavior of the operator when dealing with strings.

However, if you attempt to add two variables that are of different types, TypeScript might automatically convert one or both of them to strings, leading to concatenation instead of addition. This automatic type coercion can sometimes catch developers off guard, especially if they are coming from languages with different type handling.

To ensure that TypeScript performs addition instead of concatenation, you need to explicitly cast or convert your variables to numbers before using the `+` operator. This way, TypeScript knows that you intend to perform numerical addition rather than string concatenation.

Here’s an example to illustrate this concept:

let num1: number = 5;
let num2: number = 10;

let result: number = num1 + num2;

console.log(result); // Output: 15

In the example above, we have explicitly defined `num1` and `num2` as numbers. By specifying the types, TypeScript understands that the `+` operator should perform numeric addition, resulting in the correct sum of 15. This approach eliminates the risk of unintentional string concatenation.

If your variables are dynamic or coming from user input or external sources where their types may not be guaranteed, you can use functions like `parseInt()` or `parseFloat()` to convert the variables to numbers explicitly. This way, you have more control over the type conversion process and can ensure that addition behaves as expected.

let input1: string = "5";
let input2: string = "10";

let number1: number = parseInt(input1);
let number2: number = parseInt(input2);

let sum: number = number1 + number2;

console.log(sum); // Output: 15

In the revised example, we convert the input strings `input1` and `input2` to numbers using `parseInt()` before performing addition. This approach safeguards against unintended string concatenation and produces the correct sum of 15.

By understanding TypeScript's type handling and being proactive in explicitly converting variables to the desired types, you can avoid the common pitfall of accidental string concatenation when trying to add two variables. Remember, a little type awareness goes a long way in writing clear and bug-free TypeScript code.