How to type a function expression and its inner object - TypeScript 3

Question

Example:

interface IFetcher {
  response: any
  error: any
}

const Fetcher = (url: string): IFetcher => {
  // loads of code here
  return { response, error }
}

Fetcher function returns a response and error, how can i dynamically type my response and error objects, like using some dynamic type arguments?

If i consume my function:

const { response, error } = Fetcher('https://example.com')

I can type it:

const { response, error }: { response: MyCustomInterface, error: MyErrorInterface } = Fetcher('https://example.com')

I need to type response and error differently, depending on the use case. But above example looks kind of ugly. What's the better way to approach this?

UPDATED CODE

interface IFetcher {
  (url: string, method: string, body: unknown, headers?: any): {
    response: unknown;
    error: unknown;
  };
  <T, U>(url: string, method: string, body: unknown, headers?: any): {
    response: T;
    error: U;
  };
}

Shanon Jackson · Accepted Answer · 2020-02-12 06:14:38Z

1

interface Fetcher {
    (url: string): {response: unknown, error: unknown}
    <T, U>(url: string): {response: T, error: U}
}
const Fetcher: Fetcher = (url: string) => {
  // loads of code here
    return { response, error } as any;
}

const { response, error } = Fetcher<string[], string>("/api/get-users") // types provided
const test = response; // string[]
const err = error; // string.


const { response: res, error: er } = Fetcher("/api/get-users") // no types provided.
const testType = res; // unknown
const testNext = er; // unknown

let me know if this is what you want.

answered Feb 12, 2020 at 6:14

Shanon Jackson

6,6511 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Kim Over a year ago

What if Fetcher would have more than 1 argument, like: Fetcher = (url: string, method: string)? And <T, U> could be any letter actually? Like <S, G>? Also a bit detailed explanation on interface Fetcher {} would be awesome, for example, why do you use (url: string) twice?

Shanon Jackson Over a year ago

Yeah can have as many arguments as you want, and letters are irrelevant there just placeholders for dynamic types the same way letters are replacement for dynamic numbers in math

Alexander Kim Over a year ago

I've added updated section to my question, please, take a look at it. It's kind of repetitive.

Collectives™ on Stack Overflow

How to type a function expression and its inner object - TypeScript 3

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related