Mismatched non-intersecting categories with TypeScript

Question

Mismatched non-intersecting categories with TypeScript

I have an object that I need to conditionally render some JSX based on certain properties. I want to restrict access to specific parts of the object until certain conditions are met. Here is my scenario:

const { alpha, bravo } = myObject;

if (alpha.loading === true) {
    // At this point, no properties on bravo should be accessible
  // this means
  // bravo.active must throw an undefined error here
    return "Loading"
}

if (alpha.error === true) {
    return "Error"
}

// Bravo should only be accessible here
// this means:
// type = {
//   signedIn: boolean  
//

if(bravo.signedIn === false {
   return "Guest"
}

return "Signed In"

Currently, I am using the following type definition for myObject:

type MyObjectType = {
    alpha: {
      loading: true;
    }
} | {
    alpha: {
      loading: false;
      error: true;
    }
} | {
    alpha: {
      loading: false;
      error: false;
    }
    bravo: {
      signedIn: false
    }
} | {
    alpha: {
      loading: false;
      error: false;
    }
    bravo: {
      signedIn: true;
      name: string;
    }
}

TypeScript throws an error saying

Property 'signedIn' does not exist on type MyObjectType

. How can I destructure this property along with auth but ensure that none of its properties are accessible before auth.loading === false and auth.error == false? The same applies to bravo.name, which should only be available when bravo.signedIn === true. Any assistance on this matter would be greatly appreciated.

Thank you in advance for your help!

typescript

Answer 1

Answer №1

To handle related properties effectively, I devised a method involving keeping the object myObject as a flat object with flags. The various states are defined as follows:

type State1 = {
    loading: true;
}

type State2 = {
    loading: false;
    error: true;
}

type State3 = {
    loading: false;
    error: false;
    signedIn: false;
}

type State4 = {
    loading: false;
    error: false;
    signedIn: true;
    name: string;
}

type MyObjectType = State1 | State2 | State3 | State4;

Although the types have generic names for illustrative purposes, choosing more descriptive types is recommended. An improved naming suggestion could be

type PageState = Loading | Error | Unsigned | LoggedIn

, but for now, we will stick with the generic names.

By utilizing these types, it becomes feasible to establish relationships between values and determine the state of the object using type narrowing. Let's walk through a clear example:

if (myObject.loading === true) {
    /* Only State1 inside the if */

    console.log(myObject.name);     //error - no 'name' property in State1
    console.log(myObject.signedIn); //error - no 'signedIn' property in State1
    console.log(myObject.error);    //error - no 'error' property in State1

    return "Loading";
}
/* We've filtered State1. Below `myObject` can only be State2 | State3 | State4 */

if (myObject.error === true) {
    /* Only State2 inside the if */

    if (myObject.loading === true) { //error - 'loading' cannot be true in State2
        console.log("hello")
    }
    console.log(myObject.name);      //error - no 'name' property in State2
    console.log(myObject.signedIn);  //error - no 'signedIn' property in State2

    return "Error";
}
// More logical checks...

return "Signed In";

This methodology works well when accessing properties directly from myObject. Destructuring, unfortunately, does not work due to the absence of properties in all states. For instance:

const { loading, error, signedIn, name } = myObject;

The TypeScript compiler struggles to narrow down the type even after conditional checks. This limitation is evident in scenarios where deconstructing an object leads to ambiguous typings.

In another attempt, I tried simplifying the structure by defining tuples for each state:

type StateA = [
    { error: "not logged in"; },
    never
]

type StateB = [
    { error: "not premium"; },
    never
]

type StateC = [
    { error: false; },
    { data: string }
]

Surprisingly, similar issues persisted regarding independent typing of the tuple elements. Although narrowing was effective for one item in the tuple, cohesion between both components remained elusive.

Answer 2

To handle related properties effectively, I devised a method involving keeping the object myObject as a flat object with flags. The various states are defined as follows:

type State1 = {
    loading: true;
}

type State2 = {
    loading: false;
    error: true;
}

type State3 = {
    loading: false;
    error: false;
    signedIn: false;
}

type State4 = {
    loading: false;
    error: false;
    signedIn: true;
    name: string;
}

type MyObjectType = State1 | State2 | State3 | State4;

Although the types have generic names for illustrative purposes, choosing more descriptive types is recommended. An improved naming suggestion could be

type PageState = Loading | Error | Unsigned | LoggedIn

, but for now, we will stick with the generic names.

By utilizing these types, it becomes feasible to establish relationships between values and determine the state of the object using type narrowing. Let's walk through a clear example:

if (myObject.loading === true) {
    /* Only State1 inside the if */

    console.log(myObject.name);     //error - no 'name' property in State1
    console.log(myObject.signedIn); //error - no 'signedIn' property in State1
    console.log(myObject.error);    //error - no 'error' property in State1

    return "Loading";
}
/* We've filtered State1. Below `myObject` can only be State2 | State3 | State4 */

if (myObject.error === true) {
    /* Only State2 inside the if */

    if (myObject.loading === true) { //error - 'loading' cannot be true in State2
        console.log("hello")
    }
    console.log(myObject.name);      //error - no 'name' property in State2
    console.log(myObject.signedIn);  //error - no 'signedIn' property in State2

    return "Error";
}
// More logical checks...

return "Signed In";

This methodology works well when accessing properties directly from myObject. Destructuring, unfortunately, does not work due to the absence of properties in all states. For instance:

const { loading, error, signedIn, name } = myObject;

The TypeScript compiler struggles to narrow down the type even after conditional checks. This limitation is evident in scenarios where deconstructing an object leads to ambiguous typings.

In another attempt, I tried simplifying the structure by defining tuples for each state:

type StateA = [
    { error: "not logged in"; },
    never
]

type StateB = [
    { error: "not premium"; },
    never
]

type StateC = [
    { error: false; },
    { data: string }
]

Surprisingly, similar issues persisted regarding independent typing of the tuple elements. Although narrowing was effective for one item in the tuple, cohesion between both components remained elusive.

Mismatched non-intersecting categories with TypeScript

Answer №1

Similar questions

Learn how to automatically access keys in local storage using Angular

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

What could be causing the issue with the conditional validation in my zod and react-hook-form integration?

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

How to integrate a chips feature in Angular 4 using Typescript

Using `useState` within a `while` loop can result in

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

The function res.status is not defined

What is the best way to eliminate the content of an element using javascript/typescript?

Sending data to a parent component from a popup window in Angular Material using a button click while the window is still open

What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

Steps for incorporating ProxyConfig in Angular7 Application1. First, create a new

How can we ensure in ReactJS that one API call has been completed before making another one?

Incorporating Common Types for Multiple Uses

Implement a default dropdown menu that displays the current month using Angular and TypeScript

Setting up Webhook for Clerk in a Next.js and Prisma (T3 stack) environment

Trouble encountered when attempting to call a function within another function in StencilJS

What is the reason behind the lack of exported interfaces in the redux-form typings?

What is the best way to separate a string using a comma as a delimiter and transform it into a string that resembles an array with individual string elements