from how many ways we can define props with typescript react

1// Declare the type of the props
2type CarProps = {
3  name: string;
4  brand: string;
5  price;
6}
7
8// usage 1
9const Car: React.FC<CarProps> = (props) => {
10  const { name, brand, price } = props;
11  // some logic
12}
13
14// usage 2
15const Car: React.FC<CarProps> = ({ name, brand, price }) => {
16	// some logic
17}
18
19

1class Test extends Component<PropsType,StateType> {
2  constructor(props : PropsType){
3    	super(props)
4  }
5  
6  render(){
7   	console.log(this.props) 
8    return (
9     	<p>this.props.whatever</p> 
10    )
11  }
12  
13};

11    const ReactFCComponent: React.FC<{title:string}> = ({children, title}) => {
22        return <div title={title}>{children}</div>
33    }

11interface OptionalMiddleName {
22    firstName: string;
33    middleName?: string;
44    lastName: string;
55}
66function Component({firstName, middleName = "N/A", lastName}:OptionalMiddleName){
77    // If middleName wasn't passed in, value will be "N/A"
88}