score:9
Do it with arrow function on setTimeout for heredate parents props
setTimeout(
() => {
this.resetNotification();
}......
score:0
Just pass the function as a reference, no need to wrap it in an anonymous function or even bind it, which creates yet another function.
setTimeout(this.resetNotification, 500);
There is no bug in React calling setTimeout instantly, so if you were puzzled by it, consider this.
function doSomething() {/* */}
const a = doSomething() // immediately invokes and assigns a result
const b = doSomething // stores a reference
// call later
const x = a() // error
const y = b() // invokes doSomething and assigns a result
And in your case, the "bug" you mention is basically the same thing.
When you register your setTimeout
callback, you mistakenly immediately call it, where instead you should pass a reference to it.
function doSomething() {/* */}
// wrong
setTimeout(doSomething(), 500) // This is basically the same as writing the `a` from above
setTimeout(a, 500) // like this. See the problem? a() cannot be called later.
To fix it, you have three options.
- pass a reference
setTimeout(this.resetNotification, 500)
- wrap in an anonymous arrow function which is transparent to
this
,
meaning it captures the outer (parent)this
.
note that this wraps your function in another function every time you call this
setTimeout(() => this.resetNotification(), 500)
- wrap in a standard anonymous function, but since it comes with it's own
this
, you must bind it to thethis
of the parent.
note that this wraps your function in another function AND THEN binds it, which creates a third function every time
setTimeout(function(){this.resetNotification()}.bind(this), 500)
Enter setTimeout
setTimeout(callback, timeout?, param1?, param2?, ...)
It seems people don't realise that setTimeout
and setInterval
 actually accept optional unlimited parameters. The reason is to make calling the callback simpler, so instead of this
setTimeout(
function(){
this.doSomething(true, "string", someVariable)
}.bind(this),
500
)
You can write this
setTimeout(this.doSomething, 500, true, "string", someVariable)
Isn't that beautiful and elegant? 😉
Also you should fix your resetNotification()
function's signature to resetNotification(): void
not :any
as it doesn't return anything.
score:4
If you still want to use function () {}
syntax, you can pass this
as the first parameter to the function, along with a type annotation. Like this:
setTimeout(
function(this: Board) {
this.resetNotification();
}
.bind(this),
500
);
I'm assuming since the file is called Board.tsx
that your component is <Board>
. If not, change the type annotation for this
.
Source: stackoverflow.com
Related Query
- TypeScript (ReactJS) compiler error, this implicitly has type any
- TypeScript / ReactJS / setTimeout: 'this' implicitly has type 'any' because it does not have a type annotation.ts
- react typescript error - element implicitly has an any type because expression of type string cant be used to index type {}
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- ReactJS typescript error Parameter props implicitly has 'any' type
- TypeScript Err: "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React Typescript
- TypeScript - Element implicitly has an 'any' type because expression of type '"storyFile"' can't be used to index type '{}'
- Typescript when I map imports it says 'Element implicitly has an 'any' type because expression of type 'string' to index type 'typeof import'
- Typescript with React > Element implicitly has an 'any' type because expression of type 'string' can't be used to index
- Typescript error in map(): Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
- issue typing an object react typescript - Element implicitly has an 'any' type because type'
- error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist
- Parameter 'e' implicitly has an 'any' type React TypeScript
- TypeScript - ReactRouter | Arrow function captures the global value of 'this' which implicitly has type 'any'
- binding element 'yyy' implicitly has an 'any' type error in typescript
- TS | Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<SecurityMode, boolean>'
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
- Typescript-React State: Element implicitly has an 'any' type because type 'State' has no index signature
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'
- How do I fix the error "Element implicitly has an 'any' type because the expression of type
- React Typescript: Element implicitly has an 'any' type because type has no index signature
- Graphql React Typescript error binding element 'currency' implicitly has an 'any' type
- Using keyof in Typescript to get rid of 'element implicitly has any type' error
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{...}'
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Breakpoints'
- how fix Element implicitly has an 'any' type because expression of type 'string' can't be used to index type?
- Global window object: Element implicitly has an 'any' type because index expression is not of type 'number'.ts
- React typescript error: Element implicitly has an 'any' type
More Query from same tag
- How to concat to last item in array state?
- Boolean Value is not getting updated in MERN stack due to lack of quotation marks
- ReactJS - how to get firebase result and pass down to sub component properly
- Link is appending instead of opening new link
- Redirect to Product Detail Page from Product List through JSON Data with ReactJS
- Problem while changing date in React date picker
- React.js .push() is not a function
- Need help passing props to jsx (adobe jsx) file from js file in React
- useEffect keep getting executed every time even dependency not changed
- BrowserRouter causes React App to not load (react-router-dom)
- Yup.when: "`NaN` (cast from the value `NaN`)"
- Acessing properties of an object in an array in React
- What will happen when React encounter an array nested in another?
- React: Pomodoro Clock: How to properly update state considering state's asynchronous updates?
- Unable to import Reactjs Class for testing with mocha and enzyme
- React hook state - does not update component
- How to access an image link inside an object and show it using react componenets
- React user session automatic logout after one hour
- React useState and setState not updating immediately
- Retrieving the key for the entry from material-ui autocomplete at onSelect, instead of value
- Is it possible to initialize redux store once and use in multiple page?
- How to exclude / disable React Developer Tools in Production build?
- How made a deep copy that can resolve a problem with a table
- Mocking a promise, and testing 'setState' in '.then()'
- NextJS - conditionally pull data from an external API with getServerSideProps
- React.js | How to handle className in a better way?
- how to apply a few styles properties depends on condition styled-components
- Returning 404 not found for the micro frontend dependencies from the host application
- React: using index as key for items in the list
- How to reset setValues in react-hook-form version 7?