Save 45% for a limited time.

Get access to all courses and lessons on egghead today.


    Add Type Annotations to Values and Functions in Elm

    Enrico BuonannoEnrico Buonanno

    Type annotations are options in Elm. Adding type annotations can bring a good deal of clarity about which types you are using and what your program does with them

    In this lesson we'll be adding type annotations to this Hello World program



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 Elm is a statically typed language with good type inference. This means that everything is type safe, but usually you don't need to write type annotations. If you look at this very simple hello world program on the left half of my screen, you can see that there are no type annotations, and yet the types are there.

    00:19 If I open the Elm repo on the right side of my screen and type a value, such as hello world, then you can see that the repo tells me that this value, hello world, has type string. On the other hand, if I typed 2.0it would say that the type is float.

    00:37 Let me go back to the hello world program, and what if I wanted to be really pedantic and tell the program that this hello world is a string? I could put the string into a variable and call it data, and then declare this within that expression.

    00:55 Let data equal hello world in text data. This is essentially the same as before, but now I'm able to add a type annotation for data. I could say that data is a string. This compiles and is essentially the same as before.

    01:13 Now that we know that data is a string, we know that text is a function that takes a string, but what is the type of text, exactly? To find out, let me come back to the repo. If I type text, then it doesn't know anything about text, because the text function comes from the HTML module, as you can see here.

    01:34 I need to import the HTML module. I'm going to just expose all the functions in that module. Then I will just type text. The repo tells me that text is a function that takes a string and returns an html.html message.

    01:54 Here we have three things. The first HTML is the module name. The second HTML is the type name. Notice that type and module names are uppercase. Then message, which you can see is lowercase, is the type parameter.

    02:07 As a result, we could add a type annotation for main, and we could say that main returns HTML with a message. Yet in this particular case, we are not parameterizing the HTML, so any type could go here as far as this program is concerned.

    02:23 At this point, this doesn't compile, because the HTML type is within the HTML module, so I need to expose that as well. This compiles again. Now we have type annotations for our main function. This is the simplest type of program that we can write in Elm which just has a main function that returns an HTML object.

    02:46 This is a representation of the HTML we want to be displayed, which DM framework will evaluate and render as the virtual DOM.