Adjust the property to be optional or required depending on the condition using a generic type

    const controlConfig = >T extends 'input' | 'button'(config: Config<T>): Config<T> => config;

    interface Config<TYPE extends 'input' | 'button'> {
        type: TYPE;
        label: string;
        popover?: string;
        inputPlaceholder: TYPE extends 'input' ? string : never;
        key: string;
    }
    const config: Config<'input' | 'button'>[][] = [
        [
            controlConfig({
                type: 'button',
                label: 'user',
                popover: 'ID',
                key: 'user',
            }),
        ],
    ];

TS2345: Argument of type '{ type: "button"; label: string; popover: string; key: string; }' is not assignable to parameter of type 'Config<"button">'.   Property 'inputPlaceholder' is missing in type '{ type: "button"; label: string; popover: string; key: string; }' but required in type 'Config<"button">'

If there is no easy solution or preference for using a type alias, why doesn't TypeScript have something like making properties optional based on conditions?

javascripttypescript

Answer №1

When considering the type 'input' | 'button', it does indeed extend the type 'input'. This means that all objects in Config<'input' | 'button'>[][] will have a type property of 'input' | 'button' and must also include an inputPlaceholder property of type string.

Instead, what you might prefer is a union of objects differentiated by their type using Config<'input'> | Config<'button'>[][].

It's worth mentioning that using a generic may not be necessary; defining individual types and their union explicitly could be a better approach.

interface BaseConfig {
    // type: 'input' | 'button'; - can be defined but is not necessary
    label: string;
    key: string;
    popover?: string;
}
interface InputConfig extends BaseConfig {
    type: 'input';
    inputPlaceholder: string;
}
interface ButtonConfig extends BaseConfig {
    type: 'button';
}
type Config = InputConfig | ButtonConfig;

Subsequently, utilize Config[][].

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

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

What is the best way to extract information from a JSON XHR request and incorporate it into my template?

I am brand new to using Ember. Right now, my main goal is to connect to an API that provides random text and then show that text on a webpage. The specific API endpoint I am using is "" which will give back a response in JSON format. app/controllers/rando ...

javascriptjsonember.jsxmlhttprequest

`Why isn't GetServerSideProps being triggered for a nested page in Next.js when using Typescript?

I have been working on a page located at /article/[id] where I am trying to fetch an article based on the id using getServerSideProps. However, it seems that getServerSideProps is not being called at all as none of my console logs are appearing. Upon navi ...

reactjstypescriptnext.js

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

javascriptjqueryhtmlbackbone.jsurl-routing

What is the best way to merge the results of several runs of an observable function

When working with Firestore, I need to retrieve multiple documents, each with a unique sourceAddressValue. This means for a list of N strings, I may need to fetch N documents. I attempted the following approach: getLocationAddresses(addresses: string[]) { ...

angulartypescriptfirebaserxjsangularfire2

Improving mongo information using angularjs

Have an Angular and MongoDB application. This is a part of my API where I have POST and PUT requests. The POST request works fine, but when I send a PUT request, I get an error "Cannot set property 'typelocal' of undefined". However, the PUT requ ...

javascriptangularjsmongodbexpress

How does NodeJs handle ongoing tasks and processes seamlessly?

One interesting concept is the Event Loop, which accepts callbacks and executes them as needed. As far as I understand, this operates on a single thread event loop, meaning only one callback is executed at a time. Consider the following example: setInterv ...

javascriptnode.js

The term 'string' is typically employed as a data type, yet in this instance it is being utilized as an actual value

Just started working with TypeScript and encountered an issue while trying to set the state. Encountered this error message: 'string' is a type and cannot be used as a value here. const state = reactive({ user: { uid: "", ...

typescriptfirebasevue.jsvuejs3vue-composition-api

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

javahtmlangulartypescript

Effective Ways to Redirect During or After Executing the onClick Function of Button

I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...

javascripthtmlreactjshttp-redirectnext.js

What is the best way to extract an object from an array that only includes one element, and that element is an object?

Here is the output of my updated function: db.collection('SOCIAL').get().then((snapshot) =>{ snapshot.docs.forEach(doc => { tempData.push(doc.data()) }) return tempData }) I want to store these valu ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Error in node.js framework due to memory allocation issue

Hello, I'm encountering an issue while running my JavaScript program. I keep getting a memory error. Can anyone help me identify the exact problem? <--- Last few GCs ---> [12908:0000015EB93DE800] 29162 ms: Mark-sweep 1396.7 (1425.2) -> 1 ...

javascriptnode.jsexpress

assigned to a variable and accessed in a different route

Why does the "res.username" variable return as undefined in the second route even though my user needs to login before accessing any route? router.post('/login', passport.authenticate('local'), function(req, res) { res.username = r ...

javascriptnode.jsexpress

Achieving synchronous function execution with a single click in React

In my current project, I am utilizing ReactJs and Redux. I have encountered a scenario where I need to trigger two functions sequentially with just one click on the mainfunc(). The second function should only execute after the first function has complete ...

javascriptreactjsredux

jQuery Show/Hide Not Working Properly

I'm attempting to showcase one Tweet at a time and have it rotate through different tweets. I'm facing an issue where it works correctly on one type of page, but not on the other. Could this be due to a CSS precedence rule overriding the function ...

javascriptjqueryhtmlcss

Utilize TypeScript to match patterns against either a string or Blob (type union = string | Blob)

I have created a union type called DataType, type TextData = string type BinaryData = Blob type DataType = TextData | BinaryData Now, I want to implement it in a function function processData(data: DataType): void { if (data instanceof TextData) ...

typescripttypes

What is the method for incorporating an upward arrow into a select element, while also including a downward arrow, in order to navigate through options exclusively with

I have a select element that I have styled with up and down arrows. However, I am seeking assistance to navigate the options dropdown solely using these arrows and hide the dropdown list. Here is the HTML: <div class="select_wrap"> <d ...

javascriptjqueryhtmlcss

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

javascriptpythonhtmlflask

"Adding content to the DOM using AJAX, the data is showing up as plain text rather than formatted

As part of my project, I am working on incorporating data retrieved through an AJAX request into the DOM to be able to manipulate it further. However, I encountered an issue where the data displayed as a string instead of HTML when appended to the DOM. Bel ...

javascriptjqueryhtmlajaxdom

Utilizing Jquery for comparing and retrieving string arrays

Hey there! I'm currently working on a jQuery application and I'm facing an issue with comparing two arrays. Here is an example: FirstArray=["Mike","Jack"]; SecondArray=["Mike","Jack","Andy","Cruz"]; I want to find out which strings are common i ...

javascriptjqueryarrays