我對打字稿很陌生，我正在嘗試撰寫一個具有三個可能的有效負載值的 reducer 函式：無值、字串或數字。我正在使用有區別的聯合型別，從我讀過的內容來看，我認為我的代碼應該可以作業，但事實并非如此。
type StateType = {
isModalOpen: boolean;
modalContent: string;
people: {
id: number;
name: string;
}[];
};
type NoPayloadAction = {
type: string;
};
type NamePayloadAction = {
type: string;
payload: {
name: string;
};
};
type IdPayloadActionType = {
type: string;
payload: {
id: number;
};
};
type ActionType = NoPayloadAction | NamePayloadAction | IdPayloadActionType;
const ACTIONS = {
ADD_ITEM: 'ADD_ITEM',
NO_ACTION: 'NO_ACTION',
CLOSE_MODAL: 'CLOSE_MODAL',
REMOVE_ITEM: 'REMOVE_ITEM',
};
// reducer function
const reducer = (state: StateType, action: ActionType) => {
switch (action.type) {
case ACTIONS.ADD_ITEM:
return {
people: [
...state.people,
{ id: new Date().getTime(), name: action.payload.name },
],
isModalOpen: true,
modalContent: 'item added',
};
case ACTIONS.NO_ACTION:
return { ...state, isModalOpen: true, modalContent: 'enter a value' };
case ACTIONS.CLOSE_MODAL:
return { ...state, isModalOpen: false, modalContent: '' };
case ACTIONS.REMOVE_ITEM:
const newPeople = state.people.filter(
(person) => person.id !== action.payload.id
);
return {
people: [...newPeople],
isModalOpen: true,
modalContent: 'item removed',
};
default:
return state;
}
};
Typescript 拋出兩個錯誤：下面的行拋出此錯誤：“ActionType”型別上不存在屬性“有效負載”。型別“NoPayloadAction”上不存在屬性“有效負載”
{ id: new Date().getTime(), name: action.payload.name },
(person) => person.id !== action.payload.id
NoPayloadAction 型別沒有有效負載，但其他兩個有，據我了解，它們匹配它們的型別，因為一個有一個id:number欄位，另一個有一個name:string欄位。我真的對此感到困惑。
uj5u.com熱心網友回復：
現在，不能保證傳入action變數的不是NoPayloadAction. 如果你確定你的action變數確實有一個有效負載，你總是可以使用as關鍵字告訴 typescript 你知道變數是什么。例如：
return { id: new Date().getTime(), name: (action as NamePayloadAction).payload.name },
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476710.html