Specify return type in TypeScript arrow function

by

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.

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Expression ___ has changed after it was checked
  3. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  4. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  5. TypeScript conditional types – filter out readonly properties / pick only required properties
  6. Typescript Discriminated Union allows invalid state
  7. Why can’t I return a generic ‘T’ to satisfy a Partial?
  8. Define global constants
  9. What does ‘declare’ do in ‘export declare class Actions’?
  10. “parserOptions.project” has been set for @typescript-eslint/parser
  11. How to use namespaces with import in TypeScript
  12. angular2 bootstrap with data from ajax call(s)
  13. Interface is allowing extra property when it is used as return type of a function
  14. Typescript: What’s the difference between an optional field and a union with undefined?
  15. Typescript: what is a “naked type parameter”
  16. Naming of TypeScript union and intersection types
  17. What do square brackets mean where a field should be in typescript?
  18. Typescript type T or function () => T usage
  19. Flatten object with custom keys in Typescript
  20. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  21. How to declare a function that throws an error in Typescript
  22. How to use enum as index key type in typescript?
  23. Typescript: Remove entries from tuple type
  24. Typescript: change function type so that it returns new value
  25. Check if object correctly implements interface
  26. Is it possible to narrow the types of overloaded parameters without exhaustively checking each parameter in the function body?
  27. What exactly $event object do in Angular 2?
  28. new Typescript “satisfies” operator
  29. What are the differences between the private keyword and private fields in TypeScript?
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment