A question I’ve seen quite often from people new to Elm is “How do I read types like Html Msg“? When the function signature is view : Model -> Html Msg, does view return some kind of function which takes a Msg argument? Or does it return a function that returns a Msg? Or is Html instead some kind of type decorator that extends Msg?

When you start out with Elm, this stuff can be confusing - I know I stumbled over it for a while.

To understand what’s going on, a useful analogy to recall is the List Int type, which represents a list of integers.

In Elm we have List a, which is a generic type where a gets replaced with a particular type such as Int or String in order to produce a specific type.

Similarly, we have a generic type Html a where a is replaced with Msg. However, if you try to say it in English, you get “HTML of messages” which still doesn’t make much sense.

Instead, it’s useful to think of these generic types as containing values of type a somewhere in their internal data structures. More accurately, these types optionally contain values of type a - an empty list contains no integers but it’s still a List Int.

So List Int is a data structure with Ints somewhere inside it, and Html Msg is a data structure with Msg values somewhere inside it.

To summarise, view : Model -> Html Msg is a function which takes a data structure of type Model as its argument and returns another data structure of type Html which may contain Msg values somewhere inside.

Here are a few other examples:

• Maybe Int - a Maybe value which may contain an Int (or otherwise Nothing)
• Cmd Msg - a Cmd value which may contain values of type Msg

• Result Http.Error String - a Result value which may contain values of type Http.Error and/or values of type String (generic types can have more than one type variable!). In this case, the definition of the type is quite simple:

  type Result error value
      = Ok value
      | Err error