Identifying Classifications Based on Input Parameters

Question

Identifying Classifications Based on Input Parameters

I'm encountering some difficulty in typing a function that calls an external API and returns data based on the parameters sent. Here is what I have so far...

import axios from 'axios';

interface IGetContactArgs {
  properties?: string[];
}

interface IResponse {
  id: number,
  properties: {
    [index: string]: any;
  }
}

const getContact = (id: number, params?: IGetContactArgs) => {
  return axios.get<IResponse>(`URL/${id}`, { params });
}

For example, when invoking this function like so...

const data = await getContact(0, { properties: ['name', 'img' ] });

The expected result would be...

{
  "id": 0,
  "properties": {
     "name": "John",
     "img": "https://imageurl.com/image",
  }
}

I'm wondering if there might be a more efficient way to type this function so that the output object matches the specific types of inputs provided?

typescript

Answer 1

Answer №1

Your message is a bit unclear, but if you like the code below:

function fetchDetails<T extends number, S extends string>(
  id: T,
  params: { fields: S[] }
): {
  id: T;
  details: {
    [K in S]: string;
  };
} {
  return {} as any;
}

// The type will be inferred when you invoke the function with specific parameters
const data = fetchDetails(0, { fields: ["name", "age"] });

All types will be automatically determined during invocation without the need for additional interfaces.

Answer 2

Your message is a bit unclear, but if you like the code below:

function fetchDetails<T extends number, S extends string>(
  id: T,
  params: { fields: S[] }
): {
  id: T;
  details: {
    [K in S]: string;
  };
} {
  return {} as any;
}

// The type will be inferred when you invoke the function with specific parameters
const data = fetchDetails(0, { fields: ["name", "age"] });

All types will be automatically determined during invocation without the need for additional interfaces.

Answer 3

Answer №2

A potential improvement can be made by utilizing [generics][1].

It appears that you are passing properties from a specific type, such as Content.

You have the ability to specify the accepted values for properties within the array and determine the response type based on the Content type.

I have extracted the given type in the parameter and linked it to the response.

import axios from 'axios';

interface ContentType {
   name: string;
   img: string;
}

interface IResponse<T extends keyof ContentType> {
  id: number,
    properties: Record<T, any>;
}

const getContact = <T extends keyof ContentType>(id: number, params?: {properties: T[]}) => {
  return axios.get<IResponse<T>>(`URL/${id}`, { params });
}

const data = await getContact(0, { properties: ['name'] });

The Content type ensures the prevention of passing arbitrary strings into the properties using generics.

Playground Link

Answer 4

A potential improvement can be made by utilizing [generics][1].

It appears that you are passing properties from a specific type, such as Content.

You have the ability to specify the accepted values for properties within the array and determine the response type based on the Content type.

I have extracted the given type in the parameter and linked it to the response.

import axios from 'axios';

interface ContentType {
   name: string;
   img: string;
}

interface IResponse<T extends keyof ContentType> {
  id: number,
    properties: Record<T, any>;
}

const getContact = <T extends keyof ContentType>(id: number, params?: {properties: T[]}) => {
  return axios.get<IResponse<T>>(`URL/${id}`, { params });
}

const data = await getContact(0, { properties: ['name'] });

The Content type ensures the prevention of passing arbitrary strings into the properties using generics.

Playground Link

Identifying Classifications Based on Input Parameters

Answer №1

Answer №2

Similar questions

Encountering a problem while bringing in screens: 'The file screens/xxx cannot be located within the project or any of these folders.'

Exploring Iteration of TypeScript Arrays in ReactJS

The initial click may not gather all the information, but the subsequent click will capture all necessary data

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

Why am I getting the "Cannot locate control by name" error in my Angular 9 application?

Enhancing a Given Interface with TypeScript Generics

Issue with accessing class property in events.subscribe in Ionic3

How can I retrieve routing parameters in a Vue.js/Nuxt/TypeScript app?

Error: Attempting to add types to an object returned from the .map function in JSX Element

Tips for simulating or monitoring an external function without an object using Typescript 2 and Jasmine 2 within an Angular 4 application

Tips for utilizing single quotation marks while logging multiple variables in console

Exploring TypeScript Generics and the Concept of Function Overloading

Displaying a collection of objects in HTML by iterating through an array

The Jest worker has run into 4 child process errors, surpassing the maximum retry threshold

Filtering the data in the table was successful, but upon searching again, nothing was found. [Using Angular, Pagination, and

Mastering unit testing with Behaviour Subjects in Angular

Angular 6: Harnessing the Power of RouterLinks

How to convert an attribute of an object within a list to a string separated by commas in TypeScript and Angular

What is the proper way to manage the (ion select) OK Button?

Exploring the concept of union return types in TypeScript