我们先来看个例子,这个场景我们经常在开发的过程中会用到
import { useEffect, useState } from 'react'
export function useDebounce(initialValue: any, delay?: number): any {
const [debounceValue, setDebounceValue] = useState(initialValue)
useEffect(() => {
let timer = setTimeout(() => {
setDebounceValue(initialValue)
}, delay)
return () => {
clearTimeout(timer)
}
}, [initialValue, delay])
return debounceValue
}
看上面的代码块,如果我们是TS的新手,那么我们会问,此刻我们传入的 initialValue
的类型应该是什么?我们不知道它会传入什么类型,所以大多数情况我们会给它一个 any
,最后它返回的 return debounceValue
也是any
类型,这样是非常不好的,我们无法推断出 debounceValue
是什么类型?完全也失去了使用TypeScript的价值。
因此我们想问,我们如何能够做到,传入的 initialValue
是什么类型,那么我们返回的 debounceValue
也是什么类型,此刻我们就可以通过 泛型
来解决这个问题。