如何通过控制流缩小变量类型？

Question

After having read this question , I am trying to find out, how variables can be narrowed down with the control flow. An example:

type T1 = {
  a?: {
    b: string
  }
}

const t1: T1 = {}

t1.a.b // error, possibly undefined
t1.a = { b: "foo" }
t1.a.b // works now, TS recognizes, that property a now exists

The concrete case, where I am struggling currently:

const t1: T1 = {}
t1.a = { b: "foo" }

function foo(t: T1) {
  t.a = undefined
}

foo(t1) // function foo mutates prop "a" inside to be undefined again
// t1.a = undefined  ; this would correctly emit error

console.log(t1.a.b) // ... "a" is still regarded as defined here and TS compiles successfully :/
// This will be a runtime error.

I would expect TS to recognize, that foo processes the mutable value t1 (properties in T1 do not have readonly flag). foo potentially could have changed the value (in this case it does indeed), so the compiler should reset all previous narrowing types of t1 and report a in console.log(t1.ab) as possibly undefined again.

My question now is: How sophisticated is this control flow mechanism and what rules does it obey to with regard to above example? Here is the link to the code . Thank you!

Answer 1

Function foo is typical side-effectfull function, it gets an argument, change it, and returns void . TS does follow code by top->down flow, so it checks if foo gets the proper argument, but does not control what it does with it and how it influence scope above. The only way to inform scope above what we did is to return the value. Currently the only information for outer scope about foo is that it wants T1 as an argument, and its not giving anything back.

Want to mention that, such implementation of implicit argument change is an anti-pattern also, as foo is very unsafe function to use, which does not inform on the type level what it does(it has no return). We can inform top scope about the change by returning the changed value. Consider below:

let t1: T1 = {} // change to let
t1.a = { b: "foo" }

function foo(t: T1) {
    t.a = undefined
    return t; // return what was changed
}

t1 = foo(t1) // function return mutated value
console.log(t1.a.b) // error as a is undefined

In that way TS is able to infer return of foo and its impact on the outer scope.

---

And even better is to make foo a pure function (yes this is only opinion):

function foo(t: T1) {
    return {...t, a: undefined};
}

Answer 2

You may want to check every time if a has a property b :

let c = ('b' in t1.a)? t1.a.b : undefined;

Here is a link to learn more about in operator