活字体で活字体

Question

のインターフェイスからキーを除外するためにどのように、あなたの代わりにキーを組み合わせることで、この

interface Foo { 
    var1: string 
} 

interface Bar { 
    var2: string 
} 

type Combined = Foo & Bar 

ように二つのインターフェイスタイプを組み合わせることができ、私は別のインターフェイスからキーを除外したいです。とにかくTypeScriptでやってもいいですか？

で、私はその後、

<ValuedComponent /> 

を

const ValuedComponent = valueHOC(MyComponent) 

を書くことができることで、この

export default function valueHOC<P> (
    Comp: React.ComponentClass<P> | React.StatelessComponent<P> 
): React.ComponentClass<P> { 
    return class WrappedComponent extends React.Component<P, State> { 
    render() { 
     return (
     <Comp 
      {...this.props} 
      value={this.state.value} 
     /> 
    ) 
    } 
} 

のような他の包まれたコンポーネントのプロパティ値を管理HOCを、持っている理由

しかし、問題は、返されたコンポーネントタイプも指定されたコンポーネントのpropsタイプを使用しているため、TypeScr iptは文句を言い、value小道具を提供するように私に依頼します。結果として、私は

のようなものを書く必要があります

<ValuedComponent value="foo" /> 

とにかく値は使用されません。私はここにしたいと、私はその後valueが返されたコンポーネントで必要とされることはありません。この

React.ComponentClass<P - {value: string}> 

のようなものを持ちたい、特定のキーなしのインタフェースを返すことです。今のところTypeScriptで可能ですか？

Answer 1

既存のインターフェイスからプロパティを削除することはできません。オプションで設定されたvalueプロパティを持つインタフェースで既存のインタフェースを拡張しようとしても、エラーが返されます。

この問題を回避するには、ターゲットコンポーネントの入力を変更して、valueプロパティはオプションです。

// ... 
class MyComponent extends React.Component<{value?: string}, State> { 
// ... 
} 

、その後

const valuedComponent = valueHOC(MyComponent); 

高階関数を使用するときに生成コンポーネントがvalue小道具を要求しません。