"Exploring the Concept of Tuple Narrowing and Type

Question

"Exploring the Concept of Tuple Narrowing and Type

Is there anyone who can assist me in comprehending the scenario below:

export function functionThatReturnsTurpleObjects():
  | [{ a: number }, undefined]
  | [undefined, { a: number }]
 {
  if (Math.random() > 0.5) {
    return [undefined, { a: 1 }];
  }
  return [{ a: 1 }, undefined];
}

function execute1() {
  const [res1, res2] = functionThatReturnsTurpleObjects();
  if (res2) {
    return res2;
  }
  // res1 cannot be undefined and TypeScript recognizes it
  res1.a;
}


function functionThatReturnsTurpleObjectAndString():
  | [{ a: number }, undefined]
  | [undefined, string] {
  if (Math.random() > 0.5) {
    return [undefined, "1"];
  }
  return [{ a: 1 }, undefined];
}

function execute2() {
  const [res1, res2] = functionThatReturnsTurpleObjectAndString();
  if (res2) {
    return res2;
  }
  // res1 cannot be undefined but TypeScript throws error "TS18048: res1 is possibly undefined"
  res1.a;
}

Playground

I would anticipate that both scenarios should function identically.

typescript

Answer 1

Answer №1

The key distinction between the initial and subsequent examples lies in the return types of the functions.

In the first example, the return is

[{ a: number }, undefined] | [undefined, { a: number }]

Conversely, the second example results in:

[{ a: number }, undefined] | [undefined, string]

Now, your objective is to narrow down the first tuple item (index 0) based on the value of the second item (index 1). This form of control flow analysis for destructured discriminated unions was integrated in microsoft/TypeScript#46266 and unveiled with TypeScript version 4.6.

The narrowing process in the first example proceeds smoothly as examining for a truthy value (if(res2)...) effectively distinguishes { a: number } from undefined. Simply put, an entity that can be assigned to { a: number } cannot be considered as falsy.

On the other hand, an empty string (="") aligns with undefined in a boolean context due to both values being coerced to false. To tackle this scenario, a more specific if condition like res !== undefined is recommended.

function execute2() {
  const [res1, res2] = functionThatReturnsTurpleObjectAndString();
  if (res2 !== undefined) {
    return res2;
  }

  return res1.a;
  //     ^? const res1: {a: number; }
}

TypeScript Playground

Answer 2

The key distinction between the initial and subsequent examples lies in the return types of the functions.

In the first example, the return is

[{ a: number }, undefined] | [undefined, { a: number }]

Conversely, the second example results in:

[{ a: number }, undefined] | [undefined, string]

Now, your objective is to narrow down the first tuple item (index 0) based on the value of the second item (index 1). This form of control flow analysis for destructured discriminated unions was integrated in microsoft/TypeScript#46266 and unveiled with TypeScript version 4.6.

The narrowing process in the first example proceeds smoothly as examining for a truthy value (if(res2)...) effectively distinguishes { a: number } from undefined. Simply put, an entity that can be assigned to { a: number } cannot be considered as falsy.

On the other hand, an empty string (="") aligns with undefined in a boolean context due to both values being coerced to false. To tackle this scenario, a more specific if condition like res !== undefined is recommended.

function execute2() {
  const [res1, res2] = functionThatReturnsTurpleObjectAndString();
  if (res2 !== undefined) {
    return res2;
  }

  return res1.a;
  //     ^? const res1: {a: number; }
}

TypeScript Playground

"Exploring the Concept of Tuple Narrowing and Type

Answer №1

Similar questions

"Exploring the method to navigate through a nested Firebase collection linked to its parent collection

Navigating the thorny dilemma of catch-22 situations when dealing with parser

Why do callbacks in Typescript fail to compile when their arguments don't match?

I am looking for guidance on how to effectively utilize a JSON object that is stored in the constructor of my component, particularly when triggering

Problem encountered during NextJS build: ReferenceError - 'window' is undefined

Resolve the error message "Class is not a constructor" which arises while utilizing namespaces in TypeScript with WebPack

Ways to maximize your final export value

Angular 7: Polyfill required for npm package to support 'Class'

Unable to globally override the default font in MUI theme

Make the text stand out by highlighting it within a div using a striking blue

typescript set parameter conditionally within a function

Angular2 Animation for basic hover effect, no need for any state change

Struggling to convert my VueJS component from JavaScript to TypeScript, feeling a bit lost

Managing Prisma error handling in Express

How can a child class access this.props within a function that overrides a parent class's function?

In Angular, you can easily modify and refresh an array item that is sourced from a JSON file by following these steps

What is the best way to perform a query in Angular using Firebase Firestore?

Angular 2 - Dragula for ng2

Display a React functional component

Using Checkbox from material-UI to add and remove strikethrough on a to-do list task