Как определить тип объекта со скрещенными значениями в определённых ключах?

Question

[Leonardo-lavanda]

Была такая функция на javascript, которая перемешивает два vuex модуля:

function mixModules(mainModule, secondModule) {
  return {
    ...mainModule,
    state: {
      ...(mainModule.state || {}),
      ...(secondModule.state || {}),
    },

    actions: {
      ...(mainModule.actions || {}),
      ...(secondModule.actions || {}),
    },

    getters: {
      ...(mainModule.getters || {}),
      ...(secondModule.getters || {}),
    },

    mutations: {
      ...(mainModule.mutations || {}),
      ...(secondModule.mutations || {}),
    },
  };
}

Мне понадобилось перевести это в typescript, чтобы редактор понимал и подсказывал верно ключи значения, которая вернёт функция.

Вот такая попытка была написать это на TS, но не вышло, да и код выглядит ужасно.:

import { VuexStoreModule } from '../types';

type MixModules<
  FirstModule extends VuexStoreModule,
  SecondModule extends VuexStoreModule,
> = {
  [k in keyof FirstModule]: k extends keyof SecondModule ?
    FirstModule[k] & SecondModule[k] :
    k extends keyof FirstModule ?
      FirstModule[k] :
      k extends keyof SecondModule ?
        SecondModule[k] : never
};

function mixModules<
  TF extends VuexStoreModule,
  TS extends VuexStoreModule,
>(mainModule: TF, secondModule: TS): MixModules<TF, TS> {
  return {
    ...mainModule,
    state: {
      ...(mainModule.state || {}),
      ...(secondModule.state || {}),
    },

    actions: {
      ...(mainModule.actions || {}),
      ...(secondModule.actions || {}),
    },

    getters: {
      ...(mainModule.getters || {}),
      ...(secondModule.getters || {}),
    },

    mutations: {
      ...(mainModule.mutations || {}),
      ...(secondModule.mutations || {}),
    },
  };
}

const fState = {
  actions: {
    a: () => {},
  },
};

const sState = {
  actions: {
    b: () => {},
  },

  getters: {
    get() {},
  },
};

const newState = mixModules(fState, sState);


export default mixModules;

Как можно сделать это правильно?

Comments

[WbICHA]

function mixModules<
  TF extends VuexStoreModule,
  TS extends VuexStoreModule,
>(mainModule: TF, secondModule: TS): TF & TS {