Creating type aliases

In this lesson, we'll learn what a type alias is and the cases where they are useful.

Understanding the need for type aliases

In the last lesson, we created an object type to hold a name and a score:

Copy
const tomScore: { name: string; score: number } = {
  name: "Tom",
  score: 70,
};
const bobScore: { name: string; score: number } = {
  name: "Bob",
  score: 80,
};
const janeScore: { name: string; score: number } = {
  name: "Jane",
  score: 90,
};

Wouldn't the code be more readable if we could somehow name { name: string; score: number; } and use that name? So, something like:

Copy
const tomScore: Score = { name: "Tom", score: 70 };
const bobScore: Score = { name: "Bob", score: 80 };
const janeScore: Score = { name: "Jane", score: 90 };

Well, this is precisely what a type alias is!

A type alias is a name that refers to another type

The syntax for creating a type alias

We define a type alias as follows:

Copy
type TypeAliasName = ExistingType;

So, the type keyword is placed before the chosen name for the type. The type that is being aliased is placed after the equals operator (=).

The type alias name can then be used in type annotations:

Copy
let variable: TypeAliasName;

Using type aliases for primitives

We are going to explore type aliases in an exercise.

Open exercise in CodeSandbox

• Create a type alias for a string called FirstName.

• Create a type alias for a number called PersonScore.

• Add the following code which uses these types for firstName and personScore variables:

Copy
let firstName: FirstName = "Tom";
let personScore: PersonScore = 70;

Using for type aliases for primitives isn't that useful though - it is generally simpler to use the primitive type directly.

Using type aliases for functions

Type aliases can be used for arrow functions:

Copy
type TypeAliasName = (paramName1: paramType1, ...) => ReturnType;

• Copy the function below and paste it in the code editor:

Copy
const log = (message: string) => {
  console.log(message);
};

• Create a type alias called Log that represents this function.

• Add Log in a type annotation to the function:

Optional parameters can be added to function type aliases using a question mark (?) before the parameter type annotation:

Copy
type TypeAliasName = (
  ...,
  optionalParam?: optionalParamType
) => ReturnType;

• Add an optional category parameter to the Log type of type string.

Good stuff, we are gaining a good understanding of type aliases now!

Using type aliases for objects

Type aliases are handy for objects. We will create a type alias for the Score example mentioned at the start of this last lesson.

• Copy and paste the code from below into the code editor:

Copy
const tomScore: { name: string; score: number } = {
  name: "Tom",
  score: 70,
};
const bobScore: { name: string; score: number } = {
  name: "Bob",
  score: 80,
};
const janeScore: { name: string; score: number } = {
  name: "Jane",
  score: 90,
};

• Write the code for a Score type alias, just before the code we just pasted in.

• Now update the score variable declarations to use the Score type.

Optional object members can be added to object type aliases using a question mark (?) before the member type annotation.

• Add an optional boolean pass property to the Score type.

Methods within the object can also be declared in an object type alias.

• Add a log method of type Log to the Score type alias.

• Add a log method to the three score variables that reference the log variable we created earlier in this lesson.

The type errors will now disappear.

Nice!

Summary

A type alias is a name given to an existing type. They can help the readability of our code. They also give us a mechanism of reusing a type in several places of our code.

Good stuff!

In the next lesson, we’ll learn an alternative method of creating object types.