Reactjs 正在尝试转换为typescript..无法确定如何生成操作类型和负载..我正在使用useContext和use Reducer

正在尝试转换为typescript..无法确定如何生成操作类型和负载..我正在使用useContext和use Reducer 我基本上希望我的操作从提供的./types键中获取类型，然后laso找出提供pylaoad的方法 这是我的州

import React, { useReducer } from "react"
import AlertContext from "./AlertContext"
import { SHOW_ALERT,REMOVE_ALERT } from "../Types"
import AlertReducer from "./AlertReducer"
import { IAlertState } from "../IAlertState"


export interface typealert{
 variant : string,
text: string,
}
const AlertState = (props : any) =>{

const initialState :IAlertState = {
    alert:{
        variant :'',
        text :''
    }
}

const [state,dispatch] = useReducer(AlertReducer,initialState)

const showAlert =(variant : string,text : string) =>{
    dispatch({type:SHOW_ALERT,payload:{variant,text}})
    setTimeout(()=>{
        setAlert({variant:'',text:''})
    },2000)
}

const setAlert =(alert : typealert) => dispatch({type :REMOVE_ALERT,payload:null})

return(
    <AlertContext.Provider value={{
        alert:state.alert,
        showAlert
    }}>
        {props.children}
    </AlertContext.Provider>
)

在本例中，我提供的操作类型是任意类型的，但我希望它是来自这里的./types文件的类型

export const SEARCH_USERS = 'SEARCH_USERS'
export const GET_USER ='GET_USER'
export const GET_REPOS = 'GET_REPOS'
export const CLEAR_USERS ='CLEAR_USERS'
export const SHOW_ALERT ='SHOW_ALERT'
export const SET_LOADING ='SET_LOADING'
export const USER_LOADING ='USER_LOADING'
export const REMOVE_ALERT ='REMOVE_ALERT'

type操作类型=
| {
类型：搜索用户；
有效载荷：IAlertState[“警报”]；
}
| {
类型：删除警告；
有效载荷：无效；
}
| ....

使用联合类型对有效载荷和类型进行建模， 由于type是区分联合类型的自然标记，

---

您的代码将得到良好的类型化和适当的缩小

我们是否有任何方法可以在这种情况下实现类型安全操作，这样就不需要使用联合类型？@tanmay union是类型安全的方法，对于有效负载类型，您可以指定更详细的类型，例如{……，有效负载：IAlertState[“alert”}等

export const SEARCH_USERS = 'SEARCH_USERS'
export const GET_USER ='GET_USER'
export const GET_REPOS = 'GET_REPOS'
export const CLEAR_USERS ='CLEAR_USERS'
export const SHOW_ALERT ='SHOW_ALERT'
export const SET_LOADING ='SET_LOADING'
export const USER_LOADING ='USER_LOADING'
export const REMOVE_ALERT ='REMOVE_ALERT'