Re-assigning to a variable with a recursive type got unexpected type narrowing result.

[ir193]

TypeScript Version: 3.9.2

Search Terms: Control Flow, Type narrowing

Expected behavior: 👍 Compile

Actual behavior: Property 'next' does not exist on type '{ type: "zero"; }'.(2339)

Related Issues: 28763

Code

type SomeType = { type : 'zero' }
              | { type : 'one', hello : string, next : SomeType };

let mutable : SomeType = { type : 'zero' };

for(let i=0; i<2; i++){
    console.log(mutable);
    if( i==0 ){
        mutable = { type : 'one', hello : "hello", next : mutable };
    } else {
        switch( mutable.type ){
            case 'zero' :
                break;
            case 'one' :
                let tmp : SomeType = mutable.next;  // this is ok 
                let s : string = mutable.hello;     // this is ok
                
                mutable = mutable.next;             // this got Property 'next' does not exist on type '{ type: "zero"; }'.
                break;
        }
    }
}

In the case 'one' branch, mutable should be narrowed to { type : 'one', hello : string, next : SomeType }. Accessing fields including next is OK. But when assign it back to variable mutable back, Ian error. It seems inferring mutable has the type { type : 'zero' } instead.

Output

"use strict";
let mutable = { type: 'zero' };
for (let i = 0; i < 2; i++) {
    console.log(mutable);
    if (i == 0) {
        mutable = { type: 'one', hello: "hello", next: mutable };
    }
    else {
        switch (mutable.type) {
            case 'zero':
                break;
            case 'one':
                let tmp = mutable.next; // this is ok 
                let s = mutable.hello; // this is ok
                mutable = mutable.next; // this got Property 'next' does not exist on type '{ type: "zero"; }'.
                break;
        }
    }
}

Compiler Options

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": 2,
    "target": "ES2017",
    "jsx": "React",
    "module": "ESNext"
  }
}

Playground Link: Provided

[Thrillpool]

I think this is caused by something more fundamental, namely that TypesScript isn't happy with

type SomeType = { type : 'zero' }
              | { type : 'one', hello : string, next : SomeType };

let mutable : SomeType = { type : 'zero' };

switch( mutable.type ){
    case 'zero' :
        break;
    case 'one' : // error is here, says 'zero' is not comparable to 'one'
        break;
}

If you add the type assertion like

let mutable = { type : 'zero' } as SomeType

It works.

[ir193]

I think that is actually fine (or as intended). With control flow analysis, TS can make sure when it comes to switch expression, it can only be { type:'zero' }. But control flow analysis somehow does not go into function.
The point I'm trying to say here is inconsistency. In case 'one' , accessing to hello of mutable is OK. Even accessing to hello is OK. That means TS already analyzed the type is { type : 'one', hello : string, next : SomeType }. But if you assign it back, it somehow thinks it's another type.

[Thrillpool]

Yes I understand what you mean, it does seem inconsistent. I would note that it's not quite as simple as you're describing. You're not just assigning it back, you're assigning it iteratively, so while the first call to mutable.next may be able to be verified as legitimate, subsequent calls, if you reassign, might not be.

And my initial feelings were that sicne you don't have the initial type assertion on mutable, it might be that somehow the reassignment is too narrow, and TS is always working with a narrower type then the type annotations might suggest.

All that being said, I'm confused too and have now spent a bit of my free time now trying to work it out myself. Hopefully someone can come and explain it.

[Mindar]

I think this might be related to the following problem I've just encountered in TS 3.8.3.
When I create a union of two types containing a boolean I can only return the object directly, but not if i store it in a const before returning. If I declare the false value as a false type it works even if I store it in a const before returning. Somehow my false value is not a false-type, but a boolean-type.

interface Foo {
	success: true;
	foo: number;
}

interface Bar {
	success: false;
	bar: string;
}

function works(): Foo | Bar {
	return {
		success: false,
		bar: "hello"
	};
}

function alsoWorks(): Foo | Bar {
	const result = {
		success: false as false,
		bar: "hello"
	};

	return result;
}

function fails(): Foo | Bar {
	const result = {
		success: false,
		bar: "hello"
	};

	return result;
}