TYPESCRIPT

react typescript props

// Declare the type of the props
type CarProps = {
  name: string;
  brand: string;
  price;
}

// usage 1
const Car: React.FC<CarProps> = (props) => {
  const { name, brand, price } = props;
  // some logic
}

// usage 2
const Car: React.FC<CarProps> = ({ name, brand, price }) => {
	// some logic
}

ts react props type

type Props = {
  size: string;
}

const Component = ({ size = 'medium' }: Props) => (
  <div className={cn('spinner', size)} />
);

TYPESCript props class component

class Test extends Component<PropsType,StateType> {
  constructor(props : PropsType){
    	super(props)
  }
  
  render(){
   	console.log(this.props) 
    return (
     	<p>this.props.whatever</p> 
    )
  }
  
};

typescript component props

import React from 'react'
type ImageProps = {
  src: string
  alt?: string
}

const FeatureImage: React.FC<ImageProps> = ({ src }) => {
  return (
    <div className="w-[300px] md:[300px] lg:[320px] shadow-2xl font-Raleway">
      <img src={src} alt="Card Items 1" className="w-full h-auto" />
    </div>
  )
}

export default FeatureImage

get typescript props of component

type ViewProps = React.ComponentProps<typeof View>
// or
type InputProps = React.ComponentProps<'input'>

Type Props Example

function App() {
return (<div>
<Message text="rando text" />
    </div>
);
}

export default App;

type MessageProps ={
text: number

}

function Message({text}: MessageProps)
{

  return(<div>
  {text}
  </div>)
}

/*pop quiz, will the example below work?

type MessageProps ={
text: number

}
 
Answer: no, will produce an error due to wrong type
*/

props react typescript

CommandPallette({dark}:{dark:boolean})

typescript type props react

export default function MyComponent(
	{firstProp, secondProp}:{firstProp:number; secondProp:string;}
) {}

how to specified the type for form e props in typescript

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };

  // typing on RIGHT hand side of =
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}