use object key as key for another object

user_14103836 0
Viewed 604

I want to create a type in TypeScript and use values of another object for its keys

const routes = {
  home: "HOME",
  profile: "PROFILE"
}

export type NavigatorParamList = {
  [routes.home]: undefined;
  [routes.profile]: undefined;
};

I know that this code is not working! Any idea how to do it?

typescript javascript
3 Answers

Your object's properties are variable strings and TypeScript won't let you use them as computed properties for a type unless you make them readonly literals with as const.

const routes = {
  home: "HOME",
  profile: "PROFILE"
} as const;
user_170554030

This is what String enums are for:

TS Playground

enum Route {
  Home = "HOME",
  Profile = "PROFILE"
}

// using a union of individual enum members:
type NavigatorParamList1 = Record<Route.Home | Route.Profile, undefined>; // { HOME: undefined; PROFILE: undefined; }

// or if you want to use all enum members:
type NavigatorParamList2 = Record<Route, undefined>; // { HOME: undefined; PROFILE: undefined; }

// or independently-defined members
type NavigatorParamList3 = {
  [Route.Home]: undefined;
  [Route.Profile]: undefined;
}
user_4382730

It's doable with mapped types and the new as clause:

const routes = {
  home: "HOME",
  profile: "PROFILE"
} as const;

type AcceptableKeyTypes = string | number | symbol;
type ObjectWithValuesWhichCanBeKeys = {[key: AcceptableKeyTypes]: AcceptableKeyTypes};
type ValuesAsKeys<T extends ObjectWithValuesWhichCanBeKeys> = {[P in keyof T as T[P]]: unknown};

let test: ValuesAsKeys<typeof routes> = {HOME: 7, PROFILE: 4};

TypeScript playground

I'm using here a generic type: ValuesAsKeys<T>.

The values of T need to be constrained to types which are acceptable as keys: string | number | symbol.

the [P in keyof T] part is a mapped type, which iterates over all keys of T. Then, the as clause mapes the key to a new value, in this case to T[P], which is the value of the current iterated key.

Lastly, the value is unknown, so you can use whatever new value you want. in the example I give, I'm using numbers as the new values, but it can be anything.

Note that as said in other answers, routes needs to have the as const assertion, so that the string values are considered as literal types, and can be then used as typed keys.

user_60889260
Related