Implementing generics in TypeScript for objects made easy with this guide!

My question is regarding a function that utilizes generics and selects data from an object based on a key. Can we use generics inside the type of this object, or do we have to create a separate function for options?

enum Types {
  book = 'book',
}

type Base = {
    config: any
}

type Options<T> = {
    title: string,
    config:T
}

// How can we pass a generic "Desired" from getBooks into these options?
const options: Record<Types, Options<??>> = {
  book: [{title:'title', config: ['some data']}]
}

const getBook = <Desired extends Base>(type: Types) => {
      return options[type]
}


getBook(Types.book)

Answer №1

Sure, let's break down the definition based on the object provided.

{                      // object
  book: [              // Record<Type, Array< ? >>
    {                  // Record<Type, Array<object>
      title: 'title',  // Record<Type, Array<Options< ? >>
      config: [        // Record<Type, Array<Options<Array< ? >>>
        'some data'    // Record<Type, Array<Options<Array<string>>>
      ]  
    }
  ]
}

You could express this as

Record<Types, Options<string[]>[]>
, but I personally prefer writing it as
Record<Types, Array<Options<string[]>>>
with more spacing between the brackets.

Another interpretation could be that each array is a tuple with only one element, making the type

Record<Types, [ Options<[string]>> ]
. However, it's unclear if this was the desired structure.

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

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge. After some trial and error, I realized t ...

A function in Typescript that dynamically determines its return type based on a specified generic parameter

Currently, I am attempting to create a function where the return type is determined by a generic argument. Let me share a code snippet to illustrate: type ABCDE = 'a' | 'b'; function newFunc<U extends ABCDE>(input: U): U extends ...

Require users to sign in immediately upon landing on the homepage in Next JS version 13 or 14

I have created a traditional dashboard application using Next.js 13 with a pages router that places all pages behind the /dashboard route, such as /dashboard/users, /dashboard/orders, and so on. I want to ensure that when a user visits the website, a fork ...

Tips for creating an operation within a JSON document?

Today, I am attempting to customize the appearance of my audiobook list. However, when trying to add an aspectRatio key-value pair to each object in my JSON file, I encountered an error. https://i.stack.imgur.com/Qb3TX.png https://i.stack.imgur.com/qTkmx. ...

Does Apollo Federation provide support for a code-first development approach?

I have declarations using 'code-first' approach in my project, but now I want to utilize them as microservices. How can I separate my 'typeDefs' and 'resolvers' following Apollo's 'schema-first' methodology? Is ...

Create a placeholder class for the Form Builder group component within an Angular application

Currently, I am in the process of creating numerous new forms. For instance: constructor(private formBuilder: FormBuilder) { this.userForm = this.formBuilder.group({ 'name': ['', Validators.required], 'email&apo ...

Best practices for safely handling dynamic keys in Typescript

I am searching for a secure method to create keyed objects in this manner: interface Types { RED: 'RED'; BLUE: 'BLUE'; GREEN: 'GREEN'; } type TypeKeys = keyof Types; const COLORS: Types = { RED: 'RED', B ...

Enhancing Typescript Arrow Function Parameters using Decorators

Can decorators be used on parameters within an arrow function at this time? For instance: const func: Function = (@Decorator param: any) => { ... } or class SomeClass { public classProp: Function = (@Decorator param: any) => { ... } } Neither W ...

Prevent assignment of properties from a subclass

Let's consider the scenario below: interface Base { a: string; } interface Derived extends Base { b: string; } const x: Derived = { a: "a", b: "b", }; How can we configure the linter and/or compiler to detect any issues ...

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

I have a string variable named log.htmlContent that contains some HTML content. This variable is passed into a div to be displayed using v-html. The particular div will only be displayed if log.htmlContent includes an img tag (http: will only be present in ...

Encountered Error: Rendered an excessive number of hooks beyond the previous render in the framework of Typescript and

I am currently working on integrating Typescript and Context API in an application. Specifically, I am focusing on setting up the Context API for handling login functionality. However, I encountered the following error message: Error: Rendered more hooks ...

Storing information upon refresh in Angular 8

When it comes to inter-component communication in my Angular project, I am utilizing BehaviourSubject from RXJS. Currently, I have a setup with 3 components: Inquiry Form Where users enter an ID number to check for summon-related information. This data ...

Tips for implementing pagination on a large JSON file without traditional pagination controls

Looking for the best way to implement pagination in a NextJs app that loads products from a local JSON file? This JSON file doesn't have any page properties, so the only option is to limit the number of products shown by using slice: {Object ...

Step by step guide on transferring data from one Angular 7 component to another component following API response retrieval

I have been tackling an issue related to an API recently. Upon receiving a response from the API, my goal is to pass the value to a child component. In this component, I will run a method to obtain a response and display it on the screen. Example Code: ...

Access the Angular application directly from the email

Our infrastructure consists of a .NET back-end, an Angular 5 application, and a nginx server. Upon registering your account in the application, you will receive an email with a verification link structured as follows: [root]/register/verify?userId=blabla& ...

filter failing to provide output

Issue with fetching partnername from the filter function, always returning undefined. administrationList = [ { "runid": 6, "partnerid": 2, "partnername": "test admin2", }, { "runid& ...

Guide to updating component after closing MatDialog and updating data in database using Angular 6

Currently, I am in the process of learning a MEAN stack app with Angular 6. My main focus right now is on refreshing the component after making any changes, such as adding or updating new clients/cars/drivers/bookings. The issue I'm facing is that aft ...

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

Tips for implementing Peer.js in Next.js using TypeScript?

Next.js has the ability to run on the server side, which can result in Peer.js throwing errors when used with Next.js. One user on Stack Overflow explains this issue: The error is likely due to peer js performing side effects during import. The suggest ...

Encountering an error while unit testing Angular components with MatDialog: "Error: <spyOn>: open has already been spied upon."

Once I create an HTML file with a button, I trigger a poll to appear after an onClick event. Then, when the "submit" button is clicked on the dialog window, it closes and I intend to execute subsequent methods. In my TypeScript file: openDialogWindow() { ...