Typescript: Anticipate either an object or a boolean value of false

Question

Typescript: Anticipate either an object or a boolean value of false

When I receive a response from an API, it can be one of two options:

geoblocked: false

or

geoblocked: {
  country: {
      id: number;
    }
}

I initially created the interface below to handle this situation:

export interface Country {
  country: {
    id: number;
    name: string;
    countryCode: string;
  };
}
export interface SiteDataType {
  geoblocked: Country | boolean;
}

However, when the 'country' object exists, I encountered a type error. How can I properly handle the expected type of boolean false?

typescript

Answer 1

Answer №1

Issue doesn't lie with boolean one, but rather with the Country interface:

Here are the interfaces:

export interface Country {
  country: {
    id: number;
    name: string;
    countryCode: string;
  };
}
export interface SiteDataType {
  geoblocked: Country | boolean;
}

These objects work fine:

let myvar: SiteDataType = {
    geoblocked: false
}

myvar = {
    geoblocked: {
        country: {
            id: 1,
            name: "hi",
            countryCode: "ES"
        }
    }
}

However, this object is invalid:

myvar = {
    geoblocked: {
        country: {
            id: 1
        }
    }
}

because both 'name' and 'countryCode' are required. To make them not required, add a '?' to the properties in the 'Country' interface:

export interface Country {
  country: {
    id: number;
    name?: string;
    countryCode?: string;
  };
}

Additionally, if 'true' is not a valid type for 'geoblocked', you can set it as 'false' or 'Country' instead:

export interface SiteDataType {
  geoblocked: Country | false;
}

Answer 2

Issue doesn't lie with boolean one, but rather with the Country interface:

Here are the interfaces:

export interface Country {
  country: {
    id: number;
    name: string;
    countryCode: string;
  };
}
export interface SiteDataType {
  geoblocked: Country | boolean;
}

These objects work fine:

let myvar: SiteDataType = {
    geoblocked: false
}

myvar = {
    geoblocked: {
        country: {
            id: 1,
            name: "hi",
            countryCode: "ES"
        }
    }
}

However, this object is invalid:

myvar = {
    geoblocked: {
        country: {
            id: 1
        }
    }
}

because both 'name' and 'countryCode' are required. To make them not required, add a '?' to the properties in the 'Country' interface:

export interface Country {
  country: {
    id: number;
    name?: string;
    countryCode?: string;
  };
}

Additionally, if 'true' is not a valid type for 'geoblocked', you can set it as 'false' or 'Country' instead:

export interface SiteDataType {
  geoblocked: Country | false;
}

Typescript: Anticipate either an object or a boolean value of false

Answer №1

Similar questions

Issue with NestedKeyof type arising from circularly referencing objects

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

Angular - pipe function disrupts the flow of execution

Error: An unexpected token < was caught in the TypeScript Express code

Challenges arise when integrating Angular with Firebase, particularly in the realms of authentication and user

Incorrectly, this is the inherited static method in the class

What is the process for subscribing to the ActivatedRoute change event and extracting the URL along with its parameters?

What is the rationale behind ngOnInit not being a private method in Angular?

Tips for implementing lazy loading for a section of a template in Angular 2

Improving an Angular component through refactoring

Is it possible to utilize multiple useMutation hooks within a single component?

Parameter decoration is leveraged in Aurelia factory resolver (instead of class decoration)

What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

What is the process for resetting the mat-date-range-input selection on the calendar?

Endlessly receiving NPM Docx notifications

Using TypeScript, one can easily employ a jQuery element within Vue's 'data' option

In the main file for the "use client" feature, components require serializable props. The usage of "setShow" is not valid and may cause errors (ts(71007))

The mapDispatchToProps function is failing to link the function with the props

What is the easiest way to retrieve a basic date with the month represented by a numerical

NestJS's "Exclude" decorator in class-transformer does not exclude the property as expected