Function paramater that is either a string or a number or a function that returns either a string or a number
I'm building a React app using TypeScript.
I'm trying to define a function (for a HOC) that takes in a parameter called value, which can either be a string, or a number, or a function that returns a string or a number.
So what I tried is:
const myHOC = (
value: string | number | () => string | () => number
) => WrappedComponent => // ...
But TSLint complains about everything that comes after the second | (so basically about both functions).
It says:
[ts] Type expected. [1110]
for the (),
[ts] ',' expected. [1005]
for the => and
[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]
for the string / number respectively.
How can I tell TypeScript what value is?
reactjs typescript typescript-typings higher-order-components typescript-types
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
add a comment |
I'm building a React app using TypeScript.
I'm trying to define a function (for a HOC) that takes in a parameter called value, which can either be a string, or a number, or a function that returns a string or a number.
So what I tried is:
const myHOC = (
value: string | number | () => string | () => number
) => WrappedComponent => // ...
But TSLint complains about everything that comes after the second | (so basically about both functions).
It says:
[ts] Type expected. [1110]
for the (),
[ts] ',' expected. [1005]
for the => and
[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]
for the string / number respectively.
How can I tell TypeScript what value is?
reactjs typescript typescript-typings higher-order-components typescript-types
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
I guess it can't parse it properly. Trystring | number | (() => string) | (() => number);
– kind user
Nov 27 '18 at 22:04
add a comment |
I'm building a React app using TypeScript.
I'm trying to define a function (for a HOC) that takes in a parameter called value, which can either be a string, or a number, or a function that returns a string or a number.
So what I tried is:
const myHOC = (
value: string | number | () => string | () => number
) => WrappedComponent => // ...
But TSLint complains about everything that comes after the second | (so basically about both functions).
It says:
[ts] Type expected. [1110]
for the (),
[ts] ',' expected. [1005]
for the => and
[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]
for the string / number respectively.
How can I tell TypeScript what value is?
reactjs typescript typescript-typings higher-order-components typescript-types
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
I'm building a React app using TypeScript.
I'm trying to define a function (for a HOC) that takes in a parameter called value, which can either be a string, or a number, or a function that returns a string or a number.
So what I tried is:
const myHOC = (
value: string | number | () => string | () => number
) => WrappedComponent => // ...
But TSLint complains about everything that comes after the second | (so basically about both functions).
It says:
[ts] Type expected. [1110]
for the (),
[ts] ',' expected. [1005]
for the => and
[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]
for the string / number respectively.
How can I tell TypeScript what value is?
reactjs typescript typescript-typings higher-order-components typescript-types
reactjs typescript typescript-typings higher-order-components typescript-types
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
edited Nov 27 '18 at 22:03
Erik Philips
41.2k692126
41.2k692126
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
asked Nov 27 '18 at 21:56
J. HestersJ. Hesters
8191436
8191436
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
I guess it can't parse it properly. Trystring | number | (() => string) | (() => number);
– kind user
Nov 27 '18 at 22:04
add a comment |
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
I guess it can't parse it properly. Trystring | number | (() => string) | (() => number);
– kind user
Nov 27 '18 at 22:04
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
I guess it can't parse it properly. Try
string | number | (() => string) | (() => number); – kind user
Nov 27 '18 at 22:04
I guess it can't parse it properly. Try
string | number | (() => string) | (() => number); – kind user
Nov 27 '18 at 22:04
add a comment |
1 Answer
1
active
oldest
votes
TSLint (as well as TypeScript) can't parse it properly, you could wrap your function types into braces, to let it understand what you aim for.
const myHOC = (
value: string | number | (() => string) | (() => number)
) => WrappedComponent;
Edit: If you wish these two function types to accept an optional parameter, which are the WrappedComponent props, you'll have to import the interface that stands for the props of that component (if only they are not in scope) and use it inside them with a question mark ?, to let TS know that it's optional.
import { WrappedComponentProps } from './WrappedComponent';
const myHOC = (
value: string |
number |
((props?: WrappedComponentProps ) => string) |
((props?: WrappedComponentProps ) => number)
) => WrappedComponent;
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains whenvalueis a function that takes in a parameter, but I need this to be possible.
– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
You can also create type aliases to make this more readable:type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;
– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for theWrappedComponent, because at some point in the HOC there is this line:const badgeValue = typeof value === "function" ? value(this.props) : value;.
– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508813%2ffunction-paramater-that-is-either-a-string-or-a-number-or-a-function-that-return%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
TSLint (as well as TypeScript) can't parse it properly, you could wrap your function types into braces, to let it understand what you aim for.
const myHOC = (
value: string | number | (() => string) | (() => number)
) => WrappedComponent;
Edit: If you wish these two function types to accept an optional parameter, which are the WrappedComponent props, you'll have to import the interface that stands for the props of that component (if only they are not in scope) and use it inside them with a question mark ?, to let TS know that it's optional.
import { WrappedComponentProps } from './WrappedComponent';
const myHOC = (
value: string |
number |
((props?: WrappedComponentProps ) => string) |
((props?: WrappedComponentProps ) => number)
) => WrappedComponent;
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains whenvalueis a function that takes in a parameter, but I need this to be possible.
– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
You can also create type aliases to make this more readable:type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;
– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for theWrappedComponent, because at some point in the HOC there is this line:const badgeValue = typeof value === "function" ? value(this.props) : value;.
– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
|
show 1 more comment
TSLint (as well as TypeScript) can't parse it properly, you could wrap your function types into braces, to let it understand what you aim for.
const myHOC = (
value: string | number | (() => string) | (() => number)
) => WrappedComponent;
Edit: If you wish these two function types to accept an optional parameter, which are the WrappedComponent props, you'll have to import the interface that stands for the props of that component (if only they are not in scope) and use it inside them with a question mark ?, to let TS know that it's optional.
import { WrappedComponentProps } from './WrappedComponent';
const myHOC = (
value: string |
number |
((props?: WrappedComponentProps ) => string) |
((props?: WrappedComponentProps ) => number)
) => WrappedComponent;
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains whenvalueis a function that takes in a parameter, but I need this to be possible.
– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
You can also create type aliases to make this more readable:type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;
– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for theWrappedComponent, because at some point in the HOC there is this line:const badgeValue = typeof value === "function" ? value(this.props) : value;.
– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
|
show 1 more comment
TSLint (as well as TypeScript) can't parse it properly, you could wrap your function types into braces, to let it understand what you aim for.
const myHOC = (
value: string | number | (() => string) | (() => number)
) => WrappedComponent;
Edit: If you wish these two function types to accept an optional parameter, which are the WrappedComponent props, you'll have to import the interface that stands for the props of that component (if only they are not in scope) and use it inside them with a question mark ?, to let TS know that it's optional.
import { WrappedComponentProps } from './WrappedComponent';
const myHOC = (
value: string |
number |
((props?: WrappedComponentProps ) => string) |
((props?: WrappedComponentProps ) => number)
) => WrappedComponent;
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
TSLint (as well as TypeScript) can't parse it properly, you could wrap your function types into braces, to let it understand what you aim for.
const myHOC = (
value: string | number | (() => string) | (() => number)
) => WrappedComponent;
Edit: If you wish these two function types to accept an optional parameter, which are the WrappedComponent props, you'll have to import the interface that stands for the props of that component (if only they are not in scope) and use it inside them with a question mark ?, to let TS know that it's optional.
import { WrappedComponentProps } from './WrappedComponent';
const myHOC = (
value: string |
number |
((props?: WrappedComponentProps ) => string) |
((props?: WrappedComponentProps ) => number)
) => WrappedComponent;
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
edited Nov 27 '18 at 22:15
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
answered Nov 27 '18 at 22:06
kind userkind user
20.5k52444
20.5k52444
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains whenvalueis a function that takes in a parameter, but I need this to be possible.
– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
You can also create type aliases to make this more readable:type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;
– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for theWrappedComponent, because at some point in the HOC there is this line:const badgeValue = typeof value === "function" ? value(this.props) : value;.
– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
|
show 1 more comment
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains whenvalueis a function that takes in a parameter, but I need this to be possible.
– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
You can also create type aliases to make this more readable:type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;
– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for theWrappedComponent, because at some point in the HOC there is this line:const badgeValue = typeof value === "function" ? value(this.props) : value;.
– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains when
value is a function that takes in a parameter, but I need this to be possible.– J. Hesters
Nov 27 '18 at 22:08
Thank you this works! Just as a follow up question: How can I tell typescript that this should be okay for any function with any parameters (as long as the return is correct)? Because TypeScript now complains when
value is a function that takes in a parameter, but I need this to be possible.– J. Hesters
Nov 27 '18 at 22:08
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
@J.Hesters You want both of them to accept an optional parameter?
– kind user
Nov 27 '18 at 22:09
1
1
You can also create type aliases to make this more readable:
type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;– hsrob
Nov 27 '18 at 22:10
You can also create type aliases to make this more readable:
type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;– hsrob
Nov 27 '18 at 22:10
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for the
WrappedComponent, because at some point in the HOC there is this line: const badgeValue = typeof value === "function" ? value(this.props) : value;.– J. Hesters
Nov 27 '18 at 22:12
@kinduser To be specific I would love if I could somehow tell typescript that the input parameter for these functions are the props for the
WrappedComponent, because at some point in the HOC there is this line: const badgeValue = typeof value === "function" ? value(this.props) : value;.– J. Hesters
Nov 27 '18 at 22:12
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
@J.Hesters I've updated my answer, let me know if it does the trick for you.
– kind user
Nov 27 '18 at 22:19
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508813%2ffunction-paramater-that-is-either-a-string-or-a-number-or-a-function-that-return%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"TSLint complains" - what exactly does it say?
– kind user
Nov 27 '18 at 21:59
@kinduser Edited the question.
– J. Hesters
Nov 27 '18 at 22:00
I guess it can't parse it properly. Try
string | number | (() => string) | (() => number);– kind user
Nov 27 '18 at 22:04