React + TypeScript 仅允许特定类型的子级

使用React和TypeScript可以更好地开发和维护前端应用程序。其中一个强大的功能是，我们可以使用TypeScript的静态类型检查来确保我们只允许特定类型的子级组件被传递给父级组件。这样可以帮助我们在编码阶段就避免潜在的错误，并提高代码的可读性和可维护性。

tsx
import React from 'react';
type ButtonProps = {
  onClick: (event: React.MouseEvent) => void;
}
const Button: React.FC = ({ onClick, children }) => {
  return (
    
      {children}
    
  );
}
export default Button;

tsx
import React from 'react';
import Button from './Button';
type AppProps = {
  handleClick: (event: React.MouseEvent) => void;
}
const App: React.FC = ({ handleClick }) => {
  const handleButtonClick = (event: React.MouseEvent) => {
    console.log('Button clicked!');
  }
  return (
    
      Click me
    
  );
}
export default App;