Как обойти ошибку с типом never?

Question

[Ostic]

Здравствуйте.
Вот пример:

const MyComponent: React.FC = () => {
  const buttonEl = useRef(null);
  useEffect( ()=>{
    function scrollHandler(): void { 
      var buttonHtmlEl: HTMLElement | null = buttonEl.current;
      if ( buttonHtmlEl ) {
        window.pageYOffset > 50 ? buttontHtmlEl.classList.remove('is-hide') : buttonHtmlEl.classList.add('is-hide')
// Подчеркивает здесь classList и говорит, что у типа never
// нет св-ва classList
      } else {
        console.error('...');
      }
    }
    window.addEventListener('scroll', scrollHandler);
      return ()=>{
        window.removeEventListener('scroll', scrollHandler);
      }        
    }
  )
  return (
    <button ref={bttEl} onClick={toTop}>lioih </button>
  )
}

говорит, что нет у типа never св-ва classList...
сначала ругался также на null, я добвил if, теперь ругается на never, пробовал try-catch - не помогает.
чего делать-то? подскажите

Comments

[Robur]

Проверьте что у вас HTMLElement правильно импортирован и вообще тот тип который нужен и не резолвится в never.

До этого ругался случаем не на `never | null` ?

Answer 1

[Антон Спирин]

В React разработке приветствуется подход с изменением состояния:

interface State {
  shouldShowBtn: boolean;
}

class MyComponent extends React.Component<null, State> {
  state = {
    shouldShowBtn: true,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.scrollHandler);
  }

  scrollHandler = () => {
    const { shouldShowBtn } = this.state;

    if (window.pageYOffset > 50 && shouldShowBtn) {
      this.setState({ shouldShowBtn: false });
    } else if (window.pageYOffset <= 50 && !shouldShowBtn) {
      this.setState({ shouldShowBtn: true });
    }
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollHandler);
  }

  render() {
    return (
      <>
       {this.state.shouldShowBtn && <button>lioih </button>}
      </>
    );
  }
}

или:

const MyComponent: React.FC = () => {
  const [shouldShowBtn, setShouldShowBtn] = useState(true);
  
  const context = useMemo(() => ({ shouldShowBtn }), []);

  useEffect(() => {
    context.shouldShowBtn = shouldShowBtn;
  }, [shouldShowBtn]);

  useEffect(() => {
    const scrollHandler = () => {
      if (window.pageYOffset > 50 && context.shouldShowBtn) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !context.shouldShowBtn) {
        setShouldShowBtn(true);
      }
    };

    window.addEventListener('scroll', scrollHandler);
    
    return () => {
      window.removeEventListener('scroll', scrollHandler);
    };
  }, []);
  
  return (
    <>
     {shouldShowBtn && <button>lioih </button>}
    </>
  );
};

Можно еще для подобных кейсов кастомный хук написать:

const useGetState = (initialState: any) => {
  const [state, _setState] = useState(initialState);
  const context = useMemo(() => ({ state }), []);
  const getState: any = useCallback(() => context.state, []);
  const setState = useCallback((state) => {
    context.state = state;
    _setState(state);
 }, []);

  return [getState, setState];
};

и тогда:

const MyComponent: React.FC = () => {
  const [getShouldShowBtn, setShouldShowBtn] = useGetState(true);

  useEffect(() => {
    const scrollHandler = () => {
      console.log(window.pageYOffset, getShouldShowBtn());
      if (window.pageYOffset > 50 && getShouldShowBtn()) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !getShouldShowBtn()) {
        setShouldShowBtn(true);
      }
    }
    window.addEventListener("scroll", scrollHandler);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
  return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;
};

Comments

[Ostic]

return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;

подобная конструкция не подойдёт - мне необходимо именно класс добавлять и удалять, тк элемент перемещается, а не просто "есть-нет".
если попробовать конструкцию className... Каким образом в React добавить и удалить class в зависимости от состояния?

[Антон Спирин]

Ostic,

return <button className={getShouldShowBtn() ? '' : 'is-hide'}>lioih </button>};

Я бы все-таки для конкретного кейса использовал классовый компонент. Отсутствие у функциональных компонентов контекста к которому можно было бы обращаться из слушателей сторонних API, порождает костыли вроде приведенной мной реализации useGetState.
Еще для условного составления классов есть удобная библиотека classnames.

Answer 2

[forspamonly2]

про то, как это вообще лучше в реакте делать, вам написал Антон Спирин, а конкретно проблему с тайпскриптовскими типами решить можно параметризовав тип референса:

const buttonEl = useRef<HTMLButtonElement>();
buttonEl.current.classList.add("is-hide");
return <button ref={buttonEl}>lioih</button>;

Comments

[Ostic]

не помогает:
компилятор указывет, что тип <HTMLElement>несовместим с <HTMLElement | null>
если указываешь в качестве типа <HTMLElement | null>, то он говорит, что у типа null нет свойства classList, ввожу проверку на null - if () начинаются проблемы с never

[forspamonly2]

неправда.
https://stackblitz.com/edit/react-ts-icnk1w

[Ostic]

forspamonly2,
Вот мой код
работает!
Я упростил, естественно: у меня там SVG + появляется-исчезает и тд, но функционал-то тот...
А у меня не работает! Использую VS Code по умолчанию.
Те я настроил так:
TS у меня в конфигурации WebPack вообще нет - он компилит втихую и файлы, которые скомпилил не показывает, а потом dev-server подхватывает, но тут именно tsc ошибку выкидывает ...
Вот так у меня заработало:

const bttEl = useRef<HTMLSpanElement>(null);
  function scrollHandler(): void { 
     var bttHtmlEl: HTMLSpanElement | null = bttEl.current;

| null добавил...
теперь надо понять почему в одном случае компилит так, а в другом нет - видимо настройки ТSLint?
forspamonly2, получается Вы были правы, что необходимо добавить
ух )))

[forspamonly2]

очевидно, "strictNullChecks": true в тсконфиге стоит.

разобрались? а теперь выкиньте это и сделайте как антон говорит. как-нить так: https://stackblitz.com/edit/react-ts-mvngsz