Retrieving the keys from an object that has already been entered and converting them into types in TypeScript

Question

Retrieving the keys from an object that has already been entered and converting them into types in TypeScript

const obj1 = {
    foo: 'bar',
    goo: 'car',
    hoo: 'dar',
    ioo: 'far'
} as const

const obj2 = {
    koo: 'gar',
    loo: 'har',
    moo: 'jar',
    noo: 'kar'
} as const

type KeysOfObj1 = keyof typeof obj1  // "foo" | "goo" | "hoo" | "ioo"
type ValuesOfObj1 = typeof obj1[KeysOfObj1]  // "bar" | "car" | "dar" | "far"
type KeysOfObj2 = keyof typeof obj2  // "koo" | "loo" | "moo" | "noo"
type ValuesOfObj2 = typeof obj2[KeysOfObj2]  // "gar" | "har" | "jar" | "kar"

type OtherObj = Record<string, ValuesOfObj1 | ValuesOfObj2>

const obj3: OtherObj = {
    hello: obj1.foo,
    world: obj2.koo
} as const

const obj4: OtherObj = {
    hi: obj1.hoo,
    anotherWorld: obj2.moo
} as const

type KeysOfObj3 = keyof typeof obj3  // string
type KeysOfObj4 = keyof typeof obj4  // string

I believe the code is self-explanatory. My query pertains to obtaining keys of obj3 and obj4 as types in the format shown below, instead of just a generic "string" type:

type KeysOfObj3 = keyof typeof obj3  // "hello", "world"
type KeysOfObj4 = keyof typeof obj4  // "hi", "anotherWorld"

Please review the comments provided as they may offer additional insights.

typescript typescript-typings

Answer 1

Answer №1

The reason behind this behavior lies within the line of code

type OtherObj = Record<string, ValuesOfObj1 | ValuesOfObj2>

, where the key is explicitly typed as string.

Therefore, when you use keyof typeof obj3, it references Record<string, ...> and applies that type.

If you wish to implement type checking, you will need to either utilize a type alias with generics or a generic function.

type OtherObj<T extends string> = Record<T, ValuesOfObj1 | ValuesOfObj2>

// Explicitly define keys
const obj3: OtherObj<'hello' | 'world'> = {
    hello: obj1.foo,
    world: obj2.koo
} as const

Alternatively, if you find the redundant verbosity undesirable, you have the option to slightly compromise runtime efficiency. This involves utilizing inference from type parameters to deduce the return value.

const createObj = <K extends string>(
  obj: Record<K, ValuesOfObj1 | ValuesOfObj2>
) => obj

const obj4 = createObj({
    hi: obj1.hoo,
    anotherWorld: obj2.moo,
    foo: 'foobar' //Error thrown! <-- this is an invalid value
} as const)

View this on TS Playground

Answer 2

The reason behind this behavior lies within the line of code

type OtherObj = Record<string, ValuesOfObj1 | ValuesOfObj2>

, where the key is explicitly typed as string.

Therefore, when you use keyof typeof obj3, it references Record<string, ...> and applies that type.

If you wish to implement type checking, you will need to either utilize a type alias with generics or a generic function.

type OtherObj<T extends string> = Record<T, ValuesOfObj1 | ValuesOfObj2>

// Explicitly define keys
const obj3: OtherObj<'hello' | 'world'> = {
    hello: obj1.foo,
    world: obj2.koo
} as const

Alternatively, if you find the redundant verbosity undesirable, you have the option to slightly compromise runtime efficiency. This involves utilizing inference from type parameters to deduce the return value.

const createObj = <K extends string>(
  obj: Record<K, ValuesOfObj1 | ValuesOfObj2>
) => obj

const obj4 = createObj({
    hi: obj1.hoo,
    anotherWorld: obj2.moo,
    foo: 'foobar' //Error thrown! <-- this is an invalid value
} as const)

View this on TS Playground

Retrieving the keys from an object that has already been entered and converting them into types in TypeScript

Answer №1

Similar questions

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

Is there a way to delegate properties in Angular 2+ similar to React?

I am eager to perform DOM manipulation similar to jQuery but within the context of Angular 6

requirements for navigating within an Angular application

Can default values be assigned to a DTO during initialization?

Error in TypeScript: Unable to assign type 'string' to type 'number | ""'

Tips for effectively utilizing generics in typescript

Here's a guide on accessing information from a local JSON file and displaying it on an HTML page using Ionic 2 with TypeScript

Ensuring Two Members in a Class are of Matching Types

Nextjs and Typescript are giving me an error that says, "The property 'nextUrl' is not found on type 'IncomingMessage'." What could be causing this

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Input tag paired with a date picker

Turn off the warning message that says 'Type of property circularly references itself in mapped type' or find a solution to bypass it

Angular Fails to Identify Chart.js Plugin as an Options Attribute

It is not necessary to specify a generic type on a Typescript class

Change the format of the array from the initial array to the new array structure

Creating custom functionality by redefining methods in Typescript

Determining the data type of an object property using a variable

Animation of lava effect in Angular 7

Exploring the world of Vue and Pinia: managing and accessing data like