Using Typescript variadic tuple type and Javascript Spread together

Question

Need help understanding how the below piece of code works.

function concatFun<T extends any[], U extends any[]>(
  arg1: T[],
  arg2: U[]
): [...T, ...U] {
  const newArr = [...arg1, ...arg2]; // (T | U)[]
  return newArr; // error Type '(T | U)[]' is not assignable to type '[...T, ...U]'.
                 // Target requires 2 element(s) but source may have fewer.
}

I wanted the return type to be [...T, ...U], but the return type is (T | U)[].

captain-yossarian from Ukraine · Accepted Answer · 2022-05-31 11:46:27Z

1

FIXED You need to infer literal type of provided arguments

type Json =
  | null
  | string
  | number
  | boolean
  | Array<JSON>
  | {
    [prop: string]: Json
  }

function concatFun<
  Fst extends Json, T extends Fst[],
  Scd extends Json, U extends Scd[]>(
    arg1: [...T],
    arg2: [...U]
  ): [...T, ...U] {
  return [...arg1, ...arg2]

}

concatFun([1, 2, 3], [4, 5, 6]) // [1, 2, 3, 4, 5, 6]

Playground

Update

function concatFun<
  Fst extends Json, T extends Fst[],
  Scd extends Json, U extends Scd[]>(
    arg1: [...T],
    arg2: [...U]
  ) {
  const foo: [...T, ...U] = [...arg1, ...arg2]
  return foo
}
}

You can help TS to infer concatenated array. To be honest, I'm not sure how TS resolves it unfer the hood. But error message is pretty intuitive if you will et rid of explicit type [...T, ...U] from foo

edited May 31, 2022 at 11:46

answered May 31, 2022 at 9:46

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

2 Comments

nitte93 Over a year ago

Thanks for the answer. It way more neat. However, I still have hard time understanding, why is TS complain when i use assign spread and then return. Playground

captain-yossarian from Ukraine Over a year ago

@nitte93 made small update

decorator-factory · Accepted Answer · 2022-05-31 09:44:37Z

1

This is probably what you meant:

function concat<T extends readonly any[], U extends readonly any[]>(
  arg1: T,
  arg2: U,
): [...T, ...U] {
  return [...arg1, ...arg2]
}

T[] means "array of Ts", but not "T which is an array".

See this TypeScript playground.

answered May 31, 2022 at 9:44

decorator-factory

3,1481 gold badge18 silver badges33 bronze badges

2 Comments

nitte93 Over a year ago

That definitely was a mistake and thanks for pointing it out. However, why is there a complain when I assign spread to a const and then return. TypeScript Playground

decorator-factory Over a year ago

Hm, I'm not sure. Perhaps it has to do with the ability to mutate the array afterwards? If you do const newArr = [...arg1, ...arg2] as const, newArr does get inferred as readonly [...T, ...U]. Perhaps this SO question is related?

Collectives™ on Stack Overflow

Using Typescript variadic tuple type and Javascript Spread together

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related