如何为 Typescript 中的未知 object 属性动态分配名称和类型

Question

I'm using Shopify's rest client for node and its request and response look something like this:

• request

client.get({
  path: 'orders/count.json',
  query: { fulfillment_status: 'unfulfilled' }
})

• If there's an error:

{
  "errors": "[API] Invalid API key or access...",
  "code": 2342,
  "statusText": "Authentication Error",
  "Headers": "..."
}

• If there's no error:

{
  "body": { "count": 8 },
  "code": 2342,
  "statusText": "Authentication Error",
  "Headers": "..."
}

I'd like to add some boilerplate over this client library so that I can get the typings of the response. This is what I'm trying to do but it's not working too well:

const customClient = {

  get: async <T, K extends string>(params: GetRequestParams) => {
      const response = (await client.get(params));
      if (response.body.errors) return { errors: response.body.errors };
      // somehow index it. obviously not with the type declaration???
      return { [K]: response.body[K] as T };
    },

}

With the hopes that I can use it as.

const { count, error } = customClient.get<number, "count">({ ... });

Any help would be appreciated. I have an entire file of the Shopify API types that I would like to leverage. A solution to this would be perfect

Answer 1

A possible implementation can look like this:

const customClient = {
  get: async <T, K extends string>(params: GetRequestParams): 
      Promise<Partial<Record<K, T> & { errors: string }>> => 
    {
      const response = (await client.get(params));
      if (response.body.errors) return { errors: response.body.errors } as any;

      return { 
        [Object.keys(response)[0]]: response[Object.keys(response)[0]] 
      } as any
    },
}

As you correctly noted, we can't use the TypeScript generic types when constructing the returning object. We need to use JavaScript features instead. In this case I just took the first key of the response and used it for the key of the returning object as well as to index the response object.

The return type of the function is a Promise consisting of both a Record with K and T as keys and values and the error type. I used Partial here since they are not both required.

Destructing the response leads to the correct types now:

async function main(){
  const { count, errors } = await customClient.get<number, "count">({} as any);
  // count: number | undefined
  // errors: string | undefined
}

Playground