Typescript not accepting interface params

Question

In the following code the compiler is throwing error:

Expected 1 arguments, but got 3.

Can anyone explain whats wrong and what needs to be changed? I have other interface based functions that are working fine, but this function doesnt seem to be acknowledging the interface properties.

Code:

interface withTitleComponentProps {
    component: Injectable<ReactElement> | ReactElement;
    title: string | null | undefined;
    isComponent?: boolean;
  }

export const withTitleComponent = (props: withTitleComponentProps): React.ComponentType => {
  let {component, title, isComponent} = props
  if (isComponent) {
    return titleComponent({
      NewComponent: withInjectedProps(component as Injectable<ReactElement>),
      title: title,
    });
  } else {
    return titleElement({
      NewComponent: component as ReactElement,
      title: title,
    });
  }
};

@youdateme When calling the function as: withTitleComponent( LandingScreen, null, true) — polar
– polar, Commented Mar 15, 2022 at 19:54
But why are you calling it with 3 arguments when you only specify 1 (props)... — k.tten
– k.tten, Commented Mar 15, 2022 at 19:55
You probably wanted to call it as withTitleComponent( {LandingScreen, null, true}) — Chai
– Chai, Commented Mar 15, 2022 at 19:56
@youdateme ive defined props like this before via interface without issue, i guess theres a misunderstanding on my side. Im trying to define the props in interface as props and types — polar
– polar, Commented Mar 15, 2022 at 19:56

Alex Wayne · Accepted Answer · 2022-03-15 20:10:14Z

2

In your comment you say you are calling this function like:

withTitleComponent( LandingScreen, null, true)

However, you only declare that with one argument:

export const withTitleComponent = (props: withTitleComponentProps): React.ComponentType => {

Since withTitleComponentProps is a type that has properties, did you mean to pass in an object with those properties?

withTitleComponent({
  component: LandingScreen,
  title: null,
  isComponent: false,
})

Alternatively, declare it with three arguments:

export const withTitleComponent = (
  component: Injectable<ReactElement> | ReactElement;
  title: string | null | undefined;
  isComponent?: boolean;
): React.ComponentType => {}

withTitleComponent(LandingScreen, null, true)

Or use a tuple (as suggested by @youdateme)

type withTitleComponentProps = [
    component: Injectable<ReactElement> | ReactElement,
    title: string | null | undefined,
    isComponent?: boolean,
]

export const withTitleComponent = (...args: withTitleComponentProps): React.ComponentType => {}

withTitleComponent(LandingScreen, null, true) // works

Just note that this is not an object with 3 properties. It is a fixed length array with three element.

edited Mar 15, 2022 at 20:10

answered Mar 15, 2022 at 19:57

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

6 Comments

polar Over a year ago

this fails with error: Syntax error: ':' expected (66:20)

polar Over a year ago

While your updated answer works, id like to call to keep the call structure in tact rather than specifying a whole object, is there a way the interface/function could be modified to do this?

polar Over a year ago

Per your update -> yes this is how i did it before, but id like to abstract the property definitions into an interface, is this not possible?

k.tten Over a year ago

Use a tuple type [component: ..., title: ..., isComponent?: ...] and then in the function define it as (...args: MyTupleType) => ...

polar Over a year ago

@youdateme could you provide an example please?

|

k.tten · Accepted Answer · 2022-03-15 20:10:57Z

1

Use a tuple type [component: ..., title: ..., isComponent?: ...] and then in the function define it as (...args: MyTupleType) => ...

Example:

type WithComponentTitleProps = [
    component: Injectable<ReactElement> | ReactElement,
    title: string | null | undefined,
    isComponent?: boolean,
];

const withComponentTitle = (...args: WithComponentTitleProps) => ...

Then you can reuse the type anytime you wish to have the same parameters as withComponentTitle

answered Mar 15, 2022 at 20:10

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

3 Comments

polar Over a year ago

how would you access the args within the function? They are reporting "cannot find" on each

k.tten Over a year ago

Destructure them with const [component, title, isComponent] = args;?

polar Over a year ago

thank you, it is working as expected now!

Collectives™ on Stack Overflow

Typescript not accepting interface params

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related