Adding types

Having finished the JavaScript course, you can already handle values, branch on conditions, repeat work and gather it up into functions. The only thing this course adds is types — one thing. You are not learning the grammar all over again. The JavaScript you have been writing already runs as TypeScript.

So why would you want types? JavaScript never complains about what you put in a variable. Drop a string into one you meant for numbers and it carries on quite happily. The trouble comes afterwards. "3" + 5 turns into 35, and by the time you notice the maths is wrong, the line that caused it is a long way back.

TypeScript points that mix-up out before anything runs. "Text is supposed to go here, and you are trying to put a number in" — said to you as you type it.

The writing is very plain. Put a : after the name, then the name of the type. Text is string, numbers are number, true or false is boolean. Those three are the ones you will reach for most.

Arrays have types too. Write string[] and you mean "an array that only holds strings". Whatever is in front of the [] is the type of the contents. Being sure the contents all match is a relief when you later want to do one thing to all of them at once.

And the big moment of this chapter is typing a function. You write a type on each parameter, and a type on what comes back. Do that, and passing in the wrong value stops you on the line where you called it. No going inside the function to hunt for the cause. For a function that gives nothing back, write void.

One thing here is particular to TypeScript. Forget the type on a parameter and you get told off. That is the error "Parameter implicitly has an 'any' type". any means "any type will do", and once you allow it there is no point in having written types at all. So always put a type on your parameters.

When a type error appears, the best first move is to just read it. This course shows you the message TypeScript itself gives, word for word. "Type 'number' is not assignable to type 'string'" is saying "you are trying to put a number where you promised text". What these messages say is simpler than it looks.

And here is the important part. Types are only for the check before you run. Right before your code runs they are all stripped away, and what is left is plain JavaScript. So console.log prints the same and your sums come out the same as they did in JavaScript. Nothing you see changes because you wrote a type.

At first an error can feel like being told off. But that error is a bug you were going to go looking for yourself, after running it. All that has changed is where you find it: before, rather than after. Get used to this and you will write faster, not slower.

By the end of this chapter you will be able to leave "what goes in this variable" and "what does this function take and give back" written down in the code itself. That is for you — and it is also an explanation for whoever reads it later, yourself in three days included.