TypeScript 中的泛型 - 类型不可分配给类型（缺少以下属性）

Question

我创建了以下 interface、type 和 function。

interface ActionWithGeneric<T> { 
    type: 'add' | 'remove';
    data: T;
}

type StateWithGeneric<T> = Array<ActionWithGeneric<T>>

const TodoReducerGeneric : <T,> (state: StateWithGeneric<T>, action: ActionWithGeneric<T>) => StateWithGeneric<T> = (state, action) => { 
    switch (action.type) { 
        case "add": 
            return [...state, {text: action.data}]
        case "remove": 
            return state.filter(a => action.data !== a.data)
        default: 
        return state
    }
}

接下来，我尝试在我的 React 组件中按如下方式使用它：

const TextField : React.FC<Props> = ({text}) => { 

    const [data, dispatchData] = useReducer(TodoReducerGeneric, [])

    return (
        <div>{data}</div>
    )
}

我在 TodoReducerGeneric 上收到以下错误：

Type '<T>(state: StateWithGeneric<T>, action: ActionWithGeneric<T>) => (ActionWithGeneric<T> | { text: T; })[]' is not assignable to type '<T>(state: StateWithGeneric<T>, action: ActionWithGeneric<T>) => StateWithGeneric<T>'.
  Type '(ActionWithGeneric<T> | { text: T; })[]' is not assignable to type 'StateWithGeneric<T>'.
    Type 'ActionWithGeneric<T> | { text: T; }' is not assignable to type 'ActionWithGeneric<T>'.
      Type '{ text: T; }' is missing the following properties from type 'ActionWithGeneric<T>': type, data

我知道存在类型不匹配，但我正在努力了解 {text : T;} 在错误消息中的来源或如何修复它。

Answer 1

嗯，你的reducer的状态是：

ActionWithGeneric<T>[]

但您正在尝试添加

{text: action.data}

到这个数组。

{text: action.data} 不是 ActionWithGeneric<T>，但 action 是...

你的意思是：

switch (action.type) { 
    case "add": 
        return [...state, action]
    // ...

?

TypeScript 中的泛型 - 类型不可分配给类型（缺少以下属性）

Generics in TypeScript - Type is not assignable to type (missing the following properties)

generics

typescript

reactjs

typescript-generics

react-typescript