"Link" two union types together

[pastel bolt]

I have the following code

colorFormat.type
         // ^ "rgb" | "hsl" | "hsv"

colorFormat.value
         // ^ RGB | HSL | HSV

const hex = convert[colorFormat.type].hex(colorFormat.value);

For example convert.rgb.hex will convert rgb => hex, same for others

The above code errors because if I have:

convert.rgb.hex(  );
             // ^ type RGB must be here, but receives RGB | HSL | HSV

I need to somehow "link" these two types together, such that typescript will know that if type: "rgb" then value: RGB

I have already created a type that attempts to link them like that:

export type ColorFormatMapping = {
  rgb: RGB;
  hsl: HSL;
  hsv: HSV;
}

But I have no idea how to use it to achieve the desired effect. any ideas?

[slender helm]

type ColorFormat
  = { type: 'rgb', value: 'RGB' }
  | { type: 'hsl', value: 'HSL' }
  | { type: 'hsv', value: 'HSV' }

declare const colorFormat: ColorFormat
if (colorFormat.type === 'rgb') {
    colorFormat.value
//              ^? - (property) value: "RGB"
}

[iron mural]

you probably need to use if/else or switch statement to get it to narrow

switch (colorFormat.type) {
    case "rgb": {
        //
        break
    }
}

etc

[pastel bolt]

Ok, thanks. I was wondering if its possible to do it automatically (without having to use the switch statemnts) but I guess this is also fine!

[iron mural]

!:corr*