如何重用链式函数 Javascript + Typescript

Question

I'm using Typescript and creating a form validation library with chained methods, but I'm stuck trying to reuse functions because of the this return, I will exemplify in a simpler way:

const schema = {
  computer() {
    return {
      turnOn() {
        console.log('turn on')
        return this
      },
      openVscode() {
        console.log('open vscode')

        return this
      },
      work() {
        console.log('work')
        return this
      },
      turnOff() {
        console.log('turn off')
        return this
      }
    }
  },
  phone() {
    return {
      turnOn() {
        console.log('turn on')
        return this
      },
      takeSelfies() {
        console.log('take selfies')

        return this
      },
      callToMom() {
        console.log('call to mom')
        return this
      },
      turnOff() {
        console.log('turn off')
        return this
      }
    }
  }
}

everything works fine.

const devices = {
  iMac: schema.computer().turnOn().openVscode().work().turnOff(),
  iPhone: schema.phone().turnOn().takeSelfies().callToMom().turnOff()
}

but when I try to separate the repeated functions in another file, for example

const mixed = {
  turnOn() {
    console.log('turn on')
    return this
  },
  turnOff() {
    console.log('turn off')
    return this
  }
}

to reuse

const newSchema = {
  computer() {
    return {
      ...mixed,
      openVscode() {
        console.log('open vscode')

        return this
      },
      work() {
        console.log('work')
        return this
      }
    }
  },
  phone() {
    return {
      ...mixed,
      takeSelfies() {
        console.log('take selfies')

        return this
      },
      callToMom() {
        console.log('call to mom')
        return this
      }
    }
  }
}

I'm stuck

I know this is because the this of the mixed object returns only the content itself, but I don't know how to solve this problem.

I thank you all!

Answer 1

This is an example of the pattern known as Mixins and is developed in typescript as Decorators

The basic idea is to join two classes together to provide functionality similar to classical inheritance. It starts off with simple copying of object properties - but could be developed into functions that use closures to provide mixins at various levels.

Here is a proof of concept:

 utility = {foo: function() {return this}} main = {bar: function() {return this}} main = Object.assign(main, utility); console.log(main.foo());

Answer 2

The points made by captain-yossarian and Charlie about mixins are good and worth investigating if you want use them. However, here's a solution that doesn't require much refactoring of the original code:

const mixed = { /* same as before */ }

type AnyFn = (...args: never[]) => unknown

type SetReturnTypes<T extends Record<string, AnyFn>> = {
  [K in keyof T]: (...args: Parameters<T[K]>) => SetReturnTypes<T>
}

const makeMixed = <T>(obj: T & ThisType<T & typeof mixed>): SetReturnTypes<T & typeof mixed> => ({
  ...mixed,
  ...obj
}) as unknown as SetReturnTypes<T & typeof mixed>

const newSchema = {
  computer() {
    return makeMixed({
      openVscode() {
        console.log('open vscode')
        return this
      },
      work() {
        console.log('work')
        return this
      }
    })
  },
  phone() {
    return makeMixed({
      takeSelfies() {
        console.log('take selfies')
        return this
      },
      callToMom() {
        console.log('call to mom')
        return this
      }
    })
  }
}

newSchema.computer().turnOn().openVscode()

• SetReturnTypes makes all methods of T return the correct this type, assuming all these methods return this .
• makeMixed is a helper to create an object with mixed with the correct types. It uses ThisType so that the methods in obj have the correct this type:

makeMixed({
  doSomething() {
    this.turnOn() // would be a compile error without the ThisType
    return this
  }
})

An issue with this is that methods not returning this are incorrectly typed. If you want to ensure that all the methods return this , let me know and I may be able to come up with a solution for that.

Playground link