が反応＆活字体：高次コントロール＆ジェネリック型

Question

&活字体を反応させるのでは（使用タイプは/ 15.0.27を反応させる@）私はこの高次 コントロールを持つジェネリック型を使用する場合、私はこのエラーを取得していますとの交点のタイプ：

TS2322:Type '{}' is not assignable to type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<ITypeComponentProps, ComponentState>> & ...'. 
    Type '{}' is not assignable to type 'Readonly<ITypeComponentProps>'. 
    Property 'data' is missing in type '{}'. 

私はタイプReact.ComponentClass<ITestComponentProps>（すなわち空の小道具を持つ）の制御を返すために、私のwithTestData機能を期待し、私が小道具でdataを渡す必要があることを私に語っています。しかし、ジェネリックタイプITypeTestProps<TData> を非ジェネリックタイプITypeTestPropsに置き換えたとき、そしてstringのようなタイプのTDataに置き換えたときに期待通りに動作します。それはタイプP & ITypeTestProps<TData>の小道具を期待して はタイプPの小道具を見込んコンポーネントでそれをラップコンポーネントを取る---

withTestDataは心曲げのようなものに見えるが、それはかなり簡単なものを行います。このテストケースでは、PはITestComponentPropsです。

ここでエラーとバージョンです：

import * as React from "react"; 
import {mount} from "enzyme"; 

interface ITestComponentProps {} 

type HOC<PWrapped, PHoc> = React.ComponentClass<PWrapped & PHoc> | 
    React.SFC<PWrapped & PHoc>; 

export interface ITypeTestProps<TData> { 
    data: TData; 
} 

export function withTestData<P, S, TData>(Component: HOC<P, 
    ITypeTestProps<TData>>, data: TData): 
    React.ComponentClass<P> { 

    class C extends React.Component<P & ITypeTestProps<TData>, S> { 

     public render(): JSX.Element { 
      return (
       <Component data={data} {...this.props as any} /> 
      ); 
     } 
    } 
    return C; 
} 

type ITypeComponentProps = ITestComponentProps & ITypeTestProps<String>; 

class TestComponent extends React.Component<ITypeComponentProps, {}> { 
    public render(): JSX.Element { 
     return (<div>Hello, {this.props.data}</div>); 
    } 
} 

describe("withTestData()",() => { 

    it("wraps a component",() => { 
     const data: string = "World"; 
     const WrappedTestComponent = withTestData(TestComponent, data); 
     // The type mismatch occurs here: 
     const wrapper = mount(<WrappedTestComponent />); 
     expect(wrapper.text()).toContain(`Hello, ${data}`); 
    }); 

}); 

私はこのような制御をキャストすることによって、それを回避することができますが、私は、キャスト排除したいと思います：

const WrappedTestComponent = withTestData(TestComponent, data) as 
    React.ComponentClass<ITestComponentProps> 

EDITを

私は期待通りに動作するバージョンです。生成されたインターフェイスから「データ」を削除します。唯一の違いは、タイプが一般的でないことです。ゼロからこの例を実行するには

import * as React from "react"; 
import {mount} from "enzyme"; 

interface ITestComponentProps {} 

type HOC<PWrapped, PHoc> = React.ComponentClass<PWrapped & PHoc> | 
    React.SFC<PWrapped & PHoc>; 

export interface ITypeTestProps { 
    data: string; 
} 

export function withTestData<P, S, TData>(Component: HOC<P, ITypeTestProps>, data: TData): 
    React.ComponentClass<P> { 

    class C extends React.Component<P & ITypeTestProps, S> { 

     public render(): JSX.Element { 
      return (
       <Component data={data} {...this.props as any} /> 
      ); 
     } 
    } 
    return C; 
} 

type ITypeComponentProps = ITestComponentProps & ITypeTestProps; 

class TestComponent extends React.Component<ITypeComponentProps, {}> { 
    public render(): JSX.Element { 
     return (<div>Hello, {this.props.data}</div>); 
    } 
} 

describe("withTestData()",() => { 

    it("wraps a component",() => { 
     const data: string = "World"; 
     const WrappedTestComponent = withTestData(TestComponent, data); 
     // The type mismatch occurs here: 
     const wrapper = mount(<WrappedTestComponent />); 
     expect(wrapper.text()).toContain(`Hello, ${data}`); 
    }); 

}); 

：

$ npm install -g create-react-app 
$ create-react-app my-app --scripts-version=react-scripts-ts 
$ cd my-app/ 
$ npm install @types/react@15.0.27 enzyme --dev 

コピーし、上記のコードファイルにsrc/demo.test.tsx

$ npm test 

Answer 1

エラーが正しくあなたが価値を提供するために、見逃していることを警告していますITypeTestPropsインターフェイスの必須プロパティです。

export interface ITypeTestProps<TData> { 
    data?: TData; 
}