Типизация массива для функции и смена типа при сравнивании?

Question

[TheSnegok]

Привет всем!
Код:

interface PropImage {
	gif: undefined | object,
	lang: string,
	key: number,
};

const Image = ({ gif, lang, key }: PropImage) => {
	
	const [loader, setLoader] = useState<boolean>(false);

	const clickCopy = (elem: any) => {
		navigator.clipboard.writeText(elem);
	};

	const loadImage = () => {
		setLoader(true);
	};

	const [setRef, visible] = useOnScreen({ rootMargin: "0px"});

	
	return (				
		<div className={s.wrapper} key={key} ref={setRef}>
			<div
				className={s.image}
				data-title={lang === 'en' ? 'Click to copy the link to the gif' : 'Нажмите чтобы скопировать ссылку на гиф'}
			>
				<picture className={visible ? s.showPicture : s.nonePicture}>
					<source type="image/webp" />
					<img
						src={gif.images.preview_webp.url === undefined ? gif.images.downsized_large.url : gif.images.preview_webp.url}
						alt={gif.slug}
						key={gif.id}
						className={!loader ? s.gifNone : s.gif}
						onClick={() => clickCopy(gif.images.original.url)}
						onLoad={() => loadImage()}
						crossOrigin="anonymous"
						width="361"
						height="203"
					/>
				</picture>
			</div>

			{!loader && <div className={s.loader}></div>}
		</div>
	);
};

1. В interface написал что gif должны принимать undefined или object, но оно выбивает ошибку что gif и то что внутри undefined: Object is possibly 'undefined' и Property 'images' does not exist on type 'object'.
2. Вот такая интересная конструкция:
const [setRef, visible] = useOnScreen({ rootMargin: "0px"});*
Не знаю как добавить setRef: , visible: boolean(и да администрация я искал как это сделать в гугл, не баньте тему плз)
* - (Я не понимаю как передаються переменные из массива в хук, буду благодарен если подскажете или скините ссылку на статью)

Answer 1

[Aetae]

1. Перед return поставьте if(!gif) return null; и станет лучше.)
Собсно суть логична: вы сами написали что gif может быть undefined, попытка получения свойства у undefined(gif.<some>) - очевидная ошибка.
Вы должны заранее обработать такой случай и принять меры.

object в современном ts занчит просто {} без всяких свойств. Если вам нужен любой объект с любыми свойствами, то используйте Record<string, any>. Однако по хорошему никаких any быть не должно, вам следует чётко описать структуру получаемого объекта.

2. Ничего не понятно. useOnScreen - это нестандартных хук. Реализаций в гугле полно разных. Так что приведите его код и скажите, что вы хотите от него добиться.

Comments

[TheSnegok]

useOnScreen, хук который передаёт true/false в зависимости когда картинку видно и нет, код:

import { useState, useEffect } from "react";

// Hook
const useOnScreen = (option: object) => {
	const [ref, setRef] = useState<HTMLDivElement | undefined>(undefined);										
	// State and setter for storing whether element is visible
	const [isIntersecting, setIntersecting] = useState<boolean>(false);
	useEffect(() => {
		const observer = new IntersectionObserver(
			([entry]) => {
				// Update our state when observer callback fires
				setIntersecting(entry.isIntersecting);
			}, option);
		if (ref) {
			observer.observe(ref);
		}
		return () => { // eslint-disable-next-line
			if (ref) {
				observer.unobserve(ref);
			}
		}; // eslint-disable-next-line
	}, [ref, option]); // Empty array ensures that effect is only run on mount and unmount 
	return [setRef, isIntersecting];
};

export default useOnScreen;

[Aetae]

TheSnegok, это какая-то ересь, выкинь.
Вот тут в гугле почти такой-же хук, только человеческий. За одно с примером как юзать.

[TheSnegok]

Aetae, Это он и есть просто я на ютубе нашёл видео человека который написал этот скрипт вот и он там немного менял его, и ещё один useState я добавил чтобы у меня при смене картинок всё работало, потому что тот хук работает только на статическом изображении, а я меняю изображения, и на js всё работало

[Aetae]

TheSnegok, посмотрел что он делает - я бы так делать не стал. Но ок, его логика теперь понятна, теперь непонятно с чем у тебя проблемы?)
Всё в теории должно работать.

И да - изменение картинок через src никак не влияет на работу базового хука, те изменения, что внёс чувак, нужны если элементы вырисовываются по условию
({condition ? <A ref={ref}/> : <B/>}) - не твой случай.

...upd: если непонятно как работает setRef - это ~тайная~ фича реакта, называется callback ref. Вместо ref-объекта полученного из useRef, ты кладёшь в ref функцию - коллбэк, которая вызывается каждый раз, как изменился ref-элемент и получает на вход HTMLElement.

[TheSnegok]

Aetae, Проблема в том что оно подчёркивает ref при создании, вот текст ошибки:
Type 'boolean | Dispatch>' is not assignable to type 'LegacyRef | undefined'.
Type 'false' is not assignable to type 'LegacyRef | undefined'.
Именно этот ref= при объявлении тут:
Мне нужно и тут добавить setRef который в массиве что он может быть null

[Aetae]

TheSnegok, сделай в конце хука так: return [setRef, isIntersecting] as const;

Суть проблемы в том, что выводимый тип массива по умолчанию - это массив, в котором элементы могут быть любыми из имеющихся, т.е. const arr = [1, 'text', true] - имеет тип по умолчанию Array<string | number | boolean>, а значит если мы сделаем так: arr[0] *= 2; тайпскрипт будет жаловаться на то что arr[0] не точно number, а может ещё быть и string и boolean.
Используя конструкцию as const мы даём тайпскрипту знать, что этот массив никогда не будет меняться и по сути является кортежем.

Кстати как вариант, можно явно указать возвращаемый хуком тип как кортеж:

const useOnScreen = (option?: IntersectionObserverInit): [Dispatch<SetStateAction<HTMLDivElement | undefined>>, boolean] => {

но это излишне многословно, как по мне.)

[TheSnegok]

Aetae, Спасибо большое, всё работает)