Can the string literal type be implemented in an object interface?

Question

My custom type is called Color,

type Color = 'yellow' | 'red' | 'orange'

In addition, I created an object with the interface named ColorSetting.

interface ColorSetting {
  id: string
  yellow?: boolean
  red?: boolean
  orange?: boolean
}

I aimed to simplify the interface ColorSetting by using the type Color.

This simplified code looks like this:

interface ColorSetting {
  id: string
  [k in Color]?: boolean
}

However, I encountered an error stating that

A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.

What would be the correct way to utilize a string literal type within an interface?

Answer 1

Answer №1

After extensive research, I have discovered a helpful solution that meets my needs. This solution leverages the power of Intersection Types.

ColorScheme = {
   id: string
 } & {
   [k in Color]?: boolean
 }

Answer 2

After extensive research, I have discovered a helpful solution that meets my needs. This solution leverages the power of Intersection Types.

ColorScheme = {
   id: string
 } & {
   [k in Color]?: boolean
 }

Answer 3

Do you think it's necessary to rely on a string literal in this context? Would employing an enum with string values not suffice:

enum Paints {
  YELLOW = 'yellow',
  RED = 'red',
  ORANGE = 'orange',
}

interface ColorPreference {
  id: string;
  paint: Paints;
}

The potential drawback of this method is if there arises a need for reverse mapping, something typescript doesn't handle automatically.

I personally avoid using literals like this, so I'm uncertain about its effectiveness, but feel free to experiment:

interface ColorPreference {
  id: string;
  paint: Paint;
}

Simply utilize your declared type as is, disregard the '[k in Paint]' portion

Answer 4

Do you think it's necessary to rely on a string literal in this context? Would employing an enum with string values not suffice:

enum Paints {
  YELLOW = 'yellow',
  RED = 'red',
  ORANGE = 'orange',
}

interface ColorPreference {
  id: string;
  paint: Paints;
}

The potential drawback of this method is if there arises a need for reverse mapping, something typescript doesn't handle automatically.

I personally avoid using literals like this, so I'm uncertain about its effectiveness, but feel free to experiment:

interface ColorPreference {
  id: string;
  paint: Paint;
}

Simply utilize your declared type as is, disregard the '[k in Paint]' portion