Typescript named function inside functional component

Question

I need to type handleFoo with MyType['foo'].


type MyType {
  foo: () => void
}

const Comp: React.FunctionComponent<{}> = () => {

  function handleFoo() {}

  return ...
}

I don't want to use Anonymous function like const handleFoo: MyType['foo'] = () => {}

I also tried <MyType['foo']>function handleFoo() {} like recommended here but it's not working in tsx (Operator '>' cannot be applied to types 'string[]')

const foo: MyType["foo"] = function () {...}? Otherwise you have to type the parameters and return value separately. — jonrsharpe
– jonrsharpe, Commented Dec 31, 2020 at 11:02
I know, but I wanted to know if I could type the function directly — hjrshng
– hjrshng, Commented Dec 31, 2020 at 11:22
You'd have to use typescriptlang.org/docs/handbook/… and typescriptlang.org/docs/handbook/…, I think. — jonrsharpe
– jonrsharpe, Commented Dec 31, 2020 at 11:23
@jonrsharpe you mean like this? function handleFoo(...args: Parameters<MyType["foo"]>): ReturnType<MyType["foo"]> {} lol you're right that would technically work, verbose and funky af tho — jered
– jered, Commented Dec 31, 2020 at 11:27

jered · Accepted Answer · 2020-12-31 11:28:07Z

1

Whatever your reason for avoiding the anonymous function, you can still type a function by assigning it to a variable, even if it isn't anonymous:

const handleFoo: MyType["foo"] = function () {}

Edit: as @jonrsharpe pointed out, there are some utility classes you could use here, but the results, uh, leave something to be desired:

function handleFoo(...args: Parameters<MyType["foo"]>): ReturnType<MyType["foo"]> {}

edited Dec 31, 2020 at 11:28

answered Dec 31, 2020 at 11:10

jered

11.6k2 gold badges26 silver badges34 bronze badges

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

2 Comments

hjrshng Over a year ago

Yes I didn't want to assign to a variable but looks like it's the only way

jered Over a year ago

@HaJa nope, function declarations can not be typed based on an alias, they must be explicitly typed inline, unlike function expressions.

Collectives™ on Stack Overflow

Typescript named function inside functional component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related