strictNullCheck打字稿中的可迭代对象

Question

Having following possible issue with strictNullChecks in TypeScript (v. 3.2.1):

interface IData {
    data?: { payload: string };
}
const list: IData[] = [];
const index: number = 0;

//test a
if (list[index].data)
    list[index].data.payload = "a";

//test b
const item = list[index].data;
if (item)
    item.payload = "a";

Why does "test a" leads to a warning "object is possibly undefined" and "test b" not? I there a good reason for the behavior?

http://www.typescriptlang.org/play/#src=interface%20IData%20%7B%0D%0A%20%20%20%20data%3A%20%7B%20payload%3A%20string%20%7D%20%7C%20undefined%3B%0D%0A%7D%0D%0Aconst%20list%3A%20IData%5B%5D%20%3D%20%5B%5D%3B%0D%0Aconst%20index%3A%20number%20%3D%200%3B%0D%0A%0D%0A%2F%2Ftest%20a%0D%0Aif%20(list%5Bindex%5D.data)%0D%0A%20%20%20%20list%5Bindex%5D.data.payload%20%3D%20%22a%22%3B%0D%0A%0D%0A%2F%2Ftest%20b%0D%0Aconst%20item%20%3D%20list%5Bindex%5D.data%3B%0D%0Aif%20(item)%0D%0A%20%20%20%20item.payload%20%3D%20%22a%22%3B

Answer 1

The "closest comparable" key difference would be between:

if (list[0].data)
    list[0].data.payload = "a"; // OK

... and ...

if (list[index].data)
    list[index].data.payload = "a"; // Possibly NULL!

The answer to the question why is one different to the other is really the amount of analysis you need to perform to get to the answer during compilation. There is an interesting post on GitHub about the trade-offs in control flow analysis that helps to explain this.

In your case, the use of the variable for the index currently prevents the type guard from sticking. Your solution of an intermediate variable is a pretty pragmatic fix.

const item = list[index].data;
if (item)
    item.payload = "a";