TypescriptでMaterial-UI muiThemeableを使用する

Question

カスタムReactコンポーネントで現在のテーマの色にアクセスしようとしています。私が使用している例はMaterial UIからですhttp://www.material-ui.com/#/customization/themes

多くのバリエーションを試しましたが、Typescriptでコンポーネントをコンパイルできません。私が得るエラーは... エラーTS2345：タイプ 'typeof MainHeader'の引数は '< {}、{}>'タイプのパラメータに代入できません。

import * as React from "react"; 
import muiThemeable from 'material-ui/styles/muiThemeable'; 

interface Properties { 
    title: string 
} 

class MainHeader extends React.Component<Properties, any> { 

render() { 
    return (
    <div className='hero' > 
     <div className='logo' /> 
     <div className="bar" /> 

     <h1>{this.props.title}</h1> 
    </div> 
); 
    } 
} 

export default muiThemeable()(MainHeader); 

Answer 1

は

export const themed = muiThemeable<MainHeader, {}, {}>()(MainHeader) 

をやって

export default muiThemeable()(MainHeader); 

が同じであること... muiThemeable機能のための材料-UI定義が適切ではないように思えます コンポーネントのプロパティタイプが省略されているためコンパイルされませんそして、コンポーネントプロパティは、状態

コンパイラは、関数の制約

 export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>() 
      : (component: TComponent) => TComponent; 

と一致していません

<TComponent<P, S>,{}, {}> 

は...コンパイラを満足させるために不足している制約

を追加することができます推測します私たちはすべきです

export default (props: Properties) => muiThemeable<MainHeader, Properties, any>()(new MainHeader(props)); 

これは、Fがクラスを予期しているときに関数にインスタンスを与えています

後で実行すると...

// ...  
import Themeable from "./themeable"; 
let props = { title: "hello!" }; 
ReactDOM.render(<Themeable {...props}/>, document.getElementById("main")); 

それは

を動作しませんが、あなたがmuiThemeable定義を変更した場合：

export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>() 
     : (component: Function) => TComponent; 

、あなたが使用することができます。

export default muiThemeable<MainHeader, Properties, any>()(MainHeader); 

をTSCがエラー

を生成します。 それは

機能は右のパラメータを記述されていないビルドしません

• ：10

  が、それは

  ので、正しいことをしtranspile、および

  を動作しますが、それはOKではないだろうタイプ

• 戻される内容をTComponentが記述していないか、

それは、私たちはクラスを必要とするときにそのインスタンスを返すように見えます...タイプついに

：

は、この署名はもう少し理にかなって：

export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>(): (component: new()=> TComponent) => (new() => TComponent); 

が、見ての後source

export function muiThemeable<TComponent extends React.Component<P, S>, P extends MuiThemeProviderProps, S> (Component: new() => TComponent): React.StatelessComponent<P> 

そして、これは再書き込みまたは定義を増強して逃げるための方法かもしれません。
が機能
をラップ...と、おそらく決まり文句と読みやすくを減らすためにデコレータを使用して...

import * as React from "react"; 
    import * as ReactDOM from "react-dom"; 
    import * as injectTapEventPlugin from "react-tap-event-plugin"; 

    // Needed for onTouchTap 
    // http://stackoverflow.com/a/34015469/988941 
    injectTapEventPlugin(); 


    import darkBaseTheme from "material-ui/styles/baseThemes/darkBaseTheme"; 
    import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"; 
    import getMuiTheme from "material-ui/styles/getMuiTheme"; 
    import muiThemeable from "material-ui/styles/muiThemeable"; 

    import AppBar from "material-ui/AppBar"; 
    import MuiThemeProviderProps = __MaterialUI.Styles.MuiThemeProviderProps; 

    function Themeable<TComponent extends React.Component<P, any>, P extends MuiThemeProviderProps> (Component: new() => TComponent): new() => TComponent { 
     return muiThemeable<TComponent, P, any>()(Component as any) as any; 
    } 

    const themeable = <P, TFunction extends React.ComponentClass<P>>(target: TFunction): TFunction => { 
     return Themeable(target as any) as any; 
    }; 

    export interface MyBarProps extends __MaterialUI.AppBarProps, __MaterialUI.Styles.MuiThemeProviderProps { 
     // ... 
    } 

    @themeable 
    export class MyBar extends React.Component<MyBarProps, any> { 

     constructor(props?: MyBarProps, context?: any) { 
      super(props, context); 
     } 

     render() { 
      if (!this.props.muiTheme) { 
       throw new Error("muiTheme not Found"); 
      } 
      return (
       <AppBar {...this.props} /> 
      ); 
     } 
    } 

    const darkTheme = getMuiTheme(darkBaseTheme); 
    darkTheme.appBar.color = "red"; 

    const Main =() => (
     <MuiThemeProvider muiTheme={darkTheme}> 
      <MyBar title="My AppBar" /> 
     </MuiThemeProvider> 
    ); 

    ReactDOM.render(<Main></Main>,document.getElementById("root"));