TheSnegok
@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(и да администрация я искал как это сделать в гугл, не баньте тему плз)
* - (Я не понимаю как передаються переменные из массива в хук, буду благодарен если подскажете или скините ссылку на статью)
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
1. Перед return поставьте if(!gif) return null; и станет лучше.)
Собсно суть логична: вы сами написали что gif может быть undefined, попытка получения свойства у undefined(gif.<some>) - очевидная ошибка.
Вы должны заранее обработать такой случай и принять меры.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы