CHAPTER 6 · 4 lessons · 52 exercises

Reuse a type

Learn to read the angle brackets in `Array<string>`, and pass a type itself as an argument.

Read other people's code and you run into angle brackets like Array<string> or Promise<number>. If you cannot read those, you get stuck on line one of a framework's getting-started page. This is a short chapter for getting past that.

To give away the answer: what is inside the angle brackets is "an argument handed to a type". Just as a function takes values inside its brackets, a type sometimes takes a type inside its angle brackets. Array<string> means "an array that holds strings" — in fact exactly the same thing as string[]. One thing, two ways of writing it.

Think of it this way and you can read it. Array is a tool for making an array type, and handing it <string> produces the type "array of strings". Change what you hand over to <number> and you get an array of numbers. A type that makes types, if you like. This machinery is called generics.

Once you can read it, you write a little of it. Say you want a function that takes an array and returns the first item. You want it for arrays of strings and for arrays of numbers. Write string[] and it only works for strings; write any[] and you lose track of what comes back.

This is where a type parameter comes in. Write <T> after the function name and it means "whoever calls it decides the type of the contents". T gets swapped for the real type when it is called, so hand over a string[] and the return is a string; hand over a number[] and it is a number. A function you wrote once works for anything, with its types intact.

Generics go deeper than this, but there is no need to wade in while you are starting out. Being able to read them, and being able to write one simple one. With those two you stop getting stuck in other people's code.

Next we talk about sending types out of the file. You learnt export and import in the JavaScript course. Those work on types too. Gather your type definitions in one file and bring them in from wherever you use them. Write import type and it is clear that "this line brings in a type only". Types disappear before anything runs, so that line vanishes entirely from the converted code. In real projects it is common to have one file holding the types, brought in from all over.

And the chapter ends with something to read. By now you have everything you need to put types on your own code. But other people's code still holds ways of writing we have not shown you. enum, tuple types, intersection types, utility types, abstract classes and static. You need not master all of them, but being able to tell what they are when you see them keeps you from stalling later. So the last one is just a short tour of them.

This is the end of the course. Once you are here, a : string will never put you on your guard again. Types are not there to tie down the code you wrote; they are the companion that tells you fastest when you get something wrong.

Lessons in this chapter

Read and write angle brackets

  1. 27Read the angle bracketsLearn to read the angle brackets in Array<string>, and see that it is the same thing as string[].Go to the exercises
  2. 28A function with a type parameterWrite <T> after the function name and make one function that works with an array of any type.Go to the exercises

Share types between files

  1. 29Share types between filesSend a type out with export type and take it in with import type. Reuse your types across files too.Go to the exercises

What you will meet next

  1. 30What you will meet nextTake a peek at five ways of writing this course does not cover — just enough to read them.Go to the exercises

This is the last chapter of the course.