What is preventing typescript from inferring these linked types automatically?

Question

What is preventing typescript from inferring these linked types automatically?

Consider the following code snippet:

const foo = (flag: boolean) => {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    }
  }

  return {
    success: false,
    data: null
  }
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name); // TS error: 'result.data' is possibly 'null'
}

What prevents TypeScript from recognizing that data always exists when flag is set to true?

In this scenario, it would be beneficial if TypeScript could automatically infer the existence of data without requiring an explicit return type definition for the function.

javascript typescript type-inference

Answer 1

Answer №1

To achieve this, you have two options: use as const or implement a discriminated union for your success property.

Example using as const:

const foo = (flag: boolean) => {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    } as const; // here
  }

  return {
    success: false,
    data: null
  } as const; // here
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name);
}

Example using a union:

type Successful = {
   success: true;
   data: { name: string, age: number }
}

type Failed {
   success: false;
   data: null;
}

type Result = Successful | Failed;

function foo(flag: boolean): Result {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    };
  }

  return {
    success: false,
    data: null
  };
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name);
}

The reason behind this issue is that when simply assigning true or false, TypeScript assumes the property to be of type boolean. Therefore, in the case of data: null, it cannot guarantee that { success: true, data: null } will not occur. Additionally, there's no type information linking flag to the return type, which is where generics can be beneficial.

Answer 2

To achieve this, you have two options: use as const or implement a discriminated union for your success property.

Example using as const:

const foo = (flag: boolean) => {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    } as const; // here
  }

  return {
    success: false,
    data: null
  } as const; // here
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name);
}

Example using a union:

type Successful = {
   success: true;
   data: { name: string, age: number }
}

type Failed {
   success: false;
   data: null;
}

type Result = Successful | Failed;

function foo(flag: boolean): Result {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    };
  }

  return {
    success: false,
    data: null
  };
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name);
}

The reason behind this issue is that when simply assigning true or false, TypeScript assumes the property to be of type boolean. Therefore, in the case of data: null, it cannot guarantee that { success: true, data: null } will not occur. Additionally, there's no type information linking flag to the return type, which is where generics can be beneficial.

Answer 3

Answer №2

Perhaps this solution will work:

interface ResponseSuccess {
  success: true
  data: { name: string; age: number }
}
interface ResponseFailure {
  success: false
  data: null
}
const bar = <Flag extends boolean, Result extends Flag extends true ? ResponseSuccess : ResponseFailure>(flag: Flag): Result {
  if (flag) {
    return {
       success: true,
       data: {
         name: "Alice",
         age: 30
       }
    } as Result 
  }

  return {
    success: false,
    data: null
  } as Result 
}

Answer 4

Perhaps this solution will work:

interface ResponseSuccess {
  success: true
  data: { name: string; age: number }
}
interface ResponseFailure {
  success: false
  data: null
}
const bar = <Flag extends boolean, Result extends Flag extends true ? ResponseSuccess : ResponseFailure>(flag: Flag): Result {
  if (flag) {
    return {
       success: true,
       data: {
         name: "Alice",
         age: 30
       }
    } as Result 
  }

  return {
    success: false,
    data: null
  } as Result 
}

What is preventing typescript from inferring these linked types automatically?

Answer №1

Answer №2

Similar questions

Organize a list in AngularJS by breaking it down based on its headers and displaying them in

Using jQuery functions to disable adding or removing classes with a click event

typescript import { node } from types

Tips for safely storing JWT tokens in a react/next.js app:

The property fails to reflect changes in state

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

Why is the last move of the previous player not displayed in this game of tic tac toe?

TypeScript's Awaitable concept

Using a PHP switch case statement with an HTML multiple select dropdown

What is the best way to retrieve the promise that encountered an error in the catch block while using async/await

Leveraging Selenium for extracting data from a webpage containing JavaScript

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

Use an input of map<string,string> when passing to an angular component

Is there a way to retrieve the Response object in Express from outside the Route

Modifying property values using the onError event when encountering an error with the MUI DateTimePicker and

Navigating through async functions in an Express.js router

What's the process for setting a value in selectize.js using Angular programmatically?

Tips for converting file byte code to file form data

Send in the completed form with your chosen preferences

Provide an immutable parameter to a function that will not cause any changes