Reactjs 类型脚本滚动窗口函数类型

我正在尝试制作一个React组件，允许用户将窗口滚动到屏幕顶部。我已经设置了组件和类型，但设置窗口属性时遇到问题。我目前的错误是：

元素隐式具有“any”类型，因为索引表达式不是“number”类型

我如何正确地处理窗户

import { throttle } from 'lodash'
import React, { useState } from 'react'
import { useEventListener } from '../../hooks'
import { Arrow } from './styles'

interface ScrollRest {
  showBelow: number,
  className: string,
  size: string
}

interface ScrollProps {
  direction: string,
  by: number,
  to: number,
  rest: ScrollRest
}

interface ScrollFunctionProps {
  mode: string, 
  to: number
}

export default function Scroll( { direction = `up`, by, to, rest }: ScrollProps ) {
  const { showBelow, className, size = `calc(0.6em + 30px)` } = rest
  if ( ![`up`, `down`].includes( direction ) )
    throw TypeError(
      `Scroll component's direction prop must be either 'up' or 'down'`
    )
  if ( to && ( typeof to !== `number` || to <= 0 ) )
    throw TypeError( `Scroll component's to prop must be a positive number` )
  if ( by && typeof by !== `number` )
    throw TypeError( `Scroll component's by prop must be a number` )

  const [show, setShow] = useState( showBelow ? false : true )

  const scroll = ( { mode, to }: ScrollFunctionProps ) =>
    window[`scroll` + mode]( { top: to, behavior: `smooth` } ) // <- Error here!

  const handleScroll = throttle( () => {
    if ( !showBelow ) return
    if ( window.scrollY > showBelow ) {
      if ( !show ) setShow( true )
    } else {
      if ( show ) setShow( false )
    }
  }, 300 )
  useEventListener( `scroll`, handleScroll )

  const handleClick = () => {
    if ( to ) scroll( { mode: `To`, to: to * window.innerHeight } )
    else if ( by ) scroll( { mode: `By`, to: by * window.innerHeight } )
    else if ( direction === `up` ) scroll( { mode: `To`, to: 0 } )
    else scroll( { mode: `To`, to: document.body.scrollHeight } )
  }

  const arrowProps = { show, direction, className, size }
  return <Arrow onClick={handleClick} {...arrowProps} />
}

从“lodash”导入{throttle}
从“React”导入React，{useState}
从“../../hooks”导入{useEventListener}
从“./styles”导入{Arrow}
界面滚动条{
下图：数字，
类名：string，
大小：字符串
}
界面滚动道具{
方向：字符串，
作者：编号：，
收件人：号码：，
rest:ScrollRest
}
界面滚动功能道具{
模式：字符串，
收件人：号码
}
导出默认函数Scroll（{direction=`up`，by，to，rest}:ScrollProps）{
const{showdown，className，size=`calc（0.6em+30px）`}=rest
如果（！[‘向上’，‘向下’）。包括（方向））
抛出类型错误(
`滚动组件的方向道具必须为“向上”或“向下”`
)
if（to&&（typeof to！=`number`|to
窗口[`scroll`+模式]（{top:to，behavior:`smooth`}）/{
如果（！如下所示）返回
如果（window.scrollY>如下所示）{
如果（！show）设置显示（true）
}否则{
如果（显示）设置方式（错误）
}
}, 300 )
useEventListener（`scroll`，handleScroll）
常量handleClick=（）=>{
if（to）滚动（{mode:`to`，to:to*window.innerHeight}）
else if（by）滚动（{mode:`by`，to:by*window.innerHeight}）
else if（方向===`up`）滚动（{模式：`To`，To:0}）
else滚动（{mode:`To`，To:document.body.scrollHeight}）
}
常量arrowProps={show，direction，className，size}
返回
}

最简单的更改是将

模式

类型限制为

'scrollTo'|'scrollBy'

方法名称：

interface ScrollFunctionProps {
  mode: 'scrollTo' | 'scrollBy', 
  to: number
}

这允许TypeScript正确推断

window.scrollXXX（…）

方法调用的类型签名

import { throttle } from 'lodash'
import React, { useState } from 'react'
import { useEventListener } from '../../hooks'
import { Arrow } from './styles'

interface ScrollRest {
  showBelow: number,
  className: string,
  size: string
}

interface ScrollProps {
  direction: string,
  by: number,
  to: number,
  rest: ScrollRest
}

interface ScrollFunctionProps {
  mode: 'scrollTo' | 'scrollBy', // restrict `mode` to known Window scroll method names
  to: number
}

export default function Scroll( { direction = `up`, by, to, rest }: ScrollProps ) {
  const { showBelow, className, size = `calc(0.6em + 30px)` } = rest
  if ( ![`up`, `down`].includes( direction ) )
    throw TypeError(
      `Scroll component's direction prop must be either 'up' or 'down'`
    )
  if ( to && ( typeof to !== `number` || to <= 0 ) )
    throw TypeError( `Scroll component's to prop must be a positive number` )
  if ( by && typeof by !== `number` )
    throw TypeError( `Scroll component's by prop must be a number` )

  const [show, setShow] = useState( showBelow ? false : true )

  const scroll = ( { mode, to }: ScrollFunctionProps ) =>
    window[mode]( { top: to, behavior: `smooth` } )

  const handleScroll = throttle( () => {
    if ( !showBelow ) return
    if ( window.scrollY > showBelow ) {
      if ( !show ) setShow( true )
    } else {
      if ( show ) setShow( false )
    }
  }, 300 )
  useEventListener( `scroll`, handleScroll )

  const handleClick = () => {
    if ( to ) scroll( { mode: `scrollTo`, to: to * window.innerHeight } )
    else if ( by ) scroll( { mode: `scrollBy`, to: by * window.innerHeight } )
    else if ( direction === `up` ) scroll( { mode: `scrollTo`, to: 0 } )
    else scroll( { mode: `scrollTo`, to: document.body.scrollHeight } )
  }

  const arrowProps = { show, direction, className, size }
  return <Arrow onClick={handleClick} {...arrowProps} />
}

从“lodash”导入{throttle}
从“React”导入React，{useState}
从“../../hooks”导入{useEventListener}
从“./styles”导入{Arrow}
界面滚动条{
下图：数字，
类名：string，
大小：字符串
}
界面滚动道具{
方向：字符串，
作者：编号：，
收件人：号码：，
rest:ScrollRest
}
界面滚动功能道具{
mode:'scrollTo'|'scrollBy'，//将'mode'限制为已知的窗口滚动方法名称
收件人：号码
}
导出默认函数Scroll（{direction=`up`，by，to，rest}:ScrollProps）{
const{showdown，className，size=`calc（0.6em+30px）`}=rest
如果（！[‘向上’，‘向下’）。包括（方向））
抛出类型错误(
`滚动组件的方向道具必须为“向上”或“向下”`
)
if（to&&（typeof to！=`number`|to
窗口[模式]（{top:to，行为：`smooth`}）
const handleScroll=节气门（（）=>{
如果（！如下所示）返回
如果（window.scrollY>如下所示）{
如果（！show）设置显示（true）
}否则{
如果（显示）设置方式（错误）
}
}, 300 )
useEventListener（`scroll`，handleScroll）
常量handleClick=（）=>{
if（to）滚动（{mode:`scrollTo`，to:to*window.innerHeight}）
else if（by）滚动（{mode:`scrollBy`，to:by*window.innerHeight}）
else if（方向===`up`）滚动（{mode:`scrollTo`，to:0}）
else滚动（{mode:`scrollTo`，to:document.body.scrollHeight}）
}
常量arrowProps={show，direction，className，size}
返回
}