What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Question

What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Just a moment ago I posted this question on Stack Overflow, and now I have a follow-up query :)

Take a look at this code snippet:

import { ClassConstructor } from "class-transformer";
import { useQuery as useApolloQuery } from "@apollo/client";

class Book {
  readonly many = "books" as const;
  bookData: any;
}

export const useQueryWrapper = <T>(cls: ClassConstructor<T>, queryString) => {
  return useApolloQuery<{ [cls.prototype.many]: T[] }>(queryString);
};

const { data } = useQueryWrapper(Book, "..."); // Book or any other class with a literal `many` prop

TypeScript currently recognizes the 'data' variable as:

const data: {} | undefined

I want TypeScript to infer that 'data' should contain a property named 'books'

const data: {
    books: Book[];
} | undefined

Is there a way to achieve this?

typescript typescript-typings apollo-client typescript-generics class-transformer

Answer 1

Answer №1

To achieve this functionality, a combination of index access types and mapped types can be used (check out the playground):

class Book {
  readonly many = "books" as const;
  bookData: any;
}

class Page {
  readonly many = "pages" as const;
  bookData: any;
}

type ManyType = { readonly many: string };

type QueryResult<T extends ManyType> = {
  // using K in T["many"] to create an object with a key of value T["many"], e.g. "books", "pages", etc.
  [K in T["many"]]: T[]; 
};

type ClassConstructor<T> = new (...args: any[]) => T;

function useQueryWrapper<T extends ManyType>(
  cls: ClassConstructor<T>,
  queryString: string
): QueryResult<T> | undefined {
  return {} as any;
}

const books = useQueryWrapper(Book, "...")?.books; // Book[] | undefined
const pages = useQueryWrapper(Page, "...")?.pages; // Page[] | undefined

Answer 2

To achieve this functionality, a combination of index access types and mapped types can be used (check out the playground):

class Book {
  readonly many = "books" as const;
  bookData: any;
}

class Page {
  readonly many = "pages" as const;
  bookData: any;
}

type ManyType = { readonly many: string };

type QueryResult<T extends ManyType> = {
  // using K in T["many"] to create an object with a key of value T["many"], e.g. "books", "pages", etc.
  [K in T["many"]]: T[]; 
};

type ClassConstructor<T> = new (...args: any[]) => T;

function useQueryWrapper<T extends ManyType>(
  cls: ClassConstructor<T>,
  queryString: string
): QueryResult<T> | undefined {
  return {} as any;
}

const books = useQueryWrapper(Book, "...")?.books; // Book[] | undefined
const pages = useQueryWrapper(Page, "...")?.pages; // Page[] | undefined

What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Answer №1

Similar questions

The use of throwError(error) has been phased out, however, no replacement has been introduced for the Error(HttpErrorResponse)

What is the best way to update multiple data tables using TypeScript?

The creation of a Firebase user account with the specified email and password

TypeScript error message: "The 'new' keyword cannot be used with an expression that does not have a call or construct signature."

How can one trigger a service method in nestjs through a command?

Is it recommended to include modules in the Imports section of SharedModule in Angular?

Using TypeORM to update a relation and set it to NULL

In Angular, is there a way to transform time into the format of YYYY-MM-DDThh:mm:ssTZD?

What is the proper way to access the global `angular` variable in Angular and TypeScript when using AngularJS?

Error in parsing: An unexpected symbol appeared, an identifier or keyword was expected at the end of the expression

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

Reactjs may have an undefined value for Object

Is app.component.ts necessary in an Angular 2 project?

Modifying the value of a property in an object array created using the map method is ineffective

Issue with VueJS 2 and TypeScript: computed value unable to recognize property specified in data object

Enhance user experience by enabling clickable links in Angular comment sections

The cause of Interface A improperly extending Interface B errors in Typescript

Tips for capturing an error generated by a child component's setter?

Configuring Jest with TypeScript: A guide to setting up and running tests across multiple files

A guide on instantly updating displayed flat/section list elements in React Native