Enforcing a discriminated union's match requirements

Question

Enforcing a discriminated union's match requirements

Challenging Situation

I'm new to typescript and facing the task of converting the mapProps function provided below into typescript

const addOne = x => x + 1
const upperCase = x => x.toUpperCase()

const obj = {
  entry: 'legend',
  fauna: {
    unicorns: 10,
    zombies: 3
  },
  other: {
    hat: 2
  }
}

const fns = {
  entry: upperCase,
  fauna: {
    unicorns: addOne
  },
  other: obj => ({
      hat: addOne(obj.hat)
  })
}

const mapProps = (obj, fns) => 
    Object.keys(fns).reduce(
        (acc, cur) => ({
            ...acc,
            [cur]: fns[cur] instanceof Function
                ? fns[cur](obj[cur])
                : mapProps(obj[cur], fns[cur])
        }),
        obj
    )

mapProps(obj, fns) 
// { entry: 'LEGEND', fauna: { unicorns: 11, zombies: 3 }, other: { hat: 3 } }

Current Struggle

type MapPropFuncsOf<T> = {
    [P in keyof T]?: ((x:T[P]) => T[P]) | MapPropFuncsOf<T[P]>
}

const mapProps = <T>(obj:T, fns: MapPropFuncsOf<T>) => 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) => ({
            ...acc,
            [cur]: fns[cur] instanceof Function
                ? fns[cur]!(obj[cur]) // compiler warning
                : mapProps(obj[cur], fns[cur]) // compiler warning
        }),
        obj
  )

Obstacles Faced

Despite validating that fns[cur] instanceof Function, I am struggling to call fns[cur]. The typescript compiler raises the following errors:

Cannot invoke an expression whose type lacks a call signature. Type 'MapPropFuncsOf | ((x: T[keyof T]) => T[keyof T])' has no compatible call signatures.

The call to mapProps(obj[cur], fns[cur]) also encounters issues with the compiler reporting:

Argument of type 'MapPropFuncsOf | ((x: T[keyof T]) => T[keyof T]) | undefined' is not assignable to parameter of type 'MapPropFuncsOf'. Type 'undefined' is not assignable to type 'MapPropFuncsOf'.

Playground Link

typescript

Answer 1

Answer №1

The primary issue arises from typescript's inability to narrow index expressions containing dynamic values. A straightforward solution is to store the value in a variable.

declare var o: { [s: string]: string | number }
declare var n: string
if(typeof o[n] === "string") { o[n].toLowerCase(); } //error

let v = o[n]
if(typeof v === "string") { v.toLowerCase(); } // ok

This modification ensures that the function call does not throw an error:

const mapProps = <T>(obj:T, fns: MapPropFuncsOf<T>): T => 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur], null) 
                : mapProps(obj[cur], fns[cur]) 
        })
      },
        obj
  )

Although the updated code isn't flawless. The issue with calling fn with two arguments is due to an inconsistency in the codebase. It's crucial to remember that nothing prevents T from having function properties, leading to unintentional function calls. To address this, we can constrain T to exclude any functions:

type MapPropFuncsOf<T extends Values> = {
    [P in keyof T]?: ((x:T[P]) => T[P]) | (T[P] extends Values ? MapPropFuncsOf<T[P]>: T[P])
}

interface Values {
  [s: string] : string | number | boolean | null | undefined | Values
}

const mapProps = <T extends Values>(obj:T, fns: MapPropFuncsOf<T>) => 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur])  // fully checked now
                : mapProps(obj[cur], fns[cur]) 
        })
      },
        obj
  )

Further issues arise when calling mapProps, stemming from similar underlying problems. With the added constraint T extends Values, only compatible inputs can invoke mapProps. Using a type assertion or custom guards can resolve the final issue where object types fail to narrow down properly.

Additionally, recursively calling mapProps might be unnecessary for primitive types. Implementing a custom guard solely checking for object addresses this concern.

type MapPropFuncsOf<T extends Values> = {
    [P in keyof T]?: ((x:T[P]) => T[P]) | (T[P] extends Values ? MapPropFuncsOf<T[P]>: T[P])
}

interface Values {
  [s: string] : string | number | boolean |  Values
}
function isValues(o: Values[string]) : o is Values {
  return typeof o === "object"
}
const mapProps = <T extends Values>(obj:T, fns: MapPropFuncsOf<T>) : T=> 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          var o = obj[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur]) 
                : (isValues(o) ? mapProps(o, fn as any) : o)
        })
      },
        obj
  )

The challenge of ensuring fn conforms to MapPropFuncsOf persists, necessitating the use of fn as any. While striving for full type integrity in the function implementation is commendable, TypeScript's limitations may require slight compromises for practicality. Explicitly addressing such deviations and justifying them are essential in maintaining a balance between type safety and functionality. An alternative version utilizing type assertions is available in another response, obviating the need for duplication here.

Answer 2

The primary issue arises from typescript's inability to narrow index expressions containing dynamic values. A straightforward solution is to store the value in a variable.

declare var o: { [s: string]: string | number }
declare var n: string
if(typeof o[n] === "string") { o[n].toLowerCase(); } //error

let v = o[n]
if(typeof v === "string") { v.toLowerCase(); } // ok

This modification ensures that the function call does not throw an error:

const mapProps = <T>(obj:T, fns: MapPropFuncsOf<T>): T => 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur], null) 
                : mapProps(obj[cur], fns[cur]) 
        })
      },
        obj
  )

Although the updated code isn't flawless. The issue with calling fn with two arguments is due to an inconsistency in the codebase. It's crucial to remember that nothing prevents T from having function properties, leading to unintentional function calls. To address this, we can constrain T to exclude any functions:

type MapPropFuncsOf<T extends Values> = {
    [P in keyof T]?: ((x:T[P]) => T[P]) | (T[P] extends Values ? MapPropFuncsOf<T[P]>: T[P])
}

interface Values {
  [s: string] : string | number | boolean | null | undefined | Values
}

const mapProps = <T extends Values>(obj:T, fns: MapPropFuncsOf<T>) => 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur])  // fully checked now
                : mapProps(obj[cur], fns[cur]) 
        })
      },
        obj
  )

Further issues arise when calling mapProps, stemming from similar underlying problems. With the added constraint T extends Values, only compatible inputs can invoke mapProps. Using a type assertion or custom guards can resolve the final issue where object types fail to narrow down properly.

Additionally, recursively calling mapProps might be unnecessary for primitive types. Implementing a custom guard solely checking for object addresses this concern.

type MapPropFuncsOf<T extends Values> = {
    [P in keyof T]?: ((x:T[P]) => T[P]) | (T[P] extends Values ? MapPropFuncsOf<T[P]>: T[P])
}

interface Values {
  [s: string] : string | number | boolean |  Values
}
function isValues(o: Values[string]) : o is Values {
  return typeof o === "object"
}
const mapProps = <T extends Values>(obj:T, fns: MapPropFuncsOf<T>) : T=> 
    (Object.keys(fns) as (keyof T)[]).reduce(
        (acc, cur) =>
        {
          var fn = fns[cur];
          var o = obj[cur];
          return ({
            ...acc,
            [cur]: typeof fn === "function"
                ? fn(obj[cur]) 
                : (isValues(o) ? mapProps(o, fn as any) : o)
        })
      },
        obj
  )

The challenge of ensuring fn conforms to MapPropFuncsOf persists, necessitating the use of fn as any. While striving for full type integrity in the function implementation is commendable, TypeScript's limitations may require slight compromises for practicality. Explicitly addressing such deviations and justifying them are essential in maintaining a balance between type safety and functionality. An alternative version utilizing type assertions is available in another response, obviating the need for duplication here.

Answer 3

Answer №2

Let's kick things off from the very start. Your modifiers seem to be lacking types. Let's rectify that.

const increment = (x: number) => x + 1;
const capitalize = (x: string) => x.toUpperCase();

Both of these functions can be classified as identity functions — they take an argument of a certain type and return the same type.

type Identity<T> = (argument: T) => T;

Your set of fns consists of such identity functions. Once we're finished, the type of obj won't change. But it's not always so straightforward — sometimes the identity function applies to a primitive value, other times to a part of your object. If we were to represent the relationship between obj and fns, it might look something like this:

type DeepIdentity<T> = {
  [K in keyof T]?: T[K] extends object
    ? DeepIdentity<T[K]> | Identity<T[K]>
    : Identity<T[K]>
}

Let's test our hypothesis.

const fns: DeepIdentity<typeof obj> = {
  entry: capitalize,
  creatures: {
    dragons: increment,
  },
  additional: obj => ({
      crown: increment(obj.crown)
  })
}

Now, your processing function could be written as:

const process = <T>(input: T, transformers: DeepIdentity<T>): T =>
  (Object.keys(input) as (keyof T)[])
    .reduce(
      (accumulator, property) => {
        const transformer = transformers[property];
        const value = input[property];

        return Object.assign(accumulator, {
          [property]: (transformer === undefined)
            ? value
            : (transformer instanceof Function)
              ? transformer(value)
              : process(value, transformer as DeepIdentity<typeof value>)
        });
      },
      {} as T
    )

process(obj, fns); // { "entry": "ROYALTY", "creatures": { "dragons": 13, "elves": 8 }, "additional": { "crown": 8 } }

Answer 4

Let's kick things off from the very start. Your modifiers seem to be lacking types. Let's rectify that.

const increment = (x: number) => x + 1;
const capitalize = (x: string) => x.toUpperCase();

Both of these functions can be classified as identity functions — they take an argument of a certain type and return the same type.

type Identity<T> = (argument: T) => T;

Your set of fns consists of such identity functions. Once we're finished, the type of obj won't change. But it's not always so straightforward — sometimes the identity function applies to a primitive value, other times to a part of your object. If we were to represent the relationship between obj and fns, it might look something like this:

type DeepIdentity<T> = {
  [K in keyof T]?: T[K] extends object
    ? DeepIdentity<T[K]> | Identity<T[K]>
    : Identity<T[K]>
}

Let's test our hypothesis.

const fns: DeepIdentity<typeof obj> = {
  entry: capitalize,
  creatures: {
    dragons: increment,
  },
  additional: obj => ({
      crown: increment(obj.crown)
  })
}

Now, your processing function could be written as:

const process = <T>(input: T, transformers: DeepIdentity<T>): T =>
  (Object.keys(input) as (keyof T)[])
    .reduce(
      (accumulator, property) => {
        const transformer = transformers[property];
        const value = input[property];

        return Object.assign(accumulator, {
          [property]: (transformer === undefined)
            ? value
            : (transformer instanceof Function)
              ? transformer(value)
              : process(value, transformer as DeepIdentity<typeof value>)
        });
      },
      {} as T
    )

process(obj, fns); // { "entry": "ROYALTY", "creatures": { "dragons": 13, "elves": 8 }, "additional": { "crown": 8 } }

Enforcing a discriminated union's match requirements

Answer №1

Answer №2

Similar questions

Adding a fresh element to an array in Angular 4 using an observable

What could be causing Typescript Compile Errors to occur during runtime?

Leverage TypeScript to generate a unified object that combines keys from multiple objects

How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

Handling linting errors for getInitialProps return type in NextJS with Typescript

You can easily search and select multiple items from a list using checkboxes with Angular and TypeScript's mat elements

Guide on executing get, modify, append, and erase tasks on a multi-parameter JSON array akin to an API within Angular

Exploring the power of nested components within Angular 2

Making Angular Material compatible with Webpack and TypeScript

Angular Form Validations - input values must not match the initial values

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Vuetify's v-data-table is experiencing issues with displaying :headers and :items

What is the best way to incorporate node modules into my tsconfig file?

What is the best way to combine two functions for the "value" attribute in a TextField?

Encountering an issue with TS / yarn where an exported const object cannot be utilized in a consuming

Issue with Figma React plugin's PostMessage functionality not behaving as anticipated

Encasing event handler callback within Observable pattern

Having trouble getting Lodash find to work properly with TypeScript overload signatures

What is the best way to send various parameters to a component using [routerLink] or router.navigate?

What is the best way to ensure that my mat-slide-toggle only changes when a specific condition is met?