Is there a way in TypeScript to warn about "1" + 1 = "11"?

Question

JavaScript is full of caveats like this one:

const arr = [1, 2, 3]

for (const i in arr) {
  console.log(i + 1)
}

The expected by unexperienced JS developer result would be 1 2 3, but actually, it's 01 11 21.

---

It looks like TypeScript is not warning about concatenating strings and numbers by default, is there a way to achieve that?

To be more precise: how can I get warnings about cases like '1' + 1

Answer 1

TS Lint can guard against using for..in improperly. https://palantir.github.io/tslint/rules/forin/

Answer 2

UPDATED VALID ANSWER Use the @typescript-eslint/restrict-plus-operands rule. Both operands must either be strings or numbers, but not a mix of both:

The eslint configuration from https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/restrict-plus-operands": "error"
  }
}

ORIGINAL

TS Lint has the 'prefer-template' rule, though I haven't tried it with this scenario. It should work, as TypeScript sees the i variable as a string type.

https://palantir.github.io/tslint/rules/prefer-template/

This rule would require you to do the following to make concatenation work:

console.log(`${i}1`);

This should at least signal to the developer that they are trying to perform concatenation.

FYI, TS Lint is being deprecated in favor of ES Lint, though I have not moved any of my projects over to that tool, yet.

UPDATED ES Lint has the same rule: https://eslint.org/docs/rules/prefer-template

Answer 3

You're concatenating on the arrays property name, not it's value. This is because for...in iterates the properties of an object. I think what you're trying to do is this:

const arr = [1, 2, 3]

for (const i in arr) {
  console.log(arr[i] + 1)
}

You can always write some code in there to validate the types of the inputs, but it is important to first understand the for...in loop - here is some documentation regarding for...in use with arrays

You could use typeof to do a simple type check in your function:

function doConcat(operand1, operand2) {
  if (typeof operand1 !== typeof operand2) { //simple typeof check
    console.log(`Cannot concat type: ${typeof operand1} with type: ${typeof operand2}`);
    return;
  }
  return operand1 + operand2;
}

const arr1 = [1, 2, 3]; //Should work - adding 2 numbers
for (const i in arr1) {
  console.log(doConcat(arr1[i], 1));
}

const arr2 = ['a', 'b', 'c']; //Should bomb - trying to concat number and string
for (const j in arr2) {
  doConcat(arr2[j], 1);
}