title: How do make an interface for a state using generics which extend a certain object?
body: <p>I have here my interface for my state.</p>
  <pre><code>export interface IState &lt;T extends CashflowObject&gt; {
      cashflowToPost?: T;
      cashflowList: T[];
  }
  </code></pre>
  <p>which I want to use for my abstract class here:</p>
  <pre><code>export default abstract class CashflowListView&lt;T&gt; extends React.Component&lt;{}, IState&lt;T&gt;&gt; 
  
  </code></pre>
  <p>I then want to specify what type of cashflowobject I will use for other classes that implement the CashflowListView class:</p>
  <pre><code>export default class AssetList extends CashflowListView&lt;Asset&gt; 
  </code></pre>
  <p>Here is my object structure:</p>
  <pre><code>export interface CashflowObject {
      id: number;
      name: string;
      value: number;
      taxable: boolean;
  }
  
  export interface AssetLiability extends CashflowObject {
      interest: number;
  }
  export interface Liability extends AssetLiability{}
  export interface Asset extends AssetLiability{}
  </code></pre>
  <p>However I typescript complains that in the section:</p>
  <pre><code>export default abstract class CashflowListView&lt;T&gt; extends React.Component&lt;{}, IState&lt;T&gt;&gt; 
  </code></pre>
  <p>T at <code>React.Component&lt;{}, IState&lt;T&gt;&gt;</code> does not extend Cashflow object, makes sense.... but making T of type cashflow makes typescript complain in other areas like my render function in my AssetList Class:</p>
  <pre><code>    render() {
          return (
              &lt;div className=&quot;cashflow-table&quot;&gt;
                  {this.state.cashflowList.map((asset: Asset) =&gt; &lt;this.AssetEntry asset={asset} /&gt;)}
                  &lt;AssetPost listUpdateFunction={this.callApi.bind(this)}&gt;&lt;/AssetPost&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  <p>but then how would I write what I am trying to do?</p>