TypeScript error on overloaded arrow function implementation

Question

I'm attempting to create a factory function which accepts an array of { item: T; weight: number } and returns an object with a method pick, which in turn would return either T or T[], based on whether it is called with a defined quantity option or not:

type PickOneOptions = {
  quantity: undefined;
};

type PickManyOptions = {
  quantity: number;
};

type PickOptions = PickOneOptions | PickManyOptions;

type WeightedItem<T> = { item: T; weight: number };

type WeightedTable<T> = {
  pick: {
    (): T;
    (options: PickOneOptions): T;
    (options: PickManyOptions): T[];
  };
};

However, using my current type definitions, TypeScript complains that 'T' could be instantiated with an arbitrary type which could be unrelated to 'T | T[]'. in the method's implementation. Interestingly, casting either of the return values to any (either one of the two possible branches) silences the issue.

The return values do work as expected whether I silence the error or not:

const createWeightedTable = <T>(items: WeightedItem<T>[]): WeightedTable<T> => {
  const totalWeight = items.reduce((prev, curr) => prev + curr.weight, 0);

  return {
    pick: (options?: PickOptions) => { // 'T' could be instantiated with an arbitrary type which could be unrelated to 'T | T[]'.
      const { quantity } = options ?? {};
      const weightedItems = items;

      let random = Math.random() * totalWeight;

      if (quantity === undefined) {
        for (const weightedItem of weightedItems) {
          random -= weightedItem.weight;

          if (random <= 0) {
            return weightedItem.item;
          }
        }

        throw new Error();
      }

      const result: T[] = [];

      for (let i = 0; i < quantity; i++) {
        for (const weightedItem of items) {
          random -= weightedItem.weight;

          if (random <= 0) {
            result.push(weightedItem.item);
          }
        }
      }

      return result;
    },
  };
};

const table = createWeightedTable([
  {
    item: 'a',
    weight: 1
  },
  {
    item: 'b',
    weight: 1
  }
])

const resultOne = table.pick(); // string

const resultMany = table.pick({ quantity: 2 }); // string[]

Playground

What's causing that error? And how could I fix it without resorting to type assertion?

Answer 1

You've made the pick property of WeightedTable<T> an overloaded method with multiple call signatures. As such, Typescript currently does not really support implementing it with an arrow function as you've done. This is a known issue, described at microsoft/TypeScript#47669. The easiest way to fix it is to replace it with a function statement:

const createWeightedTable = <T>(items: WeightedItem<T>[]): WeightedTable<T> => {
  const totalWeight = items.reduce((prev, curr) => prev + curr.weight, 0);

  function pick(): T;
  function pick(options: PickOneOptions): T;
  function pick(options: PickManyOptions): T[];
  function pick(options?: PickOptions) {    
    const { quantity } = options ?? {};
    const weightedItems = items;    
    let random = Math.random() * totalWeight;    
    if (quantity === undefined) {
      for (const weightedItem of weightedItems) {
        random -= weightedItem.weight;    
        if (random <= 0) { return weightedItem.item; }
      }
      throw new Error(); // should never happen
    }    
    const result: T[] = [];    
    for (let i = 0; i < quantity; i++) {
      for (const weightedItem of items) {
        random -= weightedItem.weight;    
        if (random <= 0) { result.push(weightedItem.item); }
      }
    }    
    return result;
  }

  return { pick }; // okay
};

The implementation is unchanged, because the call signatures are declared to match the required type, then the compiler is happy when you return an object with the function as the pick method.

---

Do note that overloads are a rough spot in TypeScript's type system in multiple ways. The compiler does not really try to verify that a function implementation meets all the separate call signatures. Instead you are forced to choose between potential false positives (errors for safe code) and potential false negatives (no errors for unsafe code). Take a simple case like

function flip(x: true): false;
function flip(x: false): true;
function flip(x: boolean) {
  return !x
}

That compiles, but not because the compiler has followed the intended logic. Instead all it does is make sure that the implementation accepts all possible calls (so x is true or x is false) and that the outputs cover the possible calls (so either false or true), but it doesn't actually care which outputs go with which inputs. So there's no error here:

function flip(x: true): false;
function flip(x: false): true;
function flip(x: boolean) {
  return x; // <-- oops!
}

This is discussed at microsoft/TypeScript#13235; it is considered too complex to try to make the compiler accurately verify overload implementations. So you get this too-lax behavior.

So while pick is now accepted using an overloaded function statement, you need to be careful that you've implemented it properly. Return the wrong output for an input, and it will still properly compile.

On the other hand, when you try to start assigning functions with a single call signature to places that expect an overload, you get the other problem: the compiler cannot verify that it meets the overload, and it complains even for safe code:

const flipArrow: typeof flip = x => !x // error!

That's the problem you ran into originally with pick. You can also choose to address this via type assertion with something like the any type to disable type checking of the expression:

const flipArrow: typeof flip = x => !x as any // okay

which is just another way of trading potential false positives for potential false negatives.

---

So no matter what you do here, you're not going to get the sort of compiler-verified type safety you might hope for, and it's probably just personal preference whether you want to refactor to too-lax function statements or add a too-lax type assertion.

Playground link to code