Specify variable type passing function as a prop

Question

Have a parent component and child components. The goal is to lift the state up from the children to the parent like it is described in the official react tutorial - https://reactjs.org/docs/lifting-state-up.html.

In TypeScript one supposed to define props interface, like this:

interface TemperatureInputInterface {
  ..
  this.props.onTemperatureChange: what_type_here?
}

But what type to use in this case, since all of them give smth like:

Cannot invoke an expression whose type lacks a call signature. Type 'what_type_here' has no compatible call signatures.

If you're trying to have a parent component get state from a child, you would need to subscribe to it, most likely. I don't have code off the top of my head to explain it. Look into how child components *emit* events (like your onTemperatureChange), and how a component can handle events emitted from another component. This may help. https://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter — SaxyPandaBear, Jan 17 '18 at 14:13

score 2 · Accepted Answer · answered Jan 17 '18 at 14:14

2

You would just give it the types required by the callback, so:

interface TemperatureInputInterface {
   onTemperatureChange: (newValue: number) => void;
}

answered Jan 17 '18 at 14:14

dashton

2,684
1
18
15

Ok, and it looks like linter likes to have it: `onTemperatureChange: ((newValue: number) => void)` – 0leg Jan 17 '18 at 14:23

score 1 · Answer 2 · answered Jan 17 '18 at 14:12

You can use, for example:

interface TemperatureChangeFunc {
    (arg1: string, arg2: number): boolean;
}

interface TemperatureInputInterface {
  onTemperatureChange: TemperatureChangeFunc,
}

or simply:

interface TemperatureInputInterface {
  onTemperatureChange: (arg1: string, arg2: number) => boolean,
}

Specify variable type passing function as a prop

2 Answers2