Перегрузки не совпадают по useRef

Перегрузки не совпадают

import React, { useEffect, useState, useRef } from 'react'


function Button() {

  const [ctr, setCtr] = useState(0)
  let interval = useRef<NodeJS.Timeout | null>(null)

  useEffect(() => {
    interval.current = setInterval(() => {
      setCtr(prev => prev + 1)
    },1000)
    return () => {
      clearInterval(interval.current)
    }
  }, [])
  
 
  return (
    <>
      <span> Count : {ctr} </span>
      <button onClick={ () => clearInterval(interval.current) }> Clear </button>
    </>
  )
}

export default Button

Ошибка:

No overload matches this call.
  Overload 1 of 2, '(intervalId: Timeout): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'Timeout'.
      Type 'null' is not assignable to type 'Timeout'.
  Overload 2 of 2, '(handle?: number | undefined): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'number | undefined'.
      Type 'null' is not assignable to type 'number | undefined'.ts(2769)

Изображение:

введите описание изображения здесь


reactjs javascript use-ref
person amanuel2    schedule 29.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно исключить null из типа interval.current

<button onClick={ () => clearInterval(interval.current as Timeout) }> Clear </button>
person Maheer Ali    schedule 29.11.2020

arrow_upward
0
arrow_downward

Я забыл, что setInterval - это оконный объект. Проблема здесь в том, что TS думает, что это конструкция NodeJS, в то время как это просто оконная функция. Использование ключевого слова as не является хорошей практикой, и в большинстве случаев его следует избегать. Весь смысл машинописного текста в том, что он строго типизирован, и использование as отклоняется от этого.

function Button() {

  const [ctr, setCtr] = useState(0)
  const interval = useRef(0);
  useEffect(() => {
    interval.current = window.setInterval(() => {
      setCtr(prev=>prev+1)
    }, 1000);

    return () => {
      window.clearInterval(interval.current);
    };
  }, []);
  
 
  return (
    <>
      <span> Count : {ctr} </span>
      <button onClick={ () => window.clearInterval(interval.current) }> Clear </button>
    </>
  )
}
person amanuel2    schedule 29.11.2020