Typescript, type guards not working correctly in async functions?

Question

I'm trying to implement an auth function for user roles using typescript and firebase/store and have noticed something strange when type guards are used in async functions. Specifically with .then().

The following is a snippet of the code with the issue (out of context for brevity):

authUser: firebase.User | null;
...

if (authUser) {
  this.user(authUser.uid)
    .get()
    .then(snapshot => {
      const dbUser = snapshot.data();
      if (dbUser && !dbUser.roles) dbUser.roles = {};
      authUser = {
          uid: authUser.uid,
          email: authUser.email,
          emailVerified: authUser.emailVerified,
          providerData: authUser.providerData,
          ...dbUser,
      };
      next(authUser);
    });
} else {
  ...
}

The typescript compiler is complaining that in the authUser = { uid: authuser.uid ... } block, authUser is possibly null. How is this possible when it's within the if statement? Does this have something to do with the fact that the function is async?

It's a trade-off in control flow analysis. Details here: github.com/microsoft/TypeScript/issues/9998 — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jan 7, 2020 at 15:50
Not really in this case. The compiler is correctly complaining, because the value of the captured reference may change by time the callback has been fulfilled. — Tim
– Tim, Commented Jan 7, 2020 at 15:53

Tim · Accepted Answer · 2020-01-07 15:50:54Z

4

While authUser was not null when you fired the promise, it MAY BE null when the promise is fulfilled depending on timing. Thus the compiler is rightly complaining that it may be null. Remember that happens later, at an undetermined time, and other code may have changed it by then.

You will need to check and handle the case in the then to handle any timing scenarios that may crop up.

answered Jan 7, 2020 at 15:50

Tim

2,9321 gold badge17 silver badges20 bronze badges

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

1 Comment

Aaron Beall Over a year ago

You can also assign this.authUser to a local const to avoid re-checking in async code.

Collectives™ on Stack Overflow

Typescript, type guards not working correctly in async functions?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related