Wrong type is generated by typescript

Question

Here is my ts code

declare function get_el(): number | null;
var el=get_el() 
export const im=function(){
  if (el==null){
    const ans= {
      exists:false
    }
    return ans
  }
  const ans2={
    value:7,    
    exists:true,

  }    
  return ans2
}()

By looking at the code, the type of im should be:

const im: {
    value: number;
    exists: boolean;
} | {
    exists: boolean;
}

But in reality it is not. the generated .d.ts reads:

export declare const im: {
    exists: boolean;
};

my question is: why is it?

Answer 1

This... is a weird one.

Changing your declaration of im to

const im = function() {
  if (el === null) {
    return {
      exists: false
    }
  }
  const ans2 = {
    value: 7,    
    exists: true,
  }   
  return ans2; 
}()

the resulting type becomes

 const im: {
    value: number;
    exists: boolean;
} | {
    exists: boolean;
}

If you further shorten it with for example

const im = function() {
  return el === null ? {
      exists: false
    } : {
    value: 7,    
    exists: true,
  } 
}()

the resulting type becomes

const im: {
    exists: boolean;
    value?: undefined;
} | {
    value: number;
    exists: boolean;
}

Even changing the declaration of el to

function get_el(): number | null {
    return Math.random() < 1 ? 1 : null;
}

const el = get_el();

so that Typescript couldn't infer anything wrong, doesn't change anything.

In the github issue created by OP it is mentioned that this is due to subtype reduction, but it feels weird that making small changes like this results in an entirely different type.

To make sure the returned type is correct, you can always explicitly set the type:

const im = function(): {
    exists: boolean;
} | {
    value: number;
    exists: boolean;
} {
  return el === null ? {
      exists: false
    } : {
    value: 7,    
    exists: true,
  } 
}()