Wojciech Brożonowicz
Wojciech Brożonowicz
~1 min read

Categories

Tags

Typescript & React - props

  • in class components:
import {Component} from 'react';

type ClassExampleProps = {
  startValue: number;
}
class ClassExample extends Component<ClassExampleProps>{

  render(){
    return <p>{this.props.startValue}</p>
  }
}

export default ClassExample;

// usage

import ClassExample from "./ClassExample";

export default function App(){
  return(
    <div><ClassExample startValue={44}></div>
  )
}

  • in functional components:
type FunctionComponentExampleProps = {
  startValue: number;
}
const FunctionComponentExample = (props: FunctionComponentExampleProps) => {
return <p>{props.startValue}</p>;
}

export default FunctionComponentExample;

// usage

import FunctionComponentExample from "./FunctionComponentExample";

export default function App(){
  return(
    <div><FunctionComponentExample startValue={77}></div>
  )
}

  • another version with default value (when use FC We can optionally have also acces to children, and default props, but easier is just decrale props = value)
import { FC } from "react";

type FunctionComponentExampleProps = {
  readonly startValue?: number;  // optional ("?")
}
const FunctionComponentExample: FC<FunctionComponentExampleProps> = ({ startValue = 111 }) => {
return <p>{startValue}</p>;
}

export default FunctionComponentExample;

// usage

import FunctionComponentExample from "./FunctionComponentExample";

export default function App(){
  return(
    <div><FunctionComponentExample></div> // don't have to pass props, by default is 111
  )
}

That’s all!