2016-10-26 72 views
0

我正在嘗試爲反應Component創建強類型的基類,其中包括RouteComponentProps。我想實現的是這樣的:如何在打字稿中強類型反應組件?

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

當我用替代混凝土界面TProps在IComponentProps定義這樣的,一切正常:

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

是否有任何其他的方式來實現這一目標?

回答

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> 
     ); 
    } 
} 
+0

它沒有工作,非常感謝。有趣的是我以前試過這個,但看起來像ReSharper報告這個問題是不正確的。在您的答案之後,我已經檢查了ReSharper關閉並且它工作。 – mmoron

相關問題