typescriptに反応成分を強くタイプする方法は？

Question

私はComponentのRouteComponentPropsを含む反応のための強く型付けされた基底クラスを作成しようとしています。私IComponentPropsが、私はそれが望んでいたように、TPropsを拡張することはできませんので、これは、動作していない

import * as React from "react"; 

interface IDetailsModel { 
    show: string; 
} 

interface IComponentProps<TParams, TProps> extends ReactRouter.RouteComponentProps<TParams, {}>, TProps { 
} 

class ComponentBase<TParams, TProps> extends React.Component<IComponentProps<TParams, TProps>, {}> { 

} 

class Details extends ComponentBase<{ id: number }, { show: string; }> { 
    render() { 
     var show = this.props.show; 
     var id = this.props.params.id; 
     return (
      <div className="container"></div> 
     ); 
    } 
} 

：私は何を達成したいことは、このようなものです。

私はこのようなIComponentProps定義に具体的なインターフェースでTPropsを代用すると、すべての作品：

interface IComponentProps<TParams, TProps> extends ReactRouter.RouteComponentProps<TParams, {}>, IDetailsModel{ 
} 

は、これを達成するための他の方法はありますか？

Answer 1

私はintersection typeはそれを行う必要があることをかなり確信している：

interface IComponentProps<TParams> extends ReactRouter.RouteComponentProps<TParams, {}> {} 

class ComponentBase<TParams, TProps> extends React.Component<IComponentProps<TParams> & TProps, {}> {} 

class Details extends ComponentBase<{ id: number }, { show: string; }> { 
    render() { 
     var show = this.props.show; 
     var id = this.props.params.id; 
     return (
      <div className="container"></div> 
     ); 
    } 
}