Redux Todo示例(TypeScript版)AddTodo.tsx的dispatch隐式any类型问题

这个问题我熟！TypeScript在严格类型检查模式下，会对没有明确类型的变量抛出隐式any的错误，这里的dispatch就是因为没指定类型才触发报错的。下面给你几种靠谱的解决办法：

方法一：给组件Props定义明确的类型 #

先从Redux导入Dispatch类型，再给组件接收的props定义接口，把dispatch的类型明确下来：

import * as React from 'react'
import { connect, Dispatch } from 'react-redux'
import { addTodo } from '../actions'

// 定义组件的props类型
interface AddTodoProps {
  dispatch: Dispatch
}

const AddTodo = ({ dispatch }: AddTodoProps) => {
  // 把input的类型从any改成更严谨的HTMLInputElement | null
  let input: HTMLInputElement | null = null
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input?.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={el => input = el} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

export default connect()(AddTodo)

方法二：使用useDispatch钩子（推荐，更简洁） #

如果你的React-Redux版本在v7.1.0以上，推荐用函数组件的useDispatch钩子，它会自动推断dispatch的类型，完全不用手动定义：

import * as React from 'react'
import { useDispatch } from 'react-redux'
import { addTodo } from '../actions'

const AddTodo = () => {
  const dispatch = useDispatch()
  let input: HTMLInputElement | null = null
  
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input?.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={el => input = el} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

export default AddTodo

这种方式不用再用connect包裹组件，代码更清爽，类型也自动处理到位了。

方法三：给connect指定泛型参数 #

如果你还是想用connect，可以通过泛型参数明确state和dispatch的类型，让connect自动注入正确类型的props：

import * as React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
import { RootState } from '../store' // 假设你已经定义了RootState全局状态类型

const AddTodo = ({ dispatch }) => {
  let input: HTMLInputElement | null = null
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input?.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={el => input = el} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

// 泛型参数依次是：组件映射的state、ownProps、dispatchProps、全局RootState
export default connect<{}, {}, {}, RootState>(() => ({}))(AddTodo)

内容的提问来源于stack exchange，提问作者Twitter khuong291