What is the proper typescript type for creating element

Question

What would the return type be here?

the paths value is a function that returns an element.

export type iconName = "logo";

type icon = {
    viewBox: string;
    paths: () => ??;
};

const IconSet: Record<iconName, icon> = {
    logo: {
        viewBox: "0 0 20 20",
        paths: () => (<div>...</div>),
    },
};

export { IconSet };

I just want to use it like this in js


export const test = {
  a : () => {return (
    <div>...</div>
    
  )}
}

my package.json file

and tsconfig file here

Titian Cernicova-Dragomir · Accepted Answer · 2022-01-18 07:54:15Z

1

You can return JSX.Element from e function that return a JSX element:

type icon = {
    viewBox: string;
    paths: () => JSX.Element;
};

const IconSet: Record<iconName, icon> = {
    logo: {
        viewBox: "0 0 20 20",
        paths: () => (<div>...</div>),
    },
};

Playground Link

answered Jan 18, 2022 at 7:54

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

4 Comments

minami Over a year ago

I used that but got an error. errorType 'boolean' is not assignable to type 'Element'.ts(2322) logo.ts(5, 9): The expected type comes from the return type of this signature.

Titian Cernicova-Dragomir Over a year ago

@minami The code in the playground works. Not sure why you are getting an error. If you can post an example with the failure that would help

minami Over a year ago

Yeah... As you said, it works well in Codes and Box. codesandbox.io/s/falling-glitter-ouizt?file=/src/icon.tsx Is it a matter of setting up my project? I uploaded tsconfig.json and package.json. Can you take a look?

minami Over a year ago

I solved this. It was because I used .ts, not .tsx. so foolish.

Collectives™ on Stack Overflow

What is the proper typescript type for creating element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related