Utilize the key types of an object to validate the type of a specified value within the object

Question

Utilize the key types of an object to validate the type of a specified value within the object

I am currently working with an object that contains keys as strings and values as strings. Here is an example of how it looks:

const colors = {
  red: '#ff0000',
  green: '#00ff00',
  blue: '#0000ff',
}

Next, I define a type that only accepts the keys of this object. For instance:

// Output: 'red' | 'green' | 'blue'
type ColorType = keyof typeof colors

Now, my goal is to utilize this type to validate a value from a function that retrieves a value from the colors object. However, I encounter an error when attempting to do so. Here is an example:

const getColor = (color: ColorType): ColorType => {
  // This error occurs: Type 'string' is not assignable to type '"red" | "green" | "blue"'
  return colors[color]
}

How can I overcome this issue?

typescript

Answer 1

Answer №1

In case you're intrigued by the concept of ensuring HEX type safety, consider approaching it like this:

type HexNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type HexString = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type StringNumber<T extends number> = `${T}`;
type HEX = HexNumber | StringNumber<HexNumber> | HexString;

type ToArray<T extends string, Cache extends readonly string[] = []> =
    T extends `${infer A}${infer Rest}`
    ? A extends HEX
    ? ToArray<Rest, [...Cache, A]> : A extends ''
    ? 1 : 2 : T extends '' ? Cache extends { length: 6 }
    ? Cache : 'String should have 6 chars. No more, no less' : never;

type Elem = string;

type ReduceToString<
    Arr extends ReadonlyArray<Elem>,
    Result extends string = ''
    > = Arr extends []
    ? Result
    : Arr extends [infer H]
    ? H extends Elem
    ? `${Result}${H}`
    : never
    : Arr extends readonly [infer H, ...infer Tail]
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? ReduceToString<Tail, `${Result}${H}`>
    : never
    : never
    : never;


const colors = {
    red: '#ff0000',
    green: '#00ff00',
    blue: '#0000ff',
} as const

type Colors = typeof colors;

type Tail<T extends string> = T extends `#${infer HEX}` ? HEX : never;

type ColorType = keyof typeof colors

type HexValidation<T extends keyof Colors> = ReduceToString<ToArray<Tail<Colors[T]>>>

function getColor<C extends keyof Colors>(color: C): HexValidation<C>
function getColor<C extends keyof Colors>(color: C) {
    return colors[color]
}

const result = getColor('red') // "ff0000"

Playground

If an invalid HEX property is provided in the colors object, TypeScript will throw an error.

Further explanation can be found on my blog and within this answer

Answer 2

In case you're intrigued by the concept of ensuring HEX type safety, consider approaching it like this:

type HexNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type HexString = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type StringNumber<T extends number> = `${T}`;
type HEX = HexNumber | StringNumber<HexNumber> | HexString;

type ToArray<T extends string, Cache extends readonly string[] = []> =
    T extends `${infer A}${infer Rest}`
    ? A extends HEX
    ? ToArray<Rest, [...Cache, A]> : A extends ''
    ? 1 : 2 : T extends '' ? Cache extends { length: 6 }
    ? Cache : 'String should have 6 chars. No more, no less' : never;

type Elem = string;

type ReduceToString<
    Arr extends ReadonlyArray<Elem>,
    Result extends string = ''
    > = Arr extends []
    ? Result
    : Arr extends [infer H]
    ? H extends Elem
    ? `${Result}${H}`
    : never
    : Arr extends readonly [infer H, ...infer Tail]
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? ReduceToString<Tail, `${Result}${H}`>
    : never
    : never
    : never;


const colors = {
    red: '#ff0000',
    green: '#00ff00',
    blue: '#0000ff',
} as const

type Colors = typeof colors;

type Tail<T extends string> = T extends `#${infer HEX}` ? HEX : never;

type ColorType = keyof typeof colors

type HexValidation<T extends keyof Colors> = ReduceToString<ToArray<Tail<Colors[T]>>>

function getColor<C extends keyof Colors>(color: C): HexValidation<C>
function getColor<C extends keyof Colors>(color: C) {
    return colors[color]
}

const result = getColor('red') // "ff0000"

Playground

If an invalid HEX property is provided in the colors object, TypeScript will throw an error.

Further explanation can be found on my blog and within this answer

Utilize the key types of an object to validate the type of a specified value within the object

Answer №1

Similar questions

Ways to update the value within an object in an array stored in a BehaviorSubject?

Attempting to convert numerical data into a time format extracted from a database

What are the best practices for integrating Qt with React in TSX?

Using setTimeout() and clearTimeout() alongside Promises in TypeScript with strict mode and all annotations included

Warning message in ReactJS Material UI Typescript when using withStyles

Having trouble linking tables to Node.js with TypeScriptyntax?

Creating a dynamic type class in TypeScript that can inherit characteristics from another class

Changing a password on Firebase using Angular 5

angular2 ngif does not effectively conceal HTML elements when set to false

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

Tips on invoking Bootstrap's collapse function without using JQuery

Adjusting the background color of the custom input range thumb when the input is disabled

Vue 3 Electron subcomponents and routes not displayed

Using CKEditor5 to Capture and Edit Key Presses

Tips for retrieving both the ID and NAME values from Ionic's Dynamic Select Options

HTML not updating after a change in properties

methods for array filtering in typescript

Extracting the "defined" type from a TypeScript property during runtime

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

The error at core.js:4002 is a NullInjectorError with a StaticInjectorError in AppModule when trying to inject FilterService into Table