1

I have two enums that are constructed on each other in the following way:

enum COLOR {
    White = '#FFFFFF',
    Black = '#000000',
    SuccessStatusForeground = '#57A300',
    ErrorStatusForeground = '#E00B1C',
}

export enum SemanticColor {
    Default = COLOR.Black,
    DefaultBackground = COLOR.White,
    Success = COLOR.SuccessStatusForeground,
    Error = COLOR.ErrorStatusForeground,
}

When I try to pass a style object using { backgroundColor: SemanticColor.Success } I get:

 Types of property 'backgroundColor' are incompatible.
    Type 'SemanticColor' is not assignable to type 'string | undefined'

It looks like TypeScript isn't able to infer that the enum's value is in fact a string. Any ideas how to solve this one?

Matan Bobi
  • 2,693
  • 1
  • 15
  • 27
  • Wow this is bizarre, see https://github.com/microsoft/TypeScript/issues/40862 and the answer to [the linked question](https://stackoverflow.com/questions/64145849/how-can-i-pass-an-enum-with-keys-of-another-string-enum-into-a-function-that-a). So weird! – jcalz Jan 27 '22 at 21:10
  • 1
    Thanks for this @jcalz! I wasn't able to find it before :) – Matan Bobi Jan 27 '22 at 21:12
  • 1
    @MatanBobi Sorry about [the noise](https://stackoverflow.com/a/70885713/438273)! Here's a playground showing the issue in your question: https://tsplay.dev/N9yEVN – jsejcksn Jan 27 '22 at 21:20
  • @jsejcksn It's nothing, thanks for your help! – Matan Bobi Jan 27 '22 at 21:31

0 Answers0