Как использовать ES6 Proxy с TypeScript?

Question

[Андрей Хохлов]

Примеры кода постарался максимально упростить, убрав лишнее.
Если кому-то будет интересно - доклад о таком подходе к реализации сервиса который мы пытаемся подружить с TypeScript

Есть сервис для работы с API (класс, экземпляр которого создаётся при старте приложения).
При создании ему передаются настройки, в том числе список эндпоинтов:

const apiClient = createApiClient({
  endpoints: {
    doTest: { url: '/test', method: 'get'},
  },
});

С помощью Proxy получается вместо

api.doRequest(endpoints.getData)

сделать что-то вроде виртуальных методов

api.getData()

Попытки реализовать это на TypeScript приводят либо к ошибке

TS2339: Property 'getData' does not exist on type 'ApiClient'

type RequestMethod = 'get'| 'post';

type Endpoint = {
  method: RequestMethod;
  url: string;
};

type EndpointsConfig = Record<string, Endpoint>;

class ApiClient {
  endpoints: EndpointsConfig;

  constructor(endpoints: EndpointsConfig) {
    this.endpoints = endpoints;
  }

  doRequest(url: string, method: RequestMethod) : void {
    console.log(`url: ${url}`);
    console.log(`method: ${method}`);
  }
}

function createApiClient(endpoints: EndpointsConfig) {
  return new Proxy(new ApiClient(endpoints), {
    get(target: ApiClient, name: keyof ApiClient) {
      if (target.endpoints && target.endpoints[name]) {
        return () => (
          target.doRequest(target.endpoints[name].url, target.endpoints[name].method)
        );
      }

      return target[name];
    },
  });
}

const apiClient = createApiClient({
  getData: { url: '/data', method: 'get' },
});

apiClient.getData();

Либо к тому, что приходится определять эндпоинты не в конфиге, а непосредственно хардкодить в сервисе (что уже такое себе). При этом даже работает автокомплит, но

TS2722: Cannot invoke an object which is possibly 'undefined'.

import { Api } from './Api';

const endpoints = {
  getData: { url: '/data', method: 'get' },
};

interface IEndpoint {
  method: 'get'|'post';
  url: string,
}

type EndpointsConfig = {
  [K in keyof typeof endpoints]: IEndpoint;
};

type EndpointsProxy = {
  [K in keyof EndpointsConfig]?: () => unknown;
}

type IApiProxy = { [K in keyof Api]: Api[K] } & EndpointsProxy;

function createApi() : IApiProxy {
  return new Proxy(new Api(), {
    get(target: Api, name: keyof Api) {
      if (target.endpoints && target.endpoints[name]) {
        return () => (
          target.doRequest(target.endpoints[name])
        );
      }

      return target[name];
    },
  });
}

const api = createApi();

api.getData();

или

TS2322: Type 'Api' is not assignable to type 'IApiProxy'.   Property 'getData' is missing in type 'Api' but required in type 'EndpointsProxy'

если убрать необязательность методов-эндпоинтов

type EndpointsProxy = {
  [K in keyof EndpointsConfig]: () => unknown;
}

Буду благодарен за помощь. Может быть я что-то не понимаю/не вижу, а может быть в целом такой подход не применим с TS.

Answer 1

[WbICHA]

Так?
https://www.typescriptlang.org/play?#code/C4TwDgpg...

Comments

[WbICHA]

Но это будет работать при условии, что все функции, добавленные таким способом, будут без аргументов и возвращать один и тот же тип.

[Андрей Хохлов]

WbICHA, спасибо, работает. И с параметрами тоже

https://www.typescriptlang.org/play?ssl=80&ssc=3&p...

В целом, исходя из постановки вопроса, этого достаточно чтобы его закрыть.
Но с вашего позволения немного продолжу и ещё попозорюсь пробелами в знаниях TS.

В нашем кейсе инстанс апи клиента добавляется в объект "контекст", который инжектится в компоненты (Vue), а так же передаётся в, например, функцию которая создаёт глобальное хранилище (чтобы быть доступным в его методах).

Минимальный пример

// types.ts

export interface IAppContext {
  api: ApiType, // ???
}

// main.ts

import { createApi } from './services/Api';
import { IAppContext } from './types';
import { createStore } from './store';

const api = createApi(
  { url: '/' },
  {
    getData: { method: 'get', url: '/data' },
  },
);

const context : IAppContext = {
  api,
};

const store = createStore(context);

// store.ts

import { IAppContext } from './types';

export function createStore(context: IAppContext)  {}

Я понимаю, что сейчас у нас тип api - generic и объявить его в отдельном файлике становится невозможным.
Можно пойти дальше и "задженерить" вообще всё...

createStore<typeof context>(context);
function createStore<T>(context: T)  {}

Но я опасаюсь, не будет ли это потенциальным клубком проблем в будущем. А кроме того есть места, где это в принципе не ложится:

import { InjectionKey } from 'vue';
import { IAppContext } from './types';

export const APP_CONTEXT_KEY: InjectionKey<IAppContext> = Symbol('context');

Нашёл такой вариант:

// types.ts

import { Api } from './api';

export interface IAppContext {
  api:  Api,
}

// api.ts

import { createApi } from '@/services/Api';

export const api = createApi(
  { url: process.env.VUE_APP_API_URL },
  {
    getTodo: { method: 'get', url: '/todos/{id}' },
  },
);

export type Api = typeof api;

Но и тут компромис, мне не очень нравится отдельный файл в таком случае. Теоретически могла бы возникнуть потребность передавать что-то в функцию создающую api клиент в main.ts.

Было бы интересно услышать ваше мнение (и мнение коллег которые заглянут в тред) относительно этой ситуации.

[WbICHA]

Андрей Хохлов,

И с параметрами тоже

Да, некорректно выразился. Я имел ввиду, что "сгенерированные" функции должны иметь один и тот же тип.

по поводу остального, честно говоря не очень понял. Имеется ввиду это?

export interface IAppContext<K extends string = string> {
  api: ApiType & Record<K, (requestConfig?: IApiRequestConfig, requestOptions?: IApiRequestOptions) => AxiosPromise>,
}

Передавать ключи в дженерике или не передавать и тип тогда будет просто стринг.

const context : IAppContext<'getData'> = {
  api,
};

Answer 2

[profesor08]

В ts с proxy проблемы быть не может просто потому, что он принимает сигнатуру объекта. А это значит, что надо работать с самим объектом, который попадает в proxy. Если сигнатура заранее не известна, то для этого ввели дженерики.

В данном случае надо будет расширить ApiClient так, чтоб он мог иметь дополнительные методы.