UseRef "относится к значению, но здесь используется как тип."
Я пытаюсь понять, как сказать, какой элемент используется в качестве ссылки, т.е. в моем случае
const circleRef = useRef<AnimatedCircle>(undefined);
AnimatedCircle — это компонент SVG из сторонней библиотеки, и его определение таким образом вызывает ошибку
Есть ли какой-то универсальный способ определить, какой элемент является ref?
Возможный дубликат Почему «instanceof» в TypeScript выдает ошибку «Foo» относится только к типу, но здесь используется как значение»?
Ответы 4
AnimatedCircle — это функция, а не тип. Это означает, что его нельзя использовать в TypeScript вместо типа, как в общем ограничении useRef. Вместо этого вам нужно использовать typeof operator для преобразования в тип:
const circleRef = useRef<typeof AnimatedCircle | null>(null);
Функции-конструкторы обычно тоже являются типами, не так ли?
Да, но поскольку в OP указано, что AnimatedCircle — это тип компонента, и они получают эту ошибку, я готов поспорить, что это функция, а не класс.
Неудачное имя для одного, если это не конструктор, так как оно нарушает основное правило именования JavaScript/TypeScript. :-)
В React все типы компонентов обычно имеют TitleCase. Имена в нижнем регистре используются для различения нативных элементов DOM (div, x-your-name-here и т. д.) и пользовательских компонентов React (AnimatedCircle). Хотя это нарушает соглашение JavaScript / машинопись, это соглашение в React в основном потому, что нет другого неуклюжего способа заставить React работать с пользовательскими элементами и/или новыми тегами.
О, я о. знаком с этим, я просто привык думать о них как о конструкторах. Но, конечно, функциональные компоненты не являются, с точки зрения типов TypeScript, конструкторами, а с хуками практически все компоненты становятся функциональными. Немного боли, я ожидаю, что это будет решено. :-)
Для чего нужен | null?
@raarts поздний ответ, извините! если вы использовали строгую проверку нулей в машинописном тексте, передача null в useRef не была (не является?) без явного добавления его в сигнатуру типа и привела бы к ошибке типа. useRef<typeof AnimatedCircle>(null); потерпит неудачу, потому что null нельзя присвоить typeof AnimatedCircle
В моем случае я переименовал файл как .ts вместо .tsx. Повторное переименование исправило это.
чувак, вся моя беда была в этой ошибке! танки, вы только что исправили мою ситуацию, 3 часа в поисках всего интернета об этом.
Я как раз собирался выбросить свой компьютер в окно — спасибо!! Расширение файла было последним местом, куда я собирался смотреть
Я получал ту же ошибку в
ReactDOM.render(
<App store = {store} persistor = {persistor} basename = {PUBLIC_URL} />,
document.getElementById("root");
И я переименовал файл в .tsx, и это решило проблему. Причина в том, что когда вы используете React или ReactDOM, вам нужно переименовать файл в .tsx вместо ts. Для JavaScript.js работает, а для TypeScript.ts не работает.
Есть похожий вопрос с тем же ответом stackoverflow.com/questions/58341545/…
Для меня проблема заключалась в том, что я пытался импортировать тип и использовал его для расширения типа:
import type ResultMap form...
пытался сделать Promise<typeof ResultMap>
Но это, если не работает, потому что
It’s important to note that classes have a value at runtime and a type at design-time, and the use is context-sensitive. When using import type to import a class, you can’t do things like extend from it. (Source: ts docs)
Можете ли вы поделиться определениями useRef и AnimatedCircle?