Question

我有一个redux样式缩减器（我使用ngrx）返回特定类型。当我在返回对象中使用spread运算符时，typescript linter没有捕获无效的属性。

这是我的界面：

interface MyState {
    firstName: string;
    lastName: string;
    age: number;
}

这是我的减速机。 Action是一个ngrx动作：

function reducer(state = initialState, action: Action): MyState {
    switch (action.type) {
        case Actions.COOL_ACTION:
            return {
                ...state,
                propertyDoesNotExist: action.payload, // <- no error
            };
        default:
            return state;
    }
}

我希望propertyDoesNotExist会被标记，但事实并非如此。我尝试过投放<CalendarState>返回对象，状态属性...(<CalendarState>state)并使用as别名，但它没有帮助。

就像传播操作员弄乱了类型一样。

Answer 1

通过使用...state，返回的表达式不再是对象文字，如果TypeScript是返回类型的子类型（即具有额外属性），则TypeScript不会抱怨。我自己遇到了这个问题并编写了一个小辅助函数来发出额外的属性信号：

const applyChanges = <S, K extends keyof S>(state : S, changes : Pick<S, K>) : S =>
  Object.assign({}, state, changes);

（由于此问题，使用Object.assign而非传播运营商：https://github.com/Microsoft/TypeScript/issues/14409）

要使用applyChanges，只需替换

即可

return {...state,
    propertyDoesNotExist: action.payload, // <- no error
};

与

return applyChanges(state, {
    propertyDoesNotExist: action.payload, // <- error
});

TypeScript类型不适用于spread运算符

1 个答案: