CODEWITHSUNDEEP
javascriptreactjstypescript
hjrshng
hjrshng

Reputation: 1826

Typescript named function inside functional component

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[]')

Upvotes: 0

Views: 182

Answers (1)

jered
jered

Reputation: 11571

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"]> {}

Upvotes: 1

Related Questions