Conditional types fail to narrow down accurately

Question

Conditional types fail to narrow down accurately

My function has the capability to do either of the following:

Process a string search term and return a Promise
Process a string search term along with a callback function, returning nothing (void)

Here is how the implementation looks like:

function fetcher(term: string): Promise<Result[]> {
    return Promise.resolve([{id: 'foo'}, {id: 'bar'}])
}

type Callback = (results: Result[]) => void
function search<T>(term: string, cb?: T ): T extends Callback ?  void : Promise<Result[]> {
    const res = fetcher(term)

    if(cb) {
        res.then(data => cb(data)) // ❌  Type 'unknown' has no call signatures.(2349)
    } 

    return res // ❌ Type 'Promise<Result[]>' is not assignable to type 'T extends Callback ? Promise<Result[]> : void'.
}

const promise = search('key') // ✅ Promise<Result[]>
const v = search('key', () => {})  // ✅ void

There are two key issues that need addressing in this code:

The type of cb remains as unknown even after being used within the if(cb) statement
return res does not match the correct type, which should be Promise<Result[]>

What would be the proper way to define the types for such a function?

typescript

Answer 1

Answer №1

If you're interested, it's worth noting that achieving the same result without overloads is possible using conditionals in different ways. Just a heads up, here's one approach to accomplish it:

type Output = { id: string };

function dataFetcher(query: string): Promise<Output[]> {
  return Promise.resolve([{ id: "foo" }, { id: "bar" }]);
}

type CallbackFunction = (data: Output[]) => void;

type ReturnType<T> = [T] extends [CallbackFunction] ? void : Promise<Output[]>;
function searchData<T extends CallbackFunction | undefined>(
  query: string,
  callback?: T
): ReturnType<T> {
  const response = dataFetcher(query);

  if (callback) {
    response.then((result) => callback(result));
    return undefined as ReturnType<T>; // required for type assertion
  }

  return response as ReturnType<T>;
}

const searchPromise = searchData("keyword"); // ✅ Promise<Output[]>
const sampleSearch = searchData("keyword", () => undefined); // ✅ void

However, I personally wouldn't recommend this method as overloads tend to provide cleaner code.

Answer 2

If you're interested, it's worth noting that achieving the same result without overloads is possible using conditionals in different ways. Just a heads up, here's one approach to accomplish it:

type Output = { id: string };

function dataFetcher(query: string): Promise<Output[]> {
  return Promise.resolve([{ id: "foo" }, { id: "bar" }]);
}

type CallbackFunction = (data: Output[]) => void;

type ReturnType<T> = [T] extends [CallbackFunction] ? void : Promise<Output[]>;
function searchData<T extends CallbackFunction | undefined>(
  query: string,
  callback?: T
): ReturnType<T> {
  const response = dataFetcher(query);

  if (callback) {
    response.then((result) => callback(result));
    return undefined as ReturnType<T>; // required for type assertion
  }

  return response as ReturnType<T>;
}

const searchPromise = searchData("keyword"); // ✅ Promise<Output[]>
const sampleSearch = searchData("keyword", () => undefined); // ✅ void

However, I personally wouldn't recommend this method as overloads tend to provide cleaner code.

Conditional types fail to narrow down accurately

Answer №1

Similar questions

The parameter type 'string | null' cannot be assigned to the argument type 'string'. The type 'null' is not compatible with the type 'string'.ts(2345)

The search for global types seems to bewilder Mocha

Incorrect line numbers displayed in component stack trace [TypeScript + React]

Tips for Verifying Browser Closure Status in an Angular 4 Application

Unlocking the Power of Data Modelling in React and JavaScript

Determine whether a variable is set as private or read-only

Activate the mat-menu within a child component using the parent component

Issue with accessing undefined property in Angular 2+ using Typescript

Issue with running gulp ser on first attempt in SPFX

Tips for pausing execution until an asynchronous callback is finished?

Do not include properties with the NestJs condition

Setting up WebDriverIO to use ChromeDriver in non-headless mode on an Azure remote Linux agent can be achieved by following

Encountered an issue with fs.open where a non-literal argument was used at index 0 while utilizing a url

Unable to bring in an exported class from a TypeScript file

Guide to connecting data from the backend to the frontend in the select option feature using Angular 9

EventListener cannot be removed

Solving issues with malfunctioning Angular Materials

Cypress: Unable to properly stub API with cy.intercept()

Transform readonly properties into writable properties in TypeScript

Using the angular2-cookie library in an Angular 2 project built on the rc5 version