Is there a way in Typescript to dynamically create a type based on an array of potential values?

I am seeking a solution to dynamically define a type based on an array of possibilities.

Within the provided map, the keys represent the type's name, while the corresponding values are arrays containing possible options for that type.

export const typeOptions = {
  areaOfStudy: ["politics", "mathematics", "biology"],
  ageRange: ["1821", "2225", "26plus"],
  societyCategory: [
    "Debate Society",
    "Basketball Society",
    "Football Society",
    "3D Modelling Society",
  ],
}

I am seeking a way to automatically derive the following from the above object:

export type AreaOfStudy = "politics" | "mathematics" | "biology";
export type AgeRange = "1821" | "2225" | "26plus";
export type SocietyCategory =
  | "Debate Society"
  | "Basketball Society"
  | "Football Society"
  | "3D Modelling Society"

Does anyone have any ideas or suggestions on how I could achieve this?

typescripttypescript-generics

Answer №1

To determine the type of a value with exact values, you can use a combination of typeof and as const

typeof helps identify the type of a value, while as const enforces the use of exact values.

export const typeOptions = {
  areaOfStudy: ["history", "chemistry", "physics"] as const,
  ageRange: ["1821", "2225", "26plus"] as const,
  societyCategory: [
    "Art Club",
    "Dance Team",
    "Science Club",
    "Photography Club",
  ] as const,
}

export type AreaOfStudy = typeof typeOptions.areaOfStudy[number]
export type AgeRange = typeof typeOptions.ageRange[number]
export type SocietyCategory = typeof typeOptions.societyCategory[number]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Break down a data structure into a type that includes multiple options

Is it possible for Typescript to support type or interface "destructuring" (if that's the right term)? I am attempting to achieve something similar to the code snippet below: type SomeRandomType = { propertyOne: string; propertyTwo: number; ...

javascripttypescript

What is the process for extracting dates in JavaScript?

I need help extracting the proper date value from a long date string. Here is the initial date: Sun Aug 30 2020 00:00:00 GMT+0200 (Central European Summer Time) How can I parse this date to: 2020-08-30? Additionally, I have another scenario: Tue Aug 25 ...

javascripttypescript

The type 'number' cannot be assigned to an empty object

New to TypeScript and seeking assistance. I recently refactored a colleague's code and implemented TypeScript. Since then, I have been fixing bugs, but I am stuck on one particular issue. Any help would be greatly appreciated! Within this component, ...

reactjstypescript

The absence of class generic parameter constraints cascades down to class properties

Trying to implement TypeScript with TypeORM using a generic class has been challenging. The issue lies within my AbstractDal which takes a generic parameter that is constrained to extend IEntity. IEntity is supposed to have an id property, yet for some rea ...

typescripttypeorm

Is there a way to change a .pptx document into a base64 string?

Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation( ...

javascriptangulartypescriptbase64office-addins

Guide to accessing the request object within the entity class in NestJS

Currently tackling a project in nestJs that requires adding audit columns to certain entities. I have set up user information on a request object, which seems to be working fine when printed in the controller. However, I am facing issues with implementing ...

typescriptnestjstypeorm

Tips for neatly wrapping a class constructor

Currently, I am experimenting with code to create a more streamlined Angular Dialog initializer. This initializer should be passed a constructor function along with its arguments in a type-safe manner. The current implementation works, but it is challengi ...

typescript

Setting up ESLint for TypeScript with JSX configuration

I am encountering problems with TypeScript configuration. Below is the code snippet from my tsconfig.json: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLib ...

javascriptreactjstypescripteslint

Is there a method in Typescript to constrain an exported function's accessibility so that it is only importable by specific files?

I would like developers to use a class or interface instead of directly importing functions. Is there a way to restrict so only the class can import the function? I prefer not to consolidate all the functions in a single file, especially in a large proje ...

typescriptfunctionimportexportprivate

What is the method for determining the type of search results returned by Algolia?

My connection between firestore and algoliasearch is working well. I am implementing it with the help of typescript in nextjs. I am attempting to fetch the results using the following code snippet products = index.search(name).then(({hits}) => { ret ...

reactjstypescriptfull-text-searchnext.jsalgolia

Exploring NuxtJS Vuex Module namespaces and mutation enumerations

My NuxtJS website has a Vuex store with a root state and a module located at store/shop/cart/state.ts. Within the module, there is a file called store/shop/cart/mutations.ts. import { MutationTree } from 'vuex'; import { CartState } from './ ...

typescriptvue.jsnuxt.jsvuex

Create a TypeScript declaration file for a JavaScript dependency that contains an exported function

I am currently utilizing a dependency called is-class in my TypeScript project. Unfortunately, this particular dependency does not come with a @types definition. As a workaround, I have been using a custom .d.ts file with declare module 'is-class&apos ...

node.jstypescript

Error Type: TypeError when using Mongoose's FindOneAndUpdate function

I am encountering difficulties while trying to implement a findOneAndUpdate query. //UserController UserDAO ['findOneAndUpdate'](userId, {& ...

node.jstypescriptmongoosemongoose-schema

Leverage the event handler within a React Component when working with TSX tags

Is there a way to expose an event handler that is defined within a React Component in an HTML-like tag? For example: <MyComp param1="abc" param2="def" onDoSomething={this.someMethod} /> I am trying to define the onDoSomething event, but currently I ...

reactjstypescriptevent-handlingtsx

Converting an Observable variable to a specific type in Typescript

I am currently utilizing Angular 12. To avoid duplicating the same service logic, I am experimenting with creating a base class that includes all HTTP methods and then extending a child class to utilize in the components. crud.service.ts @Injectable({ ...

angulartypescript

What is the best way to execute a GraphQL mutation query with a variable object?

My Register Mutation GraphQL Query is causing an error when executed. The error message states: "Variable "$options" of type "UsernamePasswordInput" used in position expecting type "UsernamePasswordInput!". How can I properly run my GraphQL query for mutat ...

typescriptgraphqlapollo

Creating dynamic checkboxes in Angular4 and binding them to an array of IDs

Hey there developers, I've been encountering an issue while trying to bind my dynamically generated checkboxes to an array in my project. In my users.template.html file, I have the following code snippet: <div *ngFor="let r of roles" class="checkb ...

angulartypescriptcheckbox

Operating on Javascript Objects with Randomized Keys

Once I retrieve my data from firebase, the result is an object containing multiple child objects. myObj = { "J251525" : { "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c3823212 ...

javascriptangulartypescript

Use Enums instead of conditions in Typescript

Consider the code snippet below, which is a function that generates a CSS class based on the value of toCheck: const computeSomething = (toCheck: string) => { return clsx('flex', { 'flex-start': toCheck === 'FIRST', ...

javascriptreactjstypescriptenumsreact-typescript

Having trouble converting from JavaScript to TypeScript, encountered an error in the process

Seeking assistance with transitioning JavaScript code to TypeScript. const profiles = [{ name: "kamal", age: "20", designation: "developer", grade: "A", }, { name: "arun", age: "25", designation: "developer", grade: ...

javascripttypescripttypestypescript-typingstypescript-generics