我正在使用 React 和 Redux,并将操作类型指定为接口,以便我的化简器可以利用标记的联合类型来提高类型安全性。
所以,我的类型声明如下所示:
interface AddTodoAction {
type: "ADD_TODO",
text: string
};
interface DeleteTodoAction {
type: "DELETE_TODO",
id: number
}
type TodoAction = AddTodoAction | DeleteTodoAction
我想创建创建这些操作的辅助函数,并且我倾向于使用箭头函数来实现此目的。如果我这样写:
export const addTodo1 = (text: string) => ({
type: "ADD_TODO",
text
});
编译器无法提供任何帮助来确保这是有效的AddTodoAction
因为没有明确指定返回类型。我可以通过这样做显式指定返回类型:
export const addTodo2: (text: string) => AddTodoAction = (text: string) => ({
type: "ADD_TODO",
text
})
但这需要指定我的函数参数两次,因此它很冗长且难以阅读。
有没有一种方法可以在使用箭头表示法时显式指定返回类型?
我想过尝试这个:
export const addTodo3 = (text: string) => <AddTodoAction>({
type: "ADD_TODO",
text
})
在这种情况下,编译器现在将返回类型推断为AddTodoAction
但它并不能验证我返回的对象是否具有所有适当的字段。
我可以通过切换到不同的函数语法来解决这个问题:
export const addTodo4 = function(text: string): AddTodoAction {
return {
type: "ADD_TODO",
text
}
}
export function addTodo5(text: string): AddTodoAction {
return {
type: "ADD_TODO",
text
}
}
这些方法中的任何一种都会导致编译器使用正确的返回类型并强制我已正确设置所有字段,但它们也更冗长并且改变了方式'this
' 在函数中处理(我想这可能不是问题。)
对于执行此操作的最佳方法有什么建议吗?