React项目中TypeScript的基本使用

解决 useSelector获取redux中的数据的类型报错问题

使用typeof操作符,根据已有变量的值，反向推断出获取该值的类型，来简化类型书写

1. 导入store,使用store.getState方法获取redux中的所有分支数据,并使用typeof反推出数据类型
2. 使用ReturnType将获取的数据类型,返回出来 赋值给 RootState

// Redux 应用的状态
export type RootState = ReturnType<typeof store.getState>

解决store/action中的dispatch类型报错

import { ThunkAction } from 'redux-thunk'
export type RootThunkAction = ThunkAction<void, RootState, unknown, RootAction>

定义RootAction

因为项目中的数据比较多,需要定义的 type规则太多了,于是我将其他类型都通过定义的RootAction集合起来

那么这其中的每一个都是定义的reducer中的action类型

然后我们又将整合的 RootAction作为参数当在了RootThunkAction中,然后在action中又使用了RootThunkAction, 于是下面的dispatch(),就有了我们定义的类型提示,只需要打个冒号,提示都出来了,并且只能选这些值,就不会因为写错导致项目挂掉了

-------------------------------------------------------------------------分割线
那么像下面中的ArticleDetail,则是我们规定的传递给reducer中的数据类型

根据请求返回的数据决定

因为reducer那边的形参中有state,action那么像我们定义的类型声明,又可以给action使用,就又可以有提示了

定义axios返回数据的类型声明,提供提示

export interface ApiResponse<T> {
  massage: string
  data: T
}

总结一下 - 使用redux需要准备哪些ts类型声明

统一套路

1. 在src目录下创建store文件夹
   

• action文件夹中主要用于发请求获取数据和将获取的数据,传递到reducers中
• reducers文件夹中存储数据,用于决定返回什么样的数据
• store文件夹下的index.ts用于整合action 和 reducers

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers'

const middlewares = composeWithDevTools(applyMiddleware(thunk))
const store = createStore(rootReducer, middlewares)

export default store

• 那么同样的reducers文件夹 中 也有index.ts,用于整合其他的分支
• 注意: 当你新建了其他分支,一定要在reducers 中的 index.ts中导入合并
  
  

2. store文件夹下创建types文件,用于集中用于ts类型声明
   

• store.d.ts里面声明action 和 reducers 以及 处理dispatch等类型问题
• data.d.ts 里面主要用于声明请求回来的数据类型