Html Msg vs Html msg explained (Elm)

Consider the following code:

type Msg = DELETE_BY_ID Int

type alias Model =
  { query : String
  , results: List { id: Int, name: String, stars: Int }
  }

view : Model -> Html Msg
view model =    
    button            
            [ class "hide-result", onClick (DELETE_BY_ID result.id)]
            [ text "X" ]

Difference between upper and lower case in ELM

Consider the type annotation here: view : Model -> Html Msg - This means that we are generating some Html which in turn can generate something of type Msg - (in capital letters!). We have defined what this type is too at the very top: type Msg = DELETE_BY_ID Int

Now what if the type annotation was ‘Html msg’ - in this particular case, the msg is in lower case. This means ELM is expecting the view function to generate Html which would in turn generate a msg - but what is a msg? This is not defined - we have not defined this anywhere! A msg could be absolutely anything! It will be inferred. This annotation is a lot less clear and explicit than the former (with the capitalised Msg).

If we are using lower cases, you can think of those parameters as being ‘generic’. If upper cases are used: then these types should be defined. That is the ELM convention - or at least how I understand it.

I am myself learning ELM, so it is entirely possible I’ve missed something, somewhere. Regardless, I hope the above explanation helps.

Written on January 11, 2019