如何将JavaScript中的mapStateToProps正确迁移为TypeScript版本

报错原因 #

你给参数标注的object是TS的通用基础对象类型，未预定义任何可访问属性，因此直接访问applicationComposite属性时，TS无法识别该属性的存在，就会抛出TS2339错误。同时你改写的TS代码逻辑和原JS版本不一致：原JS中mapStateToProps第一个参数是完整的state对象，你通过解构拿到了application字段，而TS版本中你直接把参数命名为application，又尝试访问它的applicationComposite属性，逻辑上也需要修正。

最优解决方案（一劳永逸，适合所有mapStateToProps场景） #

在Redux的store配置文件中定义全局的RootState类型，该类型会自动包含整个Redux仓库的完整结构，不需要针对每个mapStateToProps单独定义入参类型。

1. 首先在store配置文件中导出RootState：

// 示例为Redux Toolkit写法，老版Redux可以手动组合reducer类型定义RootState
import { configureStore } from '@reduxjs/toolkit'
import applicationReducer from './slices/applicationSlice'

export const store = configureStore({
  reducer: {
    application: applicationReducer
  }
})

// 导出全局RootState类型，自动包含所有reducer的结构
export type RootState = ReturnType<typeof store.getState>

2. 在所有组件的mapStateToProps中，直接将第一个参数标注为RootState即可：

import { connect } from 'react-redux'
import { RootState } from './store'
import App from './App'

const mapStateToProps = (state: RootState) => {
  const applicationComposite = state.application;
  return {applicationComposite};
}

export default connect(mapStateToProps, {})(App);

这种方案下，不管不同的mapStateToProps要从state里取什么字段，TS都能自动识别对应字段的类型，既不会报错，还能享受类型校验、属性自动补全的能力。

可选临时方案（不推荐长期使用） #

如果不想定义全局RootState，可以针对当前组件的mapStateToProps单独定义入参接口：

interface CustomState {
  application: {
    // 这里补充application字段对应的具体类型定义
  }
}

const mapStateToProps = (state: CustomState) => {
  const applicationComposite = state.application;
  return {applicationComposite};
}

仅调试场景下可以临时把参数标注为any消除报错，但会完全失去TS的类型校验能力，不建议正式代码使用。

内容的提问来源于stack exchange，提问作者HuLu ViCa