TypeScript error when passing parameters between functions

Question

This pattern is throwing the TypeScript error:

Argument of type '(string | number)[]' is not assignable to parameter of type 'string[] | number[]'

function foo(value: string | number) {
  return bar([value]); // <- TypeScript error
}

function bar(valueList: string[] | number[]) {
  ..does something...
}

I understand this is because TypeScript compiler will see this as an array with a mix of strings and numbers.

Is there a type-safe way to accomplish this? I can only think to cast to any[] which feels bad:

function foo(value: string | number) {
  const valueList: any[] = [value];
  return bar(valueList);
}

Did you notice the difference between string and string[] ?

Antti
– Antti

2018-12-07 08:04:35 +00:00
Commented Dec 7, 2018 at 8:04 — Antti
– Antti, Commented Dec 7, 2018 at 8:04

jonrsharpe · Accepted Answer · 2018-12-06 17:15:40Z

4

One way to do this is declaration merging; define two separate interfaces for your function (see function types), then a single implementation of it:

interface Foo {
    (value: string): void;
}

interface Foo {
    (value: number): void;
}

const foo: Foo = function (value) {
  return bar([value]);
}

This will keep the two types separate, as only one of those interfaces can be called through at any given time.

answered Dec 6, 2018 at 17:15

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

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

3 Comments

Christoph Lütjen Over a year ago

Is there a reason, you're not using something like this: function foo(value: string); function foo(value: number); function foo(value: any) { return bar([value]); }

jonrsharpe Over a year ago

@ChristophLütjen I did not know you could do it like that!

Christoph Lütjen Over a year ago

Thx, wasn't sure if it was deprecated or the separate interface has other benefits ;-)

jonrsharpe · Accepted Answer · 2018-12-06 23:04:31Z

2

This is inspired by jonrsharpe's answer but instead of using a separate interface, it uses function overloading.

Function overloads allow us to specify multiple signatures for a single implementation: https://www.typescriptlang.org/docs/handbook/functions.html#overloads

function foo(value: string);
function foo(value: number);
function foo(value: any) {
    return bar([value]);
}

function bar(valueList: number[] | string[]) {
}

edited Dec 6, 2018 at 23:04

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

answered Dec 6, 2018 at 18:11

Christoph Lütjen

6,0342 gold badges29 silver badges36 bronze badges

Comments

Nurbol Alpysbayev · Accepted Answer · 2018-12-06 17:44:51Z

1

The other answer is good (I've upvoted it), but I would personally go with

return bar([value] as string[] | number[]);

especially, if I am short on time. This does not mean that it's wrong or hackish, you are just hinting to silly (in this case) Typescript a bit.

P.S. As @paleo mentioned, this is not completely type-safe.

edited Dec 6, 2018 at 17:44

answered Dec 6, 2018 at 17:25

Nurbol Alpysbayev

22.4k6 gold badges68 silver badges100 bronze badges

3 Comments

Paleo Over a year ago

Your solution is not really type-safe because you could write: function foo(value: string | boolean) { return bar([value] as string[] | number[]); } (with a boolean value as parameter).

Paleo Over a year ago

Personally, I avoid overly verbose solutions. I would just use a as any until a next version of TypeScript correctly infers this case. Maybe also opening a ticket on GitHub. But I don't propose this answer for fear of downvotes. ;)

Nurbol Alpysbayev Over a year ago

@Paleo agree on everything.

Collectives™ on Stack Overflow

TypeScript error when passing parameters between functions

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related