Type of parameter that changes based on certain conditions

I need help with a coding snippet

interface IProps {
  isEdit: boolean;
  menuOpenId: number | boolean
}

function useMenuForm({ isEdit, menuOpenId }: IProps){...}

Any suggestions on how to set menuOpenId as type number when isEdit is true, otherwise keep it as a boolean?

Answer №1

To distinguish the interfaces, you can utilize boolean literal types as outlined in the documentation. Subsequently, employ a union type to define IProps.

interface IPropTrue {
  isEdit: true;
  menuOpenId: number
}

interface IPropFalse {
  isEdit: false;
  menuOpenId: boolean
}

type IProps = IPropTrue | IPropFalse

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I keep getting an error message that says "The JSX element type does not have any construct or call signatures."

I am currently developing an application that takes user input through buttons and creates an array. However, when I attempt to display the array, I encounter a JSX element type error. import { Delete } from "lucide-react" export function Passwo ...

Why is it that TypeScript's flow analysis does not extend to the 'else' block?

Consider the code below: function f(x : number) { if (x === 1) { if (x === 2) {} // error } else { if (x === 1) {} // OK } } The compiler flags an error on x === 2. This is because if the code reaches this block, x must be ...

Utilize a select dropdown in a React table to effectively sort and organize data

I attempted to sort the table data by using one of the values in the table with a select dropdown. I loaded all the table data using JSON. Despite trying to filter the data, my code didn't work as expected. Can someone assist me? What I'm aiming ...

Is it possible to programmatically trigger the OnChangeFile event in Angular without relying on a button click?

Is there a way to automatically trigger file upload to AWS without having to click the "choose file" button? Here is the code in my .html file: <div class="content"> <input (change)="onChangeFile($event)" type="file&quo ...

Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet: public defaultStyles = { firstDesignBackgroundColor: '#a31329', firstDesignFontColor: '#ffffff', secondDesignBackgroundColor: '#d1 ...

The names of properties in Typescript are determined by the values of the outer type properties

In my project, I have various interfaces (or types) defined as follows: export type simpleValue = string | number | boolean | Date | null; export interface Options { inline?: OptionsItem[] | unknown[]; promptField?: string; selectedValues?: unknown[ ...

The issue lies in attempting to assign an 'Observable<number[]>' to a parameter expecting an 'Observable<ProjectObject[]>'. This obstacle must be overcome in order to successfully create a mock service

I am currently working on setting up a mock service for unit testing, but I am facing an issue where the observable is not returning the expected fake value. Can someone please assist me in resolving this problem and also explain what might be wrong with m ...

The current state of this scenario is not clearly defined within the parent class

Here is the scenario that caught my attention: abstract class Base { public _obj = { name: 'Test' } print1() { console.log(this._obj) } print2() { console.log(this) } } class Child extends Base { print2( ...

Accessing Nested Arrays in Angular 8: Retrieving Data in HTML Template from Multiple Layers of Arrays

Hello there. I'm using an API that gives me the following data: (4) [{…}, {…}, {…}, {…}] 0: dueDate: "2018-03-26T00:00:00" priority: {priorityId: 1, priorityName: "Critical", priorityColor: "red"} statuses: Array(1) 0: ...

Is there a way to loop through objects in Angular 2

I am working with an Array of Objects named comments, and my goal is to select only the ones that have a specific post id and copy them to another array of objects. The issue I am facing is finding a way to duplicate the object once it has been identified. ...

Guide to sorting through an array for a particular keyword

In my array, I have objects with IDs and names. For example: { [ { "id": 1, "name": "this is book", }, { "id": 2, "name": "this is a test book", }, { "id": 3, "name": "this is a desk", } ] } Now, let's say I want ...

typescript is failing to update CSSRule with the newly assigned background-color value

I am currently working on dynamically changing the CSS style (specifically background-color) for certain text on a webpage. To achieve this, I have been attempting to modify CSSRule by accessing the desired CSSRule based on selectedText. Here is the code s ...

"Why is it that the onChange method of the antd table does not return an array of numbers for selectedRowKeys

In my current project, I am working on a Nextjs application that utilizes typescript and antd. The application includes a table component from antd which allows users to select rows. const rowSelection = { onChange: (selectedKeys: any[], selectedRows: M ...

Error in Angular Apollo V3: Jest unable to locate module 'apollo-angular'

After recently updating angular apollo from version 2.6.0 to v3.0.0, my tests have been broken. I use jest for unit testing, and although the application compiles and runs without any issues, my tests cannot import any dependencies from 'apollo-angul ...

Error message: Unable to set the uploaded file in the specified state within a React application

I am currently working on a react application that involves file uploads. My goal is to update the state variable with the uploaded file in either .docx or .pdf format as soon as it is uploaded. However, when I try to set the state, it shows up as undefine ...

Supabase Authentication User Interface Error: Uncaught TypeError - Unable to access properties of null (specifically 'useState')

Concern Whenever I incorporate this Auth component into my login page, I encounter an issue. I am attempting to adhere to the guidelines provided in Supabase Auth with Next.js Pages Directory. If you suspect that this problem stems from a version discrepa ...

Tips for simulating a configuration dependency using Proxyquire in TypeScript

Within my codebase, there exists a config.ts file that contains the following method: // Config interface is utilized to specify expected values export default function getConfig(): Config { return {amount: 50} } In a specific class located at ../src ...

How can I set up a KeyboardEvent listener in JavaScript?

My attempt to use @keydown resulted in an error: Type 'Event | KeyboardEvent' is not assignable to type 'KeyboardEvent'. Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, c ...

What's stopping me from using useState() to assign API data to an array?

I have a question regarding my app that makes use of the Movies API. I am making an API request and then passing the data to an array using the useState hook. Here is a snippet of my code: const App = () => { type MovieType = { rate: string, ...

Error: the attempt to execute the mongoose connection function has failed due to it not being recognized as a valid function

Hey there, I'm encountering the error TypeError: mongoose__WEBPACK_IMPORTED_MODULE_15___default.a.connect is not a function import mongoose from "mongoose"; const dbURI = 'myurlstuffhere'; mongoose.connect(dbURI , {useNewUrlParser: ...