Как нормально перегрузить функцию?

Question

[Александр Антонов]

Приветствую всех, имеется потребность перегрузить функцию как например в kotlin, есть такой код:

type DispatchKey<T> = keyof T;
type DispatchValue<T> = T[DispatchKey<T>];
type InitialState<T> = T | (() => T);

interface Dispatch<T> {
  (key: DispatchKey<T>, value: DispatchValue<T>): void;
  (keys: (DispatchKey<T>)[], iterator: (key: DispatchKey<T>) => DispatchValue<T>): void;
}

export default function useDispatch<T extends {}>(initialState: InitialState<T>): [T, Dispatch<T>] {
  const [state, setState] = useState(initialState);

  function dispatch(key: DispatchKey<T>, value: DispatchValue<T>) {
    setState((prev) => ({
      ...prev,
      [key]: value,
    }));
  }

  function dispatch(keys: (DispatchKey<T>)[], iterator: (key: DispatchKey<T>) => DispatchValue<T>) {
    setState((prev) => {
      const updated = keys.map((key) => iterator(key))
      console.log(updated);
      return prev
    });
  }

  return [state, dispatch];
}

так вот, нужно перегрузить dispatch что бы это были 2 отдельные функции,
я сомневаюсь что нормально будет проверять параметр через всякие if, больно странное занятие да и не особо красиво тогда будет, надеюсь что в typescript вообще можно так перегружать функции как в языках со статической типизацией, буду рад любому ответу

Answer 1

[Александр Антонов]

В таком случае проще вовсе разные функции сделать чем заниматься такой ерундой с проверками типов, это даже перегрузкой не назовешь

Answer 2

[Александр]

К сожалению, в TypeScript придётся проверять через if.

function dispatch<T>(key: DispatchKey<T>, value: DispatchValue<T>): void;
function dispatch<T>(keys: DispatchKey<T>[], iterator: (key: DispatchKey<T>) => DispatchValue<T>): void;
function dispatch<T>(
    keyOrKeys: DispatchKey<T> | DispatchKey<T>[],
    valueOrIterator: DispatchValue<T> | ((key: DispatchKey<T>) => DispatchValue<T>)
): void {
    if (Array.isArray(keyOrKeys) && typeof valueOrIterator === 'function') {
        setState((prev) => {
            const updated = keyOrKeys.map((key) => valueOrIterator(key));
            console.log(updated);
            return prev;
        });
    } else {
        setState((prev) => ({
            ...prev,
            [keyOrKeys]: valueOrIterator,
        }));
    }
}

Comments

[Александр Антонов]

Печально конечно, странно что создатели ts изначально не смогли такое сделать, хотя много ограничений скорее всего из-за псевдо статической типизации, все равно на выходе js будет

[WbICHA]

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

[Александр Антонов]

Прикол в том что даже через if все равно сыпит ошибками, в блоке после проверки на

Array.isArray(keyOrKeys) && typeof valueOrIterator === 'function'

он все равно думает что keyOrKeys может быть не массивом)) и тд, хотя может потому что я типы через интерфейс использую...

type DispatchKey<T> = keyof T;
type DispatchValue<T> = T[DispatchKey<T>];
type InitialState<T> = T | (() => T);

interface Dispatch<T> {
  (keyOrKeys: DispatchKey<T>, valueOrIterator: DispatchValue<T>): void;
  (keyOrKeys: (DispatchKey<T>)[], valueOrIterator: (key: DispatchKey<T>) => DispatchValue<T>): void;
}

// ...

const dispatch: Dispatch<T> = (keyOrKeys, valueOrIterator) => {
    if (Array.isArray(keyOrKeys) && typeof valueOrIterator === 'function') {
      setState((prev) => {
        const updated = keyOrKeys.map((key) => valueOrIterator(key));
        console.log(updated);
        return prev;
      });
    } else {
      setState((prev) => ({
        ...prev,
        [keyOrKeys]: valueOrIterator,
      }));
    }
  };

ps: а нет, с твоим примером результат тот же, так что это неправильный ответ

[Александр Антонов]

WbICHA, есть идее как правильно организовать проверку? вариант Александр не рабочий, компилятор даже в блоке if не понимает что там точно все ок должно быть

[Александр]

Александр Антонов, никаких стрелочных функций. В данном случае используйте обычные.

import { useState } from "react";

export type DispatchKey<T> = keyof T;
export type DispatchValue<T, K extends DispatchKey<T>> = T[K];
export type DispatchIterator<T, K extends DispatchKey<T>> = (key: K) => DispatchValue<T, K>;
export type InitialState<T> = T | (() => T);

export default function useDispatch<T extends {}>(
  initialState: InitialState<T>
) {
  const [state, setState] = useState(initialState);

  function dispatch<K extends DispatchKey<T>>(
    key: K,
    value: DispatchValue<T, K>
  ): void;
  function dispatch<K extends DispatchKey<T>>(
    keys: K[],
    iterator: DispatchIterator<T, K>
  ): void;
  function dispatch<T, K extends DispatchKey<T>>(
    keyOrKeys: K | K[],
    valueOrIterator: DispatchValue<T, K> | DispatchIterator<T, K>
  ): void {
    if (Array.isArray(keyOrKeys)) {
      if (typeof valueOrIterator === "function") {
        const iterator = valueOrIterator as DispatchIterator<T, K>;

        setState((prev) => {
          const updated = keyOrKeys.map((key) => iterator(key));
          console.log(updated);
          return prev;
        });
      }
    } else {
      setState((prev) => ({
        ...prev,
        [keyOrKeys]: valueOrIterator
      }));
    }
  }

  return [state, dispatch] as const;
}

[WbICHA]

Александр Антонов, ожидаемо. Там просто вместо элс надо ещё раз через иф проверку делать на тоже самое. Тс внутри оверлоадной функции не знает, что у неё есть оверлоад и она исходит только из типов аргументов функции, а в данном случае возможна с его точки зрения ситуация, когда ключ может быть массивом, а велъю быть строкой.
Короче, оверлоады в тс дело неблагодарное и желательно обходить их стороной.

[WbICHA]

Александр, стрелочные, обычные, в данном случае неважно.