迹忆客 专注技术分享

在 React TypeScript 中将函数作为 props 传递：

1. 在组件的接口中定义函数属性的类型。
2. 在父组件中定义函数。
3. 将函数作为道具传递给子组件。

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;

该示例展示了如何使用 TypeScript 将函数作为 props 传递给 React 组件。

sum 函数接受 2 个数字类型的参数并返回一个数字。

logMessage 函数采用字符串参数并且不返回任何内容。

doSomething 函数用于演示如果您不想在将函数作为 props 传递时键入函数，如何关闭类型检查。

any 类型有效地关闭了类型检查，因此函数可以传递任何类型的参数并且可以返回任何类型的值。

如果使用类型别名而不是接口，此语法也有效。

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

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

实际函数的类型与我们在 ButtonProps 中指定的类型相匹配非常重要。

如果不匹配，我们会得到一个类型检查错误。

我们可能需要做的一件常见事情是将事件处理函数作为 props 传递。

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;

此代码片段与之前的代码片段唯一不同的是事件对象的类型。

类型因元素和事件（例如 onChange、onClick 等）而异。

我们可以通过内联编写处理函数并将鼠标悬停在 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>;
}

我们内联编写了事件处理函数，并将鼠标悬停在事件参数上以获取其类型。

另一种确定道具类型的好方法是右键单击它，然后在 IDE 中单击“转到定义”。

该示例显示了我们如何右键单击元素的样式属性并确定其类型是 CSSProperties 或 undefined。