26

I'm trying to use the --strict option on tsc but I ran into the following "weird" case that I don't seem to understand.

If I write:

function testStrict(input: {query?: {[prop: string]: string}}) {
  if (input.query) {
    Object.keys(input.query).forEach(key => {
      input.query[key];
    })
  }
  return input;
}

the compiler complains about:

test.ts(5,9): error TS2532: Object is possibly 'undefined'.

(the offending line is input.query[key];)

What I don't understand is, I have already checked for undefined with the if guard on the first line of the function if (input.query), so why does the compiler think it could possibly be undefined?

I fixed this by adding another identical guard before the object access, like:

function testStrict(input: {query?: {[prop: string]: string}}) {
  if (input.query) {
    Object.keys(input.query).forEach(key => {
      if (input.query) {
        input.query[key];
      }
    })
  }
  return input;
}

but I don't understand why another identical line would be required.

Marco
  • 363
  • 1
  • 4
  • 8
  • 1
    Although this doesn't make sense for `forEach` which runs synchronously, it does make sense in the general case, when we consider callback functions. If that function you had passed was a callback function, it might not be called until some point in the future, by which time the `input` object could have changed (`input.query` could have become undefined). So TS2532 helps to save us from footguns when dealing with callbacks. Titian's solution not only satisfies TypeScript, but also prevents that particular bug from occurring. (By retaining a reference to the original `query` object.) – joeytwiddle Nov 25 '19 at 06:26

1 Answers1

24

Because the second access to input.query happens inside another function the arrow function passed in to forEach. Flow analysis does not cross function boundaries, so since you are in another function you need to test again.

An alternative to the double test would be to use a local variable, since the type of the variable is locked in on assignment and it will not include the undefined type :

function testStrict(input: { query?: { [prop: string]: string } }) {
    if (input.query) {
        const query = input.query;
        Object.keys(input.query).forEach(key => {
            query[key];
        })
    }
    return input;
}
Titian Cernicova-Dragomir
  • 230,986
  • 31
  • 415
  • 357