Default Props in React with TS

react-ts-default-props.tsx

import React from 'react';

interface ComponentProps = {
  value: string;
  intValue: number;
}

// Inline
const component = ({ value = "default", intValue = 100 }: ComponentProps) => {

  // We don't have to check if value is undefined here, since its inline defaulted
  if (value.length > 10) {
    return (<p>Woah, too long!!</p>)                     
  }

  return (
    <p>{ value } : { intValue }</p>
  );
};

// Default Props
const component = ({ value, intValue }: ComponentProps) => {

  // TS would normally complain because it may be undefined; however, apparently there is now support for `defaultProps` in TS
  if (value.length > 10) {
    return (<p>Woah, too long!!</p>)                     
  }

  return (
    <p>{ value } : { intValue }</p>
  );
};

component.defaultProps = {
  value: 'default',
  intValue: 100
};