Typescript in React: defining a property on `this`

Question

In my non-tyepscript react component I had

componentWillMount() {
    this.delayedSearch = _.debounce((val) => {
        this.onQuerySearch(val);
    }, 1000);
}

for debouncing typing on an input field. Then on an input field I had <input onChange={event => this.delayedSearch(e.value)}>

Now, however, when I switch to Typescipt, my assignment of the _.debounce gives me an error:

Property 'delayedSearch' does not exist on type 'UserSearch'.

How can I fix this?

Nitzan Tomer · Accepted Answer · 2016-12-28 19:55:44Z

2

That's because your class doesn't declare to have this delayedSearch property, therefor the compiler can't understand what this property is.

In your class you should have something like:

class MyComponent extends React.Component<MyProps, MyState> {
    private delayedSearch: (val: string) => void;

    componentWillMount() {
        // should be fine now
        this.delayedSearch = _.debounce((val) => {
            this.onQuerySearch(val);
        }, 1000);
    }
}

answered Dec 28, 2016 at 19:55

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript in React: defining a property on `this`

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related