重载与 useRef 不匹配

Posted 2023-02-25

【中文标题】重载与 useRef 不匹配

【英文标题】：Overloads don't match on useRef

【发布时间】：2020-11-29 07:34:27

【问题描述】：

重载不匹配

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)

图片：

【参考方案1】：

您需要从interval.current 类型中排除null

<button onClick= () => clearInterval(interval.current as Timeout) > Clear </button>

【参考方案2】：

我忘记了 setInterval 是一个窗口对象。这里的问题是 TS 认为这是一个 NodeJS 构造，而它只是一个窗口函数。使用 as 关键字不是好的做法，在大多数情况下应避免使用。 typescript 的重点在于它是强类型的，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>
    </>
  )