This question already has answers here:
Rules for the use of angle brackets in TypeScript
(2 answers)
Closed 3 years ago.
I have just seen a piece of code for React that has a syntax I have never seen before. I haven't been able to find what it actualy is. Can someone, please, explain what calling a function with <> instead of () does?
const ConfirmationServiceContext = React.createContext<
// we will pass the openning dialog function directly to consumers
(options: ConfirmationOptions) => Promise<void>
>(Promise.reject);
The piece of code is from here
This is actually Typescript type firm for an async lamda.
React.createContext<(options: ConfirmationOptions) => Promise<void>>(Promise.reject);
React.createContext is a Generic type, the < and > is how we pass the concrete type we're going to use in this instance. Here we're passing an inline function that gets a ConfirmationOptions object and returns a Promise whose value is void
Related
This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 1 year ago.
I am trying to create a function that uses the push() or pop() methods as arguments when it is called. I have a working a code but I noticed that I repeated myself a lot and I know that a function would help to improve my code quality, however, I have not been able to find a way to dynamically introduce the push() or pop() methods so I do not have to repeat the same lines of code when I want to do something similar.
This is the current working code (and this is similar to other lines):
pushBtn.addEventListener("click", () => {
if (inputEl.value) {
myEmojis.push(inputEl.value)
inputEl.value = ""
}
render(myEmojis)
})
I created a function that I would pass the push() argument to but it doesn't work as expected.
Here is the function I tried to create:
function modifyEmoji(action) {
if (inputEl.value) {
myEmojis.action(inputEl.value)
inputEl.value = ""
}
render(myEmojis)
}
How I call the function:
pushBtn.addEventListener("click", () => {
modifyEmoji(push)
})
This returns: "Uncaught TypeError: myEmojis.action is not a function"
Thanks in advance.
this line of code: myEmojis.action(inputEl.value)
says that a funcation named "actions" is defined for object array, While this is not the case and so it causes the error
This question already has an answer here:
Understanding arrow function parameters
(1 answer)
Closed 1 year ago.
I came across this function:
const rotatedTetro = matrix.map((_, index)=> matrix.map(col => col[index]))
What does the _ passed in mean?
There’s nothing special about underscore as a variable name. It’s just a convention often used to indicate that the argument won’t be used, but it needs to be present because you need the args that follow it.
It’s a way of indicating the code is “skipping over” that argument.
This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 2 years ago.
My problem is simple and I couldn't find the proper answer in this forum. My bad...
I want to do that :
const dataReceived = foo;
foo(state);
How can I do that?
I read it is better to avoid eval, and I couldn't get success with new Function.
Thanks for your help!
EDIT
Thanks for your answers.
I work with React.
In my reducer, I have a create_item case.
I can reach action.category, that can be the word 'currency' or 'country'.
What I want to do is to launch either the method createCurrency or createCountry according what is inside action.category.
That's why I tried to join 'create' and 'action.category' to create a dynamic function name.
But it seems to be a poor idea...
The simplest approach is to create an object which contains an entry where:
the key is a string
the value is a function.
Example:
const myObject = {
myFunction: () => { [... DO SOMETHING...] }
}
Subsequently you will be able to invoke the function, using:
myObject.myFunction();
The above becomes more powerful when you use brackets notation.
Example:
const myString = 'myFunction';
myObject[myString]();
This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 3 years ago.
Below is a code snippet which I came across in one of the blog for redux.
This snippet explains redux-thunk. But I am trying to make sense out of the weird syntax
return ({dispatch, getState}) => next => action =>{}
I tried a google search with this syntax but did not get much help. I am not understanding how next and action objects are getting their values. Can someone please help me understand what's going on here?
Chaining of functions in this way is usually to enable a user to bind arguments to a final function in a controlled fashion, rather than having to supply them all in one go.
In effect it is an API design choice for a piece of functionality.
({dispatch, getState}) => next => action => {}
...is equivalent to:
function({dispatch, getState}) { // destructure two properties into arguments
return function(next) {
return function(action) {
// this function has access to `dispatch`, `getState`, `next` & `action`
}
}
}
Note that the "binding" of the arguments to the inner functions occurs through a feature of JavaScript called closures. Full explanation of closures in JavaScript here.
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 4 years ago.
I've created a simple pointer to a method like so:
export class SmbwaService {
getExistingArsByLab(labId: number): Observable<SmwbaAr[]> {
this.otherMethod();
}
otherMethod(): void {
}
}
let method: (x: number) => Observable<SmbwaAr[]>;
method = this.service.getExistingArsByLab;
method(12);
That executes OK insofar as it does call getExistingArsByLab method. However, I then get an error when it tries to call otherMethod because:
Cannot read property otherMethod of undefined.
What's the right way to do this? Obviously in my actual code method is being set to one of a number of different methods based on some conditions.
Use Function.bind to obtain a function reference that's bound to a particular value of this:
method = this.service.getExistingArsByLab.bind(this.service)
method(2)