Obtain a union type using the `keyof typeof` syntax

Question

Obtain a union type using the `keyof typeof` syntax

Is there a way to retrieve the union or enum type from a typeof type in TypeScript?

For instance:

const myConfs: { [k: string]: (myArg: { name: string }) => string } = {
  'Hello': ({ name }) => `World from ${name}`,
  'Goodbye': ({ name }) => `World from ${name}`,
};
type MyKeys = keyof typeof myConfs;


// How can I make this throw an error?
const key: MyKeys = 'hello';

I attempted removing the type definition of myConfs, which worked initially, but it caused issues with the callback argument's type definition within the value field of myConfs.

typescript typescript-typings

Answer 1

Answer №1

One effective solution would be to utilize a factory function, which not only helps in resolving the issue at hand but also eliminates the need for redundant code.

function createConfs<T extends { [k: string]: (myArg: { name: string }) => string }>(confs: T) : T{
    return confs
}

const myConfs = createConfs({
  'Hello': ({ name }) => `World from ${name}`,
  'Goodbye': ({ name }) => `World from ${name}`,
})

type MyKeys = keyof typeof myConfs;

const key: MyKeys = 'hello';
// Type '"hello"' is not assignable to type '"Hello" | "Goodbye"'. Did you mean '"Hello"'?(2820)

Playground

Answer 2

One effective solution would be to utilize a factory function, which not only helps in resolving the issue at hand but also eliminates the need for redundant code.

function createConfs<T extends { [k: string]: (myArg: { name: string }) => string }>(confs: T) : T{
    return confs
}

const myConfs = createConfs({
  'Hello': ({ name }) => `World from ${name}`,
  'Goodbye': ({ name }) => `World from ${name}`,
})

type MyKeys = keyof typeof myConfs;

const key: MyKeys = 'hello';
// Type '"hello"' is not assignable to type '"Hello" | "Goodbye"'. Did you mean '"Hello"'?(2820)

Playground

Answer 3

Answer №2

There are numerous approaches to tackle this issue. Instead of allowing keys to be any string, use a mapped type to restrict it to the necessary set:

const keys = <const>["Apple", "Banana"];

type MyConfigurations = {
  [K in typeof keys[number]]: (argument: { itemName: K }) => string;
};

const myConfigs: MyConfigurations = {
  Apple: ({ itemName }) => `Delicious ${itemName}`,
  Banana: ({ itemName }) => `Ripe ${itemName}`
};

// This should trigger an error
const key: keyof MyConfigurations = "apple";

Answer 4

There are numerous approaches to tackle this issue. Instead of allowing keys to be any string, use a mapped type to restrict it to the necessary set:

const keys = <const>["Apple", "Banana"];

type MyConfigurations = {
  [K in typeof keys[number]]: (argument: { itemName: K }) => string;
};

const myConfigs: MyConfigurations = {
  Apple: ({ itemName }) => `Delicious ${itemName}`,
  Banana: ({ itemName }) => `Ripe ${itemName}`
};

// This should trigger an error
const key: keyof MyConfigurations = "apple";

Obtain a union type using the `keyof typeof` syntax

Answer №1

Answer №2

Similar questions

Oh no! It seems like the build script is missing in the NPM

In Next.js, a peculiar issue arises when getServerSideProps receives a query stringified object that appears as "[Object object]"

Can a type be established that references a type parameter from a different line?

What is the method for implementing an Inset FAB with Material UI in a React project?

Extending a generic typed class in Typescript allows for the creation of

Is there a tool that can automatically arrange and resolve TypeScript dependencies, with or without the use of _references.ts file?

The type definition file for 'bson' could not be located. It appears to be missing from the program due to being the entry point for the implicit type library 'bson'

Angular - Resolving the issue of 'property does not exist on type' in TypeScript

Angular Karma encountered an error: TypeError - It is unable to read the property '_id' as it is undefined

Setting up data in Firebase can be challenging due to its complex structure definition

Error Encountered When Trying to Import Mocha for Typescript Unit Testing

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

Template reference does not connect to the ApexChart graphic

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

What is the reason for VS Code not displaying doc comments from type properties when suggesting descriptions and hover info for TypeScript objects?

Looking to organize an array of objects containing two string elements (countries) based on the country name using TypeScript or the Lodash library?

Issue encountered with Typescript and Mongoose while operating within a Kubernetes cluster environment with Skaffold configuration

The TypeScript error arises when an element implicitly contains an 'any' type due to the inability to use an expression of type 'any' to index a specific type

What could be causing the module version discrepancy with the package.json file I created?