1

I'm working with NativeBase (the package name doesn't matter) with Typescript.

I'm creating a simple Input component that wraps the NativeBase TextInput. I added a few own properties and spread all other properties to the NativeBase TextInput. It means that the props object should contain my custom properties and the NativeBase TextInput.

My question is: How to describe it properly via typescript without copying the NativePase properties? 

import { Input } from 'native-base';

type Props = {
  // my custom prop
  style: object;
  // props from NativeBase
  onFocus?: () => void;
  onBlur?: () => void;
}

export class TextInput extends Component<Props, State> {


  render() {
    // without these callbacks in Props typescript will complain
    const { style, onFocus, onBlur, ...otherProps } = this.props;

    return (
      <Input style={this.getStyle()} {...otherProps}/>
    );
  }

}

I tried to use type intersection but it doesn't work because the Input isn't a 'type' in general;

type Props = Input & {
  // my custom prop
  style: object;
}

also, I tried to extract Input types via typeof. Didn't help.

type Props = typeof Input & {
  // my custom prop
  style: object;
}

So is there exists a way to avoid copy-pasting the package possible props that I want to use?

Thanks for any help!

Velidan
  • 5,526
  • 10
  • 48
  • 86

1 Answers1

0

If you want to add typing to a third party JavaScript package you create TypeScript type definitions. These are .d.ts files you might have seen in some projects.

There is a Github repository called DefinitelyTyped that comes with third party type definitions for many JavaScript modules. They also have a guide how to write and use your own type definition file.

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
  • Hi Mikko. Thanks for your answer but actually they have it. It's just isn't exported by their index.file. I can import only the Implementation of the Component. But I can't use it like a props type, etc. so I need to duplicate the component props type definition with a few of mine. – Velidan Apr 10 '20 at 06:40