在 TypeScript 箭头函数中指定返回类型

2023-12-27

我正在使用 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' 在函数中处理(我想这可能不是问题。)

对于执行此操作的最佳方法有什么建议吗?


首先,考虑原始问题中的以下符号:

export const addTodo3 = (text: string) => <AddTodoAction>({
    type: "ADD_TODO",
    text
})

使用此表示法,您可以将返回的对象类型转换为类型AddTodoAction。然而,函数声明的返回类型仍然是未定义的(并且编译器将隐式假设any作为返回类型)。

请改用以下符号:

export const addTodo3 = (text: string): AddTodoAction => ({
    type: "ADD_TODO",
    text: text
})

在这种情况下,省略必需的属性将产生预期的编译器错误。例如,省略text属性将生成以下(所需的)错误:

Type '{ type: "ADD_TODO"; }' is not assignable to type 'TodoAction'.
  Type '{ type: "ADD_TODO"; }' is not assignable to type 'DeleteTodoAction'.
    Types of property 'type' are incompatible.
      Type '"ADD_TODO"' is not assignable to type '"DELETE_TODO"'.

另请参阅游乐场示例 http://www.typescriptlang.org/play/#src=interface%20AddTodoAction%20%7B%0D%0A%20%20%20%20type%3A%20%22ADD_TODO%22%2C%0D%0A%20%20%20%20text%3A%20string%0D%0A%7D%3B%0D%0A%0D%0Ainterface%20DeleteTodoAction%20%7B%0D%0A%20%20%20%20type%3A%20%22DELETE_TODO%22%2C%0D%0A%20%20%20%20id%3A%20number%0D%0A%7D%0D%0A%0D%0Atype%20TodoAction%20%3D%20AddTodoAction%20%7C%20DeleteTodoAction%0D%0A%0D%0Aexport%20const%20addTodo1%20%3D%20(text%3A%20string)%3A%20TodoAction%20%3D%3E%20(%7B%0D%0A%20%20%20%20type%3A%20%22ADD_TODO%22%2C%0D%0A%20%20%20%20text%0D%0A%7D)%3B%0D%0A%0D%0Aexport%20const%20addTodo2%20%3D%20(text%3A%20string)%3A%20TodoAction%20%3D%3E%20(%7B%0D%0A%20%20%20%20type%3A%20%22ADD_TODO%22%0D%0A%7D)%3B.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 TypeScript 箭头函数中指定返回类型 的相关文章

随机推荐