Tips for ensuring only one property is present in a Typescript interface

Question

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below:

export interface MyInterface  {
  name: string;
  isEasy?: boolean;
  isMedium?: boolean;
  isHard?: boolean;
}

This component must accept only one property from isEasy, isMedium, or isHard

For example:

<MyComponent name='John' /> // valid
<MyComponent name='John' isEasy /> // valid
<MyComponent name='John' isEasy isHard /> // invalid

How could this be achieved?

An attempt was made to union them as shown below without success:

interface MyInterface {
  name: string;
}

interface MyInterfaceEasy extends MyInterface {
  isEasy: true;
  isMedium?: never;
  isHard?: never;
}

interface MyInterfaceMedium extends MyInterface {
  isEasy: never;
  isMedium?: true;
  isHard?: never;
}

interface MyInterfaceHard extends MyInterface {
  isEasy: never;
  isMedium?: never;
  isHard?: true;
}

export type ExportedInterface =
  | MyInterfaceEasy
  | MyInterfaceMedium
  | MyInterfaceHard;

When tested with:

<MyComponent name='John' isEasy />

The following error was encountered:

Types of property 'isEasy' are incompatible.
Type 'boolean' is not assignable to type 'undefined'

javascript reactjs typescript interface

Answer 1

Answer №1

To ensure one difficulty is always true and the rest are set to false, you can use a ternary operator in your props. This approach allows you to omit all props except for one. Setting two difficulties to true will result in both being unable to be assigned to ExportedInterface in Typescript, causing an error.

An example of this technique can be found here or on the Typescript playground:

interface MyInterface {
  name: string;
}

interface MyInterfaceEasy extends MyInterface {
  isEasy?: true;
  isMedium?: false;
  isHard?: false;
}

interface MyInterfaceMedium extends MyInterface {
  isEasy?: false;
  isMedium?: true;
  isHard?: false;
}

interface MyInterfaceHard extends MyInterface {
  isEasy?: false;
  isMedium?: false;
  isHard?: true;
}

export type ExportedInterface =
  | MyInterfaceEasy
  | MyInterfaceMedium
  | MyInterfaceHard;

declare const Component: FC<ExportedInterface>;

// OK
<Component name='none' />;
<Component name='easy' isEasy />;
<Component name='medium' isMedium />;
<Component name='hard' isHard />;
// Not OK
<Component name='mix' isEasy isHard />;

Another approach is to have one prop that specifies the difficulty level as 'easy', 'medium', or 'hard'. This limits the selection to only one difficulty at a time.

You can explore this method here or on the Typescript playground:

interface MyInterface {
  name: string;
  difficulty?: 'easy' | 'medium' | 'hard';
}

Answer 2

To ensure one difficulty is always true and the rest are set to false, you can use a ternary operator in your props. This approach allows you to omit all props except for one. Setting two difficulties to true will result in both being unable to be assigned to ExportedInterface in Typescript, causing an error.

An example of this technique can be found here or on the Typescript playground:

interface MyInterface {
  name: string;
}

interface MyInterfaceEasy extends MyInterface {
  isEasy?: true;
  isMedium?: false;
  isHard?: false;
}

interface MyInterfaceMedium extends MyInterface {
  isEasy?: false;
  isMedium?: true;
  isHard?: false;
}

interface MyInterfaceHard extends MyInterface {
  isEasy?: false;
  isMedium?: false;
  isHard?: true;
}

export type ExportedInterface =
  | MyInterfaceEasy
  | MyInterfaceMedium
  | MyInterfaceHard;

declare const Component: FC<ExportedInterface>;

// OK
<Component name='none' />;
<Component name='easy' isEasy />;
<Component name='medium' isMedium />;
<Component name='hard' isHard />;
// Not OK
<Component name='mix' isEasy isHard />;

Another approach is to have one prop that specifies the difficulty level as 'easy', 'medium', or 'hard'. This limits the selection to only one difficulty at a time.

You can explore this method here or on the Typescript playground:

interface MyInterface {
  name: string;
  difficulty?: 'easy' | 'medium' | 'hard';
}

Answer 3

Answer №2

To achieve the desired outcome, consider updating your code as follows:

interface MyBaseInterface {
  name: string;
}

interface MyInterfaceEasy extends MyBaseInterface {
  isEasy?: boolean;
}

interface MyInterfaceMedium extends MyBaseInterface {
  isMedium?: boolean;
}

interface MyInterfaceHard extends MyBaseInterface {
  isHard?: boolean;
}

export type ExportedInterface =
  | MyInterfaceEasy
  | MyInterfaceMedium
  | MyInterfaceHard;

By making these adjustments, your code should function correctly.

Answer 4

To achieve the desired outcome, consider updating your code as follows:

interface MyBaseInterface {
  name: string;
}

interface MyInterfaceEasy extends MyBaseInterface {
  isEasy?: boolean;
}

interface MyInterfaceMedium extends MyBaseInterface {
  isMedium?: boolean;
}

interface MyInterfaceHard extends MyBaseInterface {
  isHard?: boolean;
}

export type ExportedInterface =
  | MyInterfaceEasy
  | MyInterfaceMedium
  | MyInterfaceHard;

By making these adjustments, your code should function correctly.

Tips for ensuring only one property is present in a Typescript interface

Answer №1

Answer №2

Similar questions

Update the Vue component upon fetching new data

Tips for adjusting the location of material-ui's dialog box

Why does Popover in Material-UI hide the backdrop of the Modal?

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

Tips for arranging various information into a unified column within an Antd Table

Is there a way to end my session in nextAuth on NextJS 14?

Prevent encountering the error message "Cannot read property of undefined" while mapping data

I'm looking for the configuration of function definitions for the Jasmine npm module within an Angular project. Can

"Optimizing navigation with dynamic link routing in AngularJS

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

Does jqgrid navgrid have an event called "on Refresh"?

Issue with linear Graham scan method causing failure when computing convex hull of basic polygon

Adjust the size of every card in a row when one card is resized

Encountering Unmet Dependency Issue When Running 'npm install' on Laravel in Windows 8

Handling dynamic routes with React Router 4 and the 404 path

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

What's the best way to alter the behavior of scrollToFirstError in antdesign form customization

What is the best way to set up jest to generate coverage reports for Selenium tests?

React Checkbox Tree implemented with the Material-UI and Formik libraries. Elevate your ReactJS development with this

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?