typescript에서 반응 구성 요소를 강력하게 입력하는 방법은 무엇입니까?

Question

RouteComponentProps을 포함하여 Component의 반응을 위해 강력한 형식의 기본 클래스를 만들려고합니다. 내가 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> 
     ); 
    } 
}