Specify return type in TypeScript arrow function

Brian Hanechak

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
});

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?

I've thought of trying this:

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

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
    }
}

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?

helmbert

First, consider the following notation from your original question:

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

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).

Use the following notation instead:

export const addTodo3 = (text: string): AddTodoAction => ({
    type: "ADD_TODO",
    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"'.

Also see the playground example.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

TypeScript function return type based on input parameter

From Java

TypeScript: Is it possible to get the return type of a generic function?

From Dev

Typescript - Arrow Function with Parameters

From Dev

How to specify that a function returns a certain type when new'ed in TypeScript?

From Dev

How can I specify a return type for a $http call with Typescript?

From Dev

return type for class function typescript

From Dev

Typescript Decorators and Arrow Function

From Dev

Typescript: Constrain function generic type based on the expected return type

From Dev

Return object from arrow function

From Dev

Type for parameter in TypeScript Arrow Function

From Dev

typescript arrow function parameter type safe

From Dev

Generic return type of function in Typescript

From Dev

Typescript: Specify type in object declaration

From Dev

Where does the rule in the standard specify that a function with a trailing-return-type whose return type contains a placeholder type should be `auto`

From Dev

TypeScript return exact function infer type

From Dev

Minimal implementation of function with conditional type return type in TypeScript

From Dev

Typescript - Function return type if I want to return object

From Dev

Implementing a function with conditional return type in Typescript

From Dev

Typescript throws error for return function type

From Dev

Typescript function return type depending on number or type of arguments

From Dev

Where does the rule in the standard specify that a function with a trailing-return-type whose return type contains a placeholder type should be `auto`

From Dev

TypeScript: How to type a returned function's return type

From Dev

Return object from arrow function

From Dev

Typescript: Arrow function - TS2339: Property does not exist on type '{}'

From Dev

TypeScript Specify Type For Individual Function Use

From Dev

Typescript: this inside parameters of arrow function

From Dev

How to specify a function parameter and return type as a List in ocaml?

From Dev

Arrow function with return in reduce call

From Dev

Specify the return content type of a Controller

Related Related

  1. 1

    TypeScript function return type based on input parameter

  2. 2

    TypeScript: Is it possible to get the return type of a generic function?

  3. 3

    Typescript - Arrow Function with Parameters

  4. 4

    How to specify that a function returns a certain type when new'ed in TypeScript?

  5. 5

    How can I specify a return type for a $http call with Typescript?

  6. 6

    return type for class function typescript

  7. 7

    Typescript Decorators and Arrow Function

  8. 8

    Typescript: Constrain function generic type based on the expected return type

  9. 9

    Return object from arrow function

  10. 10

    Type for parameter in TypeScript Arrow Function

  11. 11

    typescript arrow function parameter type safe

  12. 12

    Generic return type of function in Typescript

  13. 13

    Typescript: Specify type in object declaration

  14. 14

    Where does the rule in the standard specify that a function with a trailing-return-type whose return type contains a placeholder type should be `auto`

  15. 15

    TypeScript return exact function infer type

  16. 16

    Minimal implementation of function with conditional type return type in TypeScript

  17. 17

    Typescript - Function return type if I want to return object

  18. 18

    Implementing a function with conditional return type in Typescript

  19. 19

    Typescript throws error for return function type

  20. 20

    Typescript function return type depending on number or type of arguments

  21. 21

    Where does the rule in the standard specify that a function with a trailing-return-type whose return type contains a placeholder type should be `auto`

  22. 22

    TypeScript: How to type a returned function's return type

  23. 23

    Return object from arrow function

  24. 24

    Typescript: Arrow function - TS2339: Property does not exist on type '{}'

  25. 25

    TypeScript Specify Type For Individual Function Use

  26. 26

    Typescript: this inside parameters of arrow function

  27. 27

    How to specify a function parameter and return type as a List in ocaml?

  28. 28

    Arrow function with return in reduce call

  29. 29

    Specify the return content type of a Controller

HotTag

Archive