How to map objects in a discriminated union to functions they can be called with?

by

I’m afraid that you’re going to have to use a type assertion to avoid code duplication here. TypeScript’s type system just doesn’t have good support for these “correlated record types” or any manipulation that relies on the interaction of two union-typed values where the unions are not independent.

You’ve already arrived at the redundant-code-in-switch-statement workaround; here’s the unsafe-assertion workaround:

function assertNarrowFunction<F extends (arg: any) => any>(f: F) {
  return f as (arg: Parameters<F>[0]) => ReturnType<F>; // assert
}

That takes a function of a union type like ((a: string)=>number) | ((a: number)=>boolean) and unsafely narrows it to a function which takes the union of its parameter types and returns the union of its return type, like ((a: string | number) => string | number). This is unsafe because a function of the former union type could be something like const f = Math.random()<0.5 ? ((a: string)=>a.length) : ((a: number)=>number.toFixed()), which definitely does not match ((a: string | number) => string | number). I can’t safely call f(5) because maybe f is the string-length function.

Anyway, you can use this unsafe narrowing on renderFn to silence the error:

function renderFnAssertion(field: FormField) {
  const renderFn = assertNarrowFunction(fieldMapping[field.type]);
  renderFn(field.data); // okay
}

You’ve lied to the compiler a bit about the type of renderFn… not so much that it will accept any old argument (e.g., renderFn(123) will fail as desired), but enough that it would allow this:

function badRenderFn(field1: FormField, field2: FormField) {
  const renderFn1 = assertNarrowFunction(fieldMapping[field1.type]);
  renderFn1(field2.data); // no error!!! ooops
}

So you have to be careful.

Okay, hope that helps; good luck!

Link to code

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Interfaces vs Types in TypeScript
  3. Why does A | B allow a combination of both, and how can I prevent it?
  4. How to return value from function which has Observable subscription inside?
  5. Typescript Discriminated Union allows invalid state
  6. Why can’t I return a generic ‘T’ to satisfy a Partial?
  7. Parameters generic of overloaded function doesn’t contain all options
  8. Enforcing the type of the indexed members of a Typescript object?
  9. Constructor overload in TypeScript
  10. Typescript: Can I define an n-length tuple type?
  11. TypeScript 2: custom typings for untyped npm module
  12. Exclude/overwrite npm-provided typings
  13. How to use namespaces with import in TypeScript
  14. Difference between type[] and [type] in typescript
  15. How can I create an object based on an interface file definition in TypeScript?
  16. How can I define an array of objects?
  17. How to require a specific string in TypeScript interface
  18. Typescript has unions, so are enums redundant?
  19. Rules for the use of angle brackets in TypeScript
  20. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  21. ‘Property does not exist on type ‘never’
  22. Typescript type T or function () => T usage
  23. How to share code between TypeScript projects?
  24. How to make Typescript infer the keys of an object but define type of its value?
  25. Is there ArgumentsType like ReturnType in Typescript?
  26. What does a TypeScript index signature actually mean?
  27. Is it possible to narrow the types of overloaded parameters without exhaustively checking each parameter in the function body?
  28. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  29. TypeScript: deep partial?
  30. Is it possible to export * as foo in typescript

Leave a Comment