使用 Typescript 从开关盒返回的类型推断

Question

type of the functions

type fn01 = (name: string) => void
type fn02 = (age: string) => void
type fn03 = (description: number) => void

I have this case:

type Options = 'op1' | 'op2' | 'op3'

const test = (options) => {
    switch(options) {
          case 'op1':
            return fn01
          case 'op2':
            return fn02
          case 'op3':
            return fn03
          default
            return null;
        }
    }

Function Usage:

const chosenFN = test('op1');

choseFN()

When using the chosenFN it should show the type from the function that would be fall into the switch case, but instead shows a Intersection of all of them.

What am I missing? I thought that since the function that's used is inside of a switch case, it would infer the correct type based on the argument passed.

Thanks, Renan

Answer 1

In order to achieve that, you need to use function overloads - https://www.typescriptlang.org/docs/handbook/functions.html#overloads :

type Options = 'op1' | 'op2' | 'op3'
type fn01 = (name: string) => void
type fn02 = (age: string) => void
type fn03 = (description: number) => void

// here overloads - define output for every input
function test(a: 'op1'): fn01;
function test(a: 'op2'): fn02;
function test(a: 'op3'): fn03;

function test(options: Options) {
    switch(options) {
      case 'op1':
        return (name: string) => {}
      case 'op2':
        return (age: string) => {}
      case 'op3':
        return (description: number) => {}
      default:
        throw new Error('no such value')  
      }
}

const f = test('op1') // it is fn01

Answer 2

The compiler does not generally infer function return types that depend on which specific value was input into it. Control flow type analysis acts to narrow the types of concrete-typed variables inside the function implementation, and so the switch statement serves to know that options is exactly op2 (for example) inside the relevant case block, but control flow analysis doesn't do much to the return type of the function.

Generally the inferred return type of a function will be the union of all the types that are return ed from the function, irrespective of control flow analysis. That means the signature of test() is inferred as something like function test(options: Options): fn01 | fn02 | fn03 | null function test(options: Options): fn01 | fn02 | fn03 | null function test(options: Options): fn01 | fn02 | fn03 | null .

When you go to actually call a function of type fn01 | fn02 | fn03 | null fn01 | fn02 | fn03 | null fn01 | fn02 | fn03 | null , you will run into trouble. With the --strictNullChecks compiler option on, you can't call it at all (and you probably should use the --strict compiler options, since they catch bugs).

Assuming you have a function of type fn01 | fn02 | fn03 fn01 | fn02 | fn03 fn01 | fn02 | fn03 (and you've verified that it's not null ), you still can't really call it. Support for calling unions of functions was improved in TypeScript 3.5, but still, the only safe thing you can pass to a union of functions is the intersection of its parameters. And the intersection string & string & number has no members (there are no values that are both string and number in JavaScript), meaning it is never , and thus it's completely uncallable.

---

So, that's why it doesn't work. To fix it, you'll either have to use function overloads , or annotate the function to be generic , where options is of generic type O extends Options .

Overloads are easy but they are not really type safe.

The generic type has the potential to be more type safe, but not when you use switch , which exposes a current limitation of TypeScript whereby control flow analysis is unable to narrow the types of generic-typed variables.

The safest way to do it would be to use a mapping object instead of a switch statement:

const test = <O extends Options>(options: O) => ({
    op1: fn01,
    op2: fn02,
    op3: fn03
}[options]);

This is properly inferred to be a generic function where each input type maps to a particular function output type:

const chosenFN = test('op1'); // (name: string) => void
chosenFN("okay") // okay
test('op2')("age is a string I guess"); // okay
test('op3')(8675309); // okay

Link to code