Let’s start off with a pop quiz, does the following code result in an error?

declare const foo: string | undefined
declare const bar: string | undefined

console.log(foo + " " + bar)

The answer: TypeScript is happy.

While this won’t result in a runtime error due to implicit conversion of undefined to 'undefined', it can result in various combinations of undefined ending up in the concatenated string.

Really what we want is for + to only work with like types, aka no implicit conversions.

ESLint

Luckily, typescript-eslint ships with the no-base-to-string rule, which results in the above code raising an error.

And once we have that enabled:

declare const foo: string | undefined
declare const bar: string | undefined

console.log(foo + " " + bar)

// eslint index.ts
//  4:13  error  Operands of '+' operation must either be both strings or both numbers. Consider using a template literal  @typescript-eslint/restrict-plus-operands
//  4:13  error  Operands of '+' operation must either be both strings or both numbers. Consider using a template literal  @typescript-eslint/restrict-plus-operands

Problem solved!

There are a couple similar rules that you might want to consider: