CODEWITHSUNDEEP
javascriptreact-nativereduxreact-reduxflowtype
EberronBruce
EberronBruce

Reputation: 330

Flow Javascript "Missing type annotation for T" And "Missing type annotation for S"

I am taking a class on React Native and then using Flow to try to correct the errors of the class as the instructor is not using any type checking.

I am running into another error with Flow that couldn't find the answer by a long search on the internet. I am getting these two errors on the same lines. I do not know what flow means by these errors. This confuses me and searching the Flow documentation did not serve me as it didn't explain this at all.

I am using Atom with Nuclide and Flow 0.78.

Missing type annotation for T.

and

Missing type annotation for S.

This is the code with the errors that I marked out.

    /* @flow */
import { ADD_PLACE, DELETE_PLACE, SELECT_PLACE, DESELECT_PLACE } from '../actions/actionTypes.js'

type State = {
  places: Array<Object>,
  selectedPlace: ?{
  key: string,
  name: string,
  image: Image
}};
type Action = { type : string, placeName: string, placeKey: string};

const initialState = {
  places: [],
  selectedPlace: null
}


const reducer = (state : State = initialState, action : Action) => {

  switch (action.type) {
    case ADD_PLACE:
      return {
        ...state,
        places: state.places.concat({ <-- Error
          key: String(Math.random()),
           name: action.placeName,
           image: {
             uri: "https://cdn.newsapi.com.au/image/v1/f08d8ccc83fbc2d08529aea69890ad4d?width=1024"
           }
        })
      };
      case DELETE_PLACE:
      return {
        ...state,
        places: state.places.filter(place => {. <--Error
            return state.selectedPlace && place.key !== state.selectedPlace.key;
          }),
          selectedPlace: null
      };
      case SELECT_PLACE:
      return {
        ...state,
        selectedPlace: state.places.find(place => {  
          return place.key == action.placeKey;
        })
      };
      case DELETE_PLACE:
      return {
        ...state,
        selectedPlace: null
      };
    default:
      return state;
  }

};

export default reducer;

These errors are frustrating, and they don't make sense. I am sure I am not the only struggling with this. There are probably others as well.

If anyone knows the answer to this problem. The help would be appreciated.

Also, if anyone can point to some documentation that would translate these kind of Flow errors into something that can be more meaningful or easier to understand that would be a great help as the official documentation doesn't explain too much nor many examples to learn from.

If there is some documentation that is more explicit to be able to learn that would help out greatly as well.

Thanks.

Upvotes: 0

Views: 2625

Answers (2)

abadalyan
abadalyan

Reputation: 1235

Starting from Flow v0.70 exported functions using array methods like filter, map, concat should specify the return type. In your case this should fix it:

const reducer = (state : State = initialState, action : Action): State

See this discussion for details.

Upvotes: 2

Ulrik Strid
Ulrik Strid

Reputation: 83

It seems like flow is having problems inferring the type of places so you might have to help it out a bit.

This is the type definition for Array.concat

concat<S, Item: $ReadOnlyArray<S> | S>(...items: Array<Item>): Array<T | S>

So you'll want something like this

state.places.concat<Object>([ ... ])

A thing to note here is that you're passing a object to concat but it should take a array. You can probably do the same for filter, state.places.filter<Object>(...)

Upvotes: 0

Related Questions