How to multiple keys in typescript interface?

Question

I am developing in a React + TypeScript environment.

I want to has multiple keys to the 'content' key.

    interface IModalProps {
        isOpen: boolean;
        type: 'basic';
        content: ReactElement;
        options?: IModalOption;
}

I imagined it with the code below.

interface IModalProps {
        isOpen: boolean;
        type: 'basic';
        [content | children]: ReactElement;
        options?: IModalOption;
}

the code above means key would be 'content' or 'children'.

Is there a way to have multiple keys in the type script? thanks.

captain-yossarian from Ukraine · Accepted Answer · 2021-09-18 16:41:21Z

1

import { ReactElement } from 'react'

type IModalOption = {
    tag: 'IModalOption'
}

interface Props {
    isOpen: boolean;
    type: 'basic';
    options?: IModalOption;
}

type Union<T extends string> = T extends string ? Record<T, ReactElement> : never

type IModalProps = Props & Union<'content' | 'children'>

// error, there are no 'content' and/or 'children'
const props: IModalProps = {
    isOpen: true,
    type: 'basic',
    options: {
        tag: 'IModalOption'
    },
}

// ok
const props2: IModalProps = {
    isOpen: true,
    type: 'basic',
    options: {
        tag: 'IModalOption'
    },
    content: null as any as ReactElement
}

// ok
const props3: IModalProps = {
    isOpen: true,
    type: 'basic',
    options: {
        tag: 'IModalOption'
    },
    children: null as any as ReactElement
}

// ok
const props4: IModalProps = {
    isOpen: true,
    type: 'basic',
    options: {
        tag: 'IModalOption'
    },
    children: null as any as ReactElement,
    content: null as any as ReactElement
}

Union utility type distributes content | children.

It means that it is applied to each union. Union<'content' | 'children'> returns Record<'content, ReactElement> | Record<'children, ReactElement>.

In order to achieve desired behavior, you just need to merge base props with union:

type IModalProps = Props & Union<'content' | 'children'>

Playground

answered Sep 18, 2021 at 16:41

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hyeon__ Over a year ago

thanks, how can I access property? like const fnA = (e : IModalProps) => { const aa = e.children } ;

captain-yossarian from Ukraine Over a year ago

In order to access it, you should check whether property children exists or not with help od conditional statement of custom typeguard. typescriptlang.org/docs/handbook/… . Please see hasProperty typeguard in my blog catchts.com/FP-style#fp_utils

Elias · Accepted Answer · 2021-09-19 08:47:09Z

1

Does this do what you want?

interface IModalPropsBase {
    isOpen: boolean;
    type: 'basic';
    options?: IModalOption;
}

type IModalProps = IModalPropsBase
    & ({ content: ReactElement } | { children: ReactElement });

Or mashed into a signle type in case you prefer that:

type IModalProps =
  & { isOpen: boolean; type: 'basic'; options?: IModalOption; }
  & ({ content: ReactElement } | { children: ReactElement });

To then use it, you can utilize the in operator:

function Modal(props: IModalProps) {
    const actualContent = 'children' in props ? props.children : props.content;
    // ...
}

edited Sep 19, 2021 at 8:47

answered Sep 18, 2021 at 17:31

Elias

4,1393 gold badges29 silver badges54 bronze badges

2 Comments

Hyeon__ Over a year ago

how can I access property? like const fnA = (e : IModalProps) => { const aa = e.children } ;

Elias Over a year ago

To use it, you need to check if the property exists in the type, do something like const content = 'children' in props ? props.children : props.content;

Collectives™ on Stack Overflow

How to multiple keys in typescript interface?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related