DefinitelyTyped: Add new props typing for existing

Question

Is there any way to declare new typing for new props within DefinitelyTyped? I updated material-ui with some new props in SelectField component, but typings in DefinitelyTyped are old. Can I extend in some way SelectField typing and add new props types? Now I have:

<SelectField
    multiple={true}
    hintText="Select type"
    value={[...this.state.values]}
    onChange={this.onChange}
    selectionRenderer={this.selectionRenderer}
>

And I need to add multiple?: boolean and selectionRenderer: (values: any[]) => string types. I tried to declare module 'material-ui/SelectField' {} but it not works. Any ideas?

Answer 1

Ok, I found solution, @Nitzan answer it's ok, but need some improvements. When I checked out node_modules/@types/material-ui/index.d.ts I found that interface SelectFieldProps is defined in namespace __MaterialUI so I have to write like this:

declare namespace __MaterialUI {
  interface SelectFieldProps {
    multiple?: boolean;
    selectionRenderer?: (values: any[]) => string;
  }
}

It works in ./src/typings/selectfield.d.ts and doesn't work if I declare it in the same file where I use <SelectField /> (probably because of .d.ts extension)

Answer 2

You should be able to use module augmentation:

declare module "material-ui" {
    interface SelectFieldProps {
        multiple?: boolean;
        selectionRenderer: (values: any[]) => string;
    }
}

As you can see, the syntax is a bit sifferent than what you've tried.

---

Edit

If SelectFieldProps is defined in the __MaterialUI namespace, then this should work:

declare module "material-ui" {
    namepsace __MaterialUI {
        interface SelectFieldProps {
            multiple?: boolean;
            selectionRenderer: (values: any[]) => string;
        }
    }
}