JIYIK CN >

Passing functions as props in React TypeScript:

1. Define the type of the function property in the component's interface.
2. Define the function in the parent component.
3. Pass functions as props to child components.

interface ButtonProps {
  sum: (a: number, b: number) => number;
  logMessage: (message: string) => void;

  // 👇️ turn off type checking
  doSomething: (params: any) => any;
}

function Container({sum, logMessage, doSomething}: ButtonProps) {
  console.log(sum(10, 15));

  logMessage('hello world');

  doSomething('abc');

  return <div>Hello world</div>;
}

const App = () => {
  const sum = (a: number, b: number) => {
    return a + b;
  };

  const logMessage = (message: string) => {
    console.log(message);
  };

  return (
    <div>
      <Container sum={sum} logMessage={logMessage} doSomething={logMessage} />
    </div>
  );
};

export default App;

This example shows how to pass functions as props to React components using TypeScript.

sumThe function takes 2 arguments of type number and returns a number.

logMessageFunction takes a string argument and returns nothing.

doSomethingThe function is used to demonstrate how to turn off type checking if you don't want to type functions when passing them as props.

anytype effectively turns off type checking, so the function can be passed arguments of any type and can return a value of any type.

This syntax also works if you use a type alias instead of an interface.

type ButtonProps = {
  sum: (a: number, b: number) => number;
  logMessage: (message: string) => void;

  // 👇️ turn of type checking
  doSomething: (params: any) => any;
};

It's important that the type of the actual function matches the type we specified in ButtonProps.

If they don't match, we'll get a type checking error.

One common thing we might need to do is pass an event handler function as propsa .

type ButtonProps = {
  handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
};

function Container({handleClick}: ButtonProps) {
  return <div onClick={handleClick}>Hello world</div>;
}

const App = () => {
  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('element clicked');
  };

  return (
    <div>
      <Container handleClick={handleClick} />
    </div>
  );
};

export default App;

The only difference between this code snippet and the previous one is the type of the event object.

The type varies by element and event (eg onChange, onClick, etc.).

We can determine the type of event by writing the handler function inline and hovering the mouse over the event arguments in the IDE.

interface ButtonProps {
  handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

function Container({handleClick}: ButtonProps) {
  // 👇️ wrote event handler inline
  return <div onClick={event => console.log(event)}>Hello world</div>;
}

We wrote the event handler function inline and hovered over the event argument to get its type.

Another good way to determine the type of a prop is to right-click it and click Go to Definition in the IDE .

This example shows how we can right-click on an element's style property and determine if its type is CSSPropertiesor undefined.