title: Why does destructuring props in react with Typescript function require passing an object?
body: <p>I have recently started using react with typescript and it seems like something odd is happening when I destructure props with optional / default values. For example take this function to generate a random id:</p>
  <pre><code>interface GenKeyIdProps {
    length?: number;
  }
  
  /**
   * Generate a random id (mainly for use with rendering lists of components.
   * genKeyId convert Math.random to base 36 (numbers + letters), and grab the first ${lenght} characters after the decimal.
   * @param length (optional) specify how many characters the id should be. default is 5.
   * @returns a string with number and letters of specified length.
   */
  export const genKeyId = ({ length = 5 }: GenKeyIdProps) =&gt; Math.random().toString(36).substr(2, length);
  </code></pre>
  <p>The problem is when I try to call it:</p>
  <pre><code>import { genKeyId } from '../../../helpers';
  
  interface TextWrapperProps {
    textLines: string[];
  }
  
  const TextWrapper = ({ textLines }: TextWrapperProps) =&gt; {
  
    return textLines.map(line =&gt; (&lt;div key={genKeyId()}&gt;{line}&lt;/div&gt;));
  
  };
  
  export default TextWrapper;
  </code></pre>
  <p>if I do not pass at least an empty object to genKeyId I get the following error: Expected 1 arguments, but got 0.ts(2554).</p>
  <p>Why do I need to pass an empty object? Is my GenKeyIdProps interface specifying the props need to be part of an object? I am a bit confused about this.</p>