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 data type 'string' cannot be assigned to the data type 'Position'

Facing problem with implementing NgMoudleFactoryLoader for lazy loading in Angular 8

Error encountered when trying to use the .find function in Typescript: "The expression is not callable."

``If you're looking to integrate a 360-degree product viewer into your Angular application, here is a

By constantly subscribing to a Behavior Subject, updating the data, and then resetting the value, an endless loop is created

Unable to retrieve values using any = {} in TypeScript Angular 8

ngPrime table column selection and data extraction

typescript - instantiate an object using values stored in an array

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

What is the best way to apply ngClass to style a JSON object based on its length?

Enhance your text in TextInput by incorporating newline characters with advanced editing features

An error has occurred in Typescript stating that there is no overload that matches the call for AnyStyledComponent since the update to nextjs

Does the router navigate function instantly update the router URL?

@ngrx effects ensure switchmap does not stop on error

Printing from a lengthy React DOM using window.print only generates a single page

The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

In TypeScript, Firestore withConverter may return a QueryDocumentSnapshot instead of the expected Class object

Submitting Data in Ionic 3 using Http Post and Storing in Sqlite with Angular 4

Difficulties with managing button events in a Vue project

How to apply dynamic styling to a MatHeaderCell using NgStyle?