How to use spread operator in typescript as argument to a function?

Question

I want to be able to spread the array in to the argment of the function, but I am getting A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556)

  const currentColor: string = context.brandingPersonal.customColor; // rgba string 
  const numberColor: [number, number, number, number] = currentColor
    .substring(5, currentColor.length - 1)
    .replace(/ /g, '')
    .split(',')
    .map((item) => Number(item));

  function getContrastColor(R: number, G: number, B: number, A?: number) {
    const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A || 0) * 255;
    return brightness > 186 ? '#000000' : '#FFFFFF';
  }
  getContrastColor(...numberColor);

TS doesn't know that numberColor's type is a "tuple" (a fixed size array in TS) because tuples need to be defined as const. Add as const after [255,50,50,0.1] to narrow the type from Array<Number> to [Number, Number, Number, Number] — HKG
– HKG, Commented Jan 14, 2022 at 23:47
The problem is that the function has a fixed number of parameters, an array does not. You can turn it into a tuple, make the array const, or use rest (which IMO maybe don't). Searching the web for the error message may provide other options, too. — Dave Newton
– Dave Newton, Commented Jan 14, 2022 at 23:47
@HKG what if the value is rgb only how to set the last parameter optional in the argument ? — Richardson
– Richardson, Commented Jan 14, 2022 at 23:49

Wai Ha Lee · Accepted Answer · 2022-01-16 00:49:04Z

Here you can find explanation of creating number range in typescript.

Here you can find my article about creating number range.

It is possible to achieve extra safety with static type analysis:

type MAXIMUM_ALLOWED_BOUNDARY = 256

type ComputeRange<
    N extends number,
    Result extends Array<unknown> = [],
    > =
    (Result['length'] extends N
        ? Result
        : ComputeRange<N, [...Result, Result['length']]>
    )

type Octal = ComputeRange<MAXIMUM_ALLOWED_BOUNDARY>[number]

type Digits = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

type AlphaChanel = `0.${Digits}` | '1.0'

type RGBA<Alpha extends number = 1.0> = [Octal, Octal, Octal, (`${Alpha}` extends AlphaChanel ? Alpha : never)?]

function getContrastColor<Alpha extends number>(...[R, G, B, a]: RGBA<Alpha>) {
    const A = a || 1;

    const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A || 0) * 255;

    return brightness > 186 ? '#000000' : '#FFFFFF';
}

getContrastColor(10, 20, 30, 0.2); // ok
getContrastColor(256, 20, 30, 0.2); // error, 256 is out of the range
getContrastColor(255, 20, 30, 0.22); // error, 0.22 should be 0.2

Playground

RGBA utility type acts as a type validator and at the same time as a type for all valid RGB tuples. You can find more info here and here. If A is allowed alpha channel value it returns A, otherwise - never.

AlphaChanel - is a union of all allowed values. As you might have noticed I have allowed only one digit after 0.. If you want to allow more, please use this:

type AlphaChanel = `0.${ComputeRange<999>[number]}` | '1.0'

If you are interested in hex validation, you can check this article or this answer

Chris Heald · Accepted Answer · 2022-01-15 00:23:52Z

1

split makes no guarantees about how many pieces it'll output at runtime. Passing a string like "foo" would make your routine fail, because your function would not return a valid 4-tuple.

You could use something like this, which guarantees a proper tuple output:

function getNumberTuple(color: string) : [number, number, number, number?] {
  const rgba = color.substring(5, color.length - 1).replace(/ /g, "")
  const numbers = rgba.split(",").map((item) => Number(item));
  return [numbers[0] || 0, numbers[1] || 0, numbers[2] || 0, numbers[3]]
}

function getContrastColor(R: number, G: number, B: number, A?: number) { /* ... */}

getContrastColor(...getNumberTuple("color 123,123,123"));

answered Jan 15, 2022 at 0:23

Chris Heald

62.8k10 gold badges131 silver badges143 bronze badges

Comments

Peter Csala · Accepted Answer · 2022-01-15 05:41:40Z

1

How about using tuples?

const numberColor = [255,50,50,0.1]

// Check RGBA
function getContrastColor([ R, G, B, A ]:[number, number, number, number]) {
  const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A) * 255;

  return brightness > 186 ? '#000000' : '#FFFFFF';
}

// function call with spread operator 
getContrastColor(numberColor);

edited Jan 15, 2022 at 5:41

Peter Csala

23.7k16 gold badges51 silver badges96 bronze badges

answered Jan 14, 2022 at 23:50

Matheus Robert Lichtnow

351 silver badge6 bronze badges

3 Comments

Richardson Over a year ago

The problem is i want it to support both rgba and rgb so i could have 3 number or 4 numbers

Richardson Over a year ago

Argument of type 'number[]' is not assignable to parameter of type '[number, number, number, number]'. Target requires 4 element(s) but source may have fewer.ts(2345)

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use spread operator in typescript as argument to a function?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related