Почему не получается задать либо один тип либо другой в typescript?

Question

[GNG999]

есть тип MobileMegaMenuItem
есть тип LinkItem

я прописал кастомный хук

export const useOpenMenuByHash = (
    data: any,
    action: (data: MobileMegaMenuItem | LinkItem) => void,
    actionRoom: () => void
) => {
    useEffect(() => {
        if (data && data.length > 0) {
            const hashName = window.location.hash.substring(1);
            if (hashName) {
                const found = data.find((el: MobileMegaMenuItem | LinkItem) => {
                    const elField = 'href' in el ? el.href : el.link;
                    return elField?.includes(hashName) && el.id !== 0;
                });
                found && action(found);
                found && actionRoom && actionRoom();
            }
        }
    }, [data]);
};

применю его

useOpenMenuByHash(data, onClick);

выходит ошибка на onClick

Argument of type '(item: LinkItem) => void' is not assignable to parameter of type '(el: LinkItem | MobileMegaMenuItem) => void'.   Types of parameters 'item' and 'el' are incompatible.     Type 'LinkItem | MobileMegaMenuItem' is not assignable to type 'LinkItem'.       Property 'test' is missing in type 'MobileMegaMenuItem' but required in type 'LinkItem'.

Почему в MobileMegaMenuItem нужно прописывать свойства (поля) LinkItem ? я же как раз таки хочу задать либо тип MobileMegaMenuItem со своей структурой либо тип LinkItem со своей структурой


Comments

[Alexandroppolus]

Что лежит в типах MobileMegaMenuItem и LinkItem, и что делает onClick со своим параметром? Почему он требует именно LinkItem, а не на объединение этих двух?
data.find ведь может найти значение типа MobileMegaMenuItem. Или нет?

Answer 1

[Aetae]

В action ты кладёшь функцию onClick с сигнатурой (item: LinkItem) => void, а требуется (data: MobileMegaMenuItem | LinkItem) => void, , т.е. функция которая умеет работать и с тем и с тем. Подразумевается что onClick как раз не умеет и может привести к ошибке, потому и не даёт.

Используй дженерик чтобы вывести конкретный тип:

export const useOpenMenuByHash = <Data extends MobileMegaMenuItem | LinkItem>(
    data: Data[],
    action: (data: Data) => void,
    actionRoom?: () => void
) => {
  //...
};

useOpenMenuByHash(data, onClick); // ok

Ну или кастуй руками:

useOpenMenuByHash(data, onClick as (d: LinkItem | MobileMegaMenuItem) => void);

Comments

[Alexandroppolus]

Ну или кастуй руками

вот этого точно не надо делать.

[GNG999]

Alexandroppolus, почему ?

[Alexandroppolus]

GNG999, например, что твой onclick может поюзать поле test, а тебе туда подсунут объект MobileMegaMenuItem, в котором нет оного.

[Aetae]

GNG999, другими словами кастуя руками вы убиваете смысл самого тайпскрипта: ведь его смысл как раз в том, чтоб не давать вам делать потенциальных ошибок, что он в данном случае и делает, а не в том чтобы надоедать.:)
Если TS тебе что-то не даёт сделать, в первую очередь надо думать где ты допустил потенциальную ошибку и почему ты её допустил, чтоб не делать так впредь, а не о том как избавиться от предупреждения.

Answer 2

[Rsa97]

В ошибке говорится, что callback-функция, первый аргумент в data.find, описана как (LinkItem) => void, а вы пытаетесь подставить туда (LinkItem | MobileMegaMenuItem) => void
Соответственно вам надо менять контракт find.

Comments

[Алексей Уколов]

Там же data: any, откуда TS брал бы такую сигнатуру для find?