在 TypeScript 箭头函数中指定返回类型 [英] Specify return type in TypeScript arrow function

问题描述

我正在使用 React 和 Redux，并将操作类型指定为接口，以便我的 reducer 可以利用标记联合类型来提高类型安全性.

I am using React and Redux and have action types specified as interfaces, so that my reducers can take advantage of tagged union types for improved type safety.

所以，我有如下所示的类型声明:

So, I have type declarations that look like this:

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

interface DeleteTodoAction {
    type: "DELETE_TODO",
    id: number
}

type TodoAction = AddTodoAction | DeleteTodoAction

我想制作创建这些动作的辅助函数，为此我倾向于使用箭头函数.如果我这样写:

I'd like to make helper functions that create these actions, and I tend to use arrow functions for this. If I write this:

export const addTodo1 = (text: string) => ({
    type: "ADD_TODO",
    text
});

编译器无法提供任何帮助来确保这是一个有效的 AddTodoAction，因为没有明确指定返回类型.我可以通过这样做显式指定返回类型:

The compiler can't provide any help in making sure this is a valid AddTodoAction because the return type isn't specified explicitly. I can specify the return type explicitly by doing this:

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

但这需要两次指定我的函数参数，所以它很冗长且难以阅读.

But this requires specifying my function arguments twice, so it's verbose and harder to read.

有没有办法在使用箭头符号时显式指定返回类型?

Is there a way I can specify the return type explicitly when using arrow notation?

我想试试这个:

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

在这种情况下，编译器现在将返回类型推断为 AddTodoAction，但它不会验证我返回的对象是否具有所有适当的字段.

In this case, the compiler now infers the return type as AddTodoAction but it's doesn't validate that the object I'm returning has all of the appropriate fields.

我可以通过切换到不同的函数语法来解决这个问题:

I could solve this by switching to a different function syntax:

export const addTodo4 = function(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

export function addTodo5(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

这些方法中的任何一种都会导致编译器使用正确的返回类型并强制我适当地设置所有字段，但它们也更加冗长，并且它们改变了this"的处理方式在一个函数中(我想这可能不是问题.)

Either of these methods will cause the compiler to use the correct return type and enforce that I have set all fields appropriately, but they are also more verbose and they change the way 'this' is handled in a function (which may not be an issue, I suppose.)

有什么关于最好的方法的建议吗?

Is there any advice about the best way to do this?

推荐答案

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

First, consider the following notation from your original question:

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

使用此表示法，您将返回的对象类型转换为 AddTodoAction 类型.但是，函数声明的返回类型仍然未定义(并且编译器会隐式地假定 any 作为返回类型).

Using this notation, you typecast the returned object to the type AddTodoAction. However, the function's declared return type is still undefined (and the compiler will implicitly assume any as return type).

改用以下符号:

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

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

In this case, omitting a required property will yield the expected compiler error. For example, omitting the text property will generate the following (desired) error:

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"'.

另见游乐场示例.

这篇关于在 TypeScript 箭头函数中指定返回类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！