Bdtjtk

In TypeScript, you can combine two interface types like this

interface Foo {

    var1: string

}



interface Bar {

    var2: string

}



type Combined = Foo & Bar

Instead of combining keys, I want to exclude keys from one interface to another. Is there anyway you can do it in TypeScript?

The reason is, I have an HOC, which manages a property value for other wrapped component like this

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}

        />

      )

    }

}

With that I can write

const ValuedComponent = valueHOC(MyComponent)

then

<ValuedComponent />

but the problem is, the returned component type is also using the props type from given component, so TypeScript will complain and ask me to provide the value prop. As a result, I will have to write something like

<ValuedComponent value="foo" />

Which the value will not be used anyway. What I want here is to return an interface without specific keys, I want to have something like this

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

Then the value will not be needed in the returned component. Is it possible in TypeScript for now?

In TypeScript 2.8 you can now do the following:

interface Foo {

    attribute1: string;

    optional2?: string;

    excludePlease: string;

}



// Define Omit.  Can be defined in a utilities package

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>



// Use Omit to exclude one or more fields (use "excludePlease"|"field2"|"field3" etc to exclude multiple)

type Bar = Omit<Foo, "excludePlease">

const b: Bar = {

    attribute1: ''

};

So in relation to your question the following might be what you want:

export default function valueHOC<P> (

  Comp: React.ComponentClass<P> | React.StatelessComponent<P>

): React.ComponentClass<Omit<P, "value">> {

  return class WrappedComponent extends React.Component<Omit<P, "value">, State> {

    render () {

      return (

        <Comp

          {...this.props}

          value={this.state.value}

        />

      )

    }

}

You can't remove properties from already existing interfaces. Even trying to extend existing interface with the interface having value property set as optional will return an error.

To avoid this issue, modify the typings of the target component so value property is optional.

e.g.

// ...

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

// ...

}

and then component produced when using High Order Function

const valuedComponent = valueHOC(MyComponent);

won't ask for value prop.

There is utility-types library that has Substract mapped type:

import { Subtract } from 'utility-types';



type Props = { name: string; age: number; visible: boolean };

type DefaultProps = { age: number };



type RequiredProps = Subtract<Props, DefaultProps>;

// Expect: { name: string; visible: boolean; }