如何使用 typescript 在 React 功能组件中定义自定义道具？

Question

I just started a new react project with typescript and I'm having difficulty defining a custom prop in a functional component.

I looked up how to define custom props and I found a way of defining an interface detailing the type of prop I'm passing in to the function, but when I try to run it on my main App, I get an error saying

Type '{ digit: number; }' is not assignable to type 'IntrinsicAttributes'. Property 'digit' does not exist on type 'IntrinsicAttributes'. TS2322

My code:

import React from 'react';
import Button from '@mui/material/Button';
export {}


interface NumberButton {
  digit:number,
}

function NumberButton(props:NumberButton){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import ClearButton from './Components';
import NumberButton from './Components';
export default function App(){

  return (
    <div>
      <ClearButton/>
      <NumberButton digit={1}/>
    </div>
  )
}

I'm trying to get more familiar with functional components after using hooks and I'm hooked on using them.

Answer 1

export {}

Currently you're not exporting the NumberButton component, so that's the main thing that needs fixing. Additionally, you're using the same variable name for both the component and the props. Try this:

import React from 'react';
import Button from '@mui/material/Button';

interface NumberButtonProps {
  digit: number,
}

function NumberButton(props: NumberButtonProps){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

export default NumberButton;