将扩展的反应组件 class 转换为与 typescript 一起使用

Question

I am currently attempting to convert a project from react to typescript.

So I currently have a jsx file I want to convert to tsx and the code is the following

class Button extends React.Component {


    onClickCallback = e => {
        if(this.props.onClick){
            this.props.onClick(e);
        }
    }
}  

I am wondering what the first steps would be, I need to create the props right?

props = {onClick: } // But what would it be? {}?

Thanks

Answer 1

glad you are adapting Typescript in your project:)

When using Typescript in React you would do something like below:

type ButtonProps = {
  // Function props is typed as (arg: ArgumentType) => ReturnType.
  // `event` is the argument type for the function.
  // `void` is the return type of the function.
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}

// Class component.
class Button extends React.Component<ButtonProps> {
  render() {
    return (
      <button onClick={this.props.onClick} />
    )
  }
}

// Function component.
const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return (
    <button onClick={onClick} />
  )
}

Hope this clarifies how to type React component with Typescript.