title: Extending a TypeScript Type with an optional property
body: <p>I am working with NextJS and need to extend their <code>AppProps</code> type with an optional parameter that I have added myself <code>Layout</code>.  However the <code>AppProps</code> type is made up of many others e.g.</p>
  <p>AppProps:</p>
  <pre><code>export declare type AppProps&lt;P = {}&gt; = AppPropsType&lt;Router, P&gt;;
  </code></pre>
  <p>AppPropsType:</p>
  <pre><code>export declare type AppPropsType&lt;R extends NextRouter = NextRouter, P = {}&gt; = AppInitialProps &amp; {
      Component: NextComponentType&lt;NextPageContext, any, P&gt;;
      router: R;
      __N_SSG?: boolean;
      __N_SSP?: boolean;
  };
  </code></pre>
  <p>NextComponentType:</p>
  <pre><code>export declare type NextComponentType&lt;C extends BaseContext = NextPageContext, IP = {}, P = {}&gt; = ComponentType&lt;P&gt; &amp; {
      /**
       * Used for initial page load data population. Data returned from `getInitialProps` is serialized when server rendered.
       * Make sure to return plain `Object` without using `Date`, `Map`, `Set`.
       * @param ctx Context of `page`
       */
      getInitialProps?(context: C): IP | Promise&lt;IP&gt;;
  };
  </code></pre>
  <p>From my <code>_app.tsx</code> I want to be able to add <code>Layout</code> to <code>Component</code> with something like:</p>
  <pre><code>  Component: {
      Layout?: React.FunctionComponent;
    };
  </code></pre>
  <p>Is there a way to do this from <code>AppProps</code> or would I need to extend/intersect <code>AppPropsType</code> first with <code>Layout</code> then redeclare my own <code>AppProps</code> which uses the extended <code>AppPropsType</code>?</p>