Typescript `Operator '+' cannot be applied to types` error occurs even though all cases are covered

Question

Here is the code.

type Combinable = string | number;

function add(n: Combinable, b: Combinable) {
    if (typeof n === 'string'&& typeof b ==='string') {
        return n.toString() + b.toString();
    } else if (typeof n === 'string'&& typeof b ==='number') {
        return n.toString() + b.toString();
    } else if (typeof n === 'number'&& typeof b ==='string') {
        return n.toString() + b.toString();
    } else {
        // here raises error
        // Operator '+' cannot be applied to types 'Combinable' and 'Combinable'.ts(2365)
        return n + b;
    }
}

// But it works fine when I change "and" operator to "or" operator.
function add(n: Combinable, b: Combinable) {
    if (typeof n === 'string' || typeof b ==='string') {
        return n.toString() + b.toString();
    } else {
        return n + b;
    }
}

As you can see, I got the error on the last line n + m.

I thought it should work if I cover all cases, but the error still remains.

What am I missing here?

CertainPerformance · Accepted Answer · 2021-03-31 04:19:12Z

1

The problem is that the type comparisons you're doing in the if statements with && can't narrow down the type of any individual parameter.

After doing

if (typeof n === 'string' && typeof b ==='string') {

TS isn't smart enough to recognize that this means that either n or b is not a string: both n and b are still typed as Combinable.

Using ||, on the other hand, makes it parseable, because it's absolutely certain that both n and b are not strings after that branch ends.

One way to fix it would be to nest the if/elses:

function add(n: Combinable, b: Combinable) {
    if (typeof n === 'string') {
        if (typeof b === 'string') {
            return n.toString() + b.toString();
        } else if (typeof b === 'number') {
            return n.toString() + b.toString();
        }
    } else if (typeof n === 'number') {
        if (typeof b === 'string') {
            return n.toString() + b.toString();
        } else {
            return n + b;
        }
    }
}

(can also use just else instead of else if(cond), since there are no other alternatives)

answered Mar 31, 2021 at 4:19

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JunKim Over a year ago

Thank you first, I understand it as following, correct me if I am wrong plz. When I use (A && B) condition, TS doesn't know A evaluation result when it evaluates B condition. Hence the error raises. When using | operator, neither n nor b are string, so both are evaluated as the remaining type number. That's why it doesn't complain. Am I right?

CertainPerformance Over a year ago

Not exactly - Inside the branch, they're narrowed properly, but after exiting the branch and going to an else, TS can't know why the branch wasn't taken - it doesn't take into consideration the two or three possible type combinations that produces that outcome. If you do A && B, you narrow down A and B inside that branch, but not outside it. If you do A || B, you narrow down A and B outside that branch, but not inside it.

realxiaoyu · Accepted Answer · 2022-02-08 09:00:43Z

0

type Param = string | number;

function add(a: Param, b: Param) {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  return a.toString() + b.toString();
}

add(1, '2');
add(1, 2);
add('1', '2');

answered Feb 8, 2022 at 9:00

realxiaoyu

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Typescript `Operator '+' cannot be applied to types` error occurs even though all cases are covered

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related