title: React TypeScript declare interface with props of component
body: <pre><code>import IntroductionArea from &quot;../components/IntroductionArea&quot;;
  
  interface AppSection {
    url: string;
    component: React.FC&lt;any&gt; | React.LazyExoticComponent&lt;React.FC&lt;any&gt;&gt;;
    props?: React.ComponentProps&lt;any&gt;;
  }
  
  export const appSections: AppSection[] = [
    {
      url: &quot;/home&quot;,
      component: IntroductionArea,
      props: {
        text: &quot;Hello World&quot;,
        name: &quot;Foo Bar&quot;
      }
    },
  ];
  </code></pre>
  <p>Hello. I have code that creates an array of objects which accept a component and the desired props to that component. The below code is functional but is not type-safe because the props member of the AppSection interface accepts <code>any</code>. I tried replacing <code>any</code> with <code>typeof component</code> but you cannot reference <code>component</code> in the interface which it is declared.</p>
  <p>How can I make this code type-safe while maintaining same functionality?</p>
  <p>Thanks</p>