The challenge of return types in TypeScript generic functions

Question

The challenge of return types in TypeScript generic functions

My goal is to set the return type of a function using TypeScript Generics. This way, the R can be defined as anything I choose.

... Promise<R | string> doesn't work for me.

Error

Error:(29, 9) TS2322: Type 'string' is not assignable to type 'R'. 'string' can be assigned to the constraint of type 'R', but 'R' might end up with a different subtype of constraint '{}'.

import { isString, } from '@redred/helpers';

interface P {
  as?: 'json' | 'text';
  body?: FormData | URLSearchParams | null | string;
  headers?: Array<Array<string>> | Headers | { [name: string]: string };
  method?: string;
  queries?: { [name: string]: string };
}

async function createRequest<R> (url: URL | string, { as, queries, ...parameters }: P): Promise<R> {
  if (isString(url)) {
    url = new URL(url);
  }

  if (queries) {
    for (const name in queries) {
      url.searchParams.set(name, queries[name]);
    }
  }

  const response = await fetch(url.toString(), parameters);

  if (response.ok) {
    switch (as) {
      case 'json':
        return response.json();
      case 'text':
        return response.text(); // <- Error
      default:
        return response.json();
    }
  }

  throw new Error('!');
}

export default createRequest;

typescript

Answer 1

Answer №1

To distinguish from the caller's side, I would opt for using overloads... if the caller specifies "text", then the return type will be Promise<string>, and the function won't be generic in R.

Note: TypeScript conventions typically assign single-character uppercase names for generic type parameters (such as T, U, K, and P). Therefore, I'll expand your P to Params. Additionally, since as is a reserved word in TypeScript, I'll use az instead. So, your interface will be:

interface Params {
  az?: "json" | "text";
  body?: FormData | URLSearchParams | null | string;
  headers?: Array<Array<string>> | Headers | { [name: string]: string };
  method?: string;
  queries?: { [name: string]: string };
}

Here are the proposed overloads. One non-generic signature that accepts only az of "text", and another generic one in R that allows az values as "json" or undefined/missing. The implementation can involve R | string or any since it remains hidden from the caller.

async function createRequest(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az: "text" }
): Promise<string>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az?: "json" }
): Promise<R>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params
): Promise<R | string> {
  if (isString(url)) {
    url = new URL(url);
  }

  if (queries) {
    for (const name in queries) {
      url.searchParams.set(name, queries[name]);
    }
  }

  const response = await fetch(url.toString(), parameters);

  if (response.ok) {
    switch (az) {
      case "json":
        return response.json();
      case "text":
        return response.text(); // <- okay now
      default:
        return response.json();
    }
  }

  throw new Error("!");
}

Below is how we'd use it to get text:

const promiseString = createRequest("str", { az: "text" }); // Promise<string>

And here's how we'd use it to get some other type by specifying R:

interface Dog {
  name: string;
  age: number;
  breed: string;
  fleas: boolean;
}

const promiseDog = createRequest<Dog>("dog", {}); // Promise<Dog>

Do remember that you can't request "text" when specifying R:

const notGeneric = createRequest<Dog>("dog", {az: "text"}); // error!
//                                     -----> ~~
// "text" is not assignable to "json" or undefined

I hope this explanation is valuable to you. Good luck!

Link to code

Answer 2

To distinguish from the caller's side, I would opt for using overloads... if the caller specifies "text", then the return type will be Promise<string>, and the function won't be generic in R.

Note: TypeScript conventions typically assign single-character uppercase names for generic type parameters (such as T, U, K, and P). Therefore, I'll expand your P to Params. Additionally, since as is a reserved word in TypeScript, I'll use az instead. So, your interface will be:

interface Params {
  az?: "json" | "text";
  body?: FormData | URLSearchParams | null | string;
  headers?: Array<Array<string>> | Headers | { [name: string]: string };
  method?: string;
  queries?: { [name: string]: string };
}

Here are the proposed overloads. One non-generic signature that accepts only az of "text", and another generic one in R that allows az values as "json" or undefined/missing. The implementation can involve R | string or any since it remains hidden from the caller.

async function createRequest(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az: "text" }
): Promise<string>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az?: "json" }
): Promise<R>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params
): Promise<R | string> {
  if (isString(url)) {
    url = new URL(url);
  }

  if (queries) {
    for (const name in queries) {
      url.searchParams.set(name, queries[name]);
    }
  }

  const response = await fetch(url.toString(), parameters);

  if (response.ok) {
    switch (az) {
      case "json":
        return response.json();
      case "text":
        return response.text(); // <- okay now
      default:
        return response.json();
    }
  }

  throw new Error("!");
}

Below is how we'd use it to get text:

const promiseString = createRequest("str", { az: "text" }); // Promise<string>

And here's how we'd use it to get some other type by specifying R:

interface Dog {
  name: string;
  age: number;
  breed: string;
  fleas: boolean;
}

const promiseDog = createRequest<Dog>("dog", {}); // Promise<Dog>

Do remember that you can't request "text" when specifying R:

const notGeneric = createRequest<Dog>("dog", {az: "text"}); // error!
//                                     -----> ~~
// "text" is not assignable to "json" or undefined

I hope this explanation is valuable to you. Good luck!

Link to code

The challenge of return types in TypeScript generic functions

Error

Answer №1

Similar questions

Error: Typings: Invalid syntax - Unexpected symbol =>

Retrieving the value of an object using an array of keys

What methods can be used to eliminate superfluous `require(...)` or `import "...` statements while working with Rollup?

Cropping and resizing images

Is there a way to mock a "find" call in mockingoose without getting back "undefined"?

How to set up scroll restoration for the Angular Standalone Router?

Angular: controller's property has not been initialized

What is the best way to handle missing values in a web application using React and TypeScript?

The stream.write function cannot be executed as a callable expression

Looking for the type definition file for the xss-clean npm library?

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports

Utilizing a GLTF asset as the main Scene element in a Three.js project

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

Leverage the template pattern in React and react-hook-form to access a parent form property efficiently

What is the reason behind the inability to invoke a method when a class explicitly inherits from Object?

Using type declaration, how can one create an arrow function?

Display and conceal table columns dynamically in Vue by utilizing the Vuetify data table functionality

Equivalents of If Statements in TypeScript using the Unique Walrus Operator

The data returned from the useFetch function is currently unavailable

Encountering the error message "React child is not valid as a Gatsby wrapRootElement" while using TypeScript with Gatsby