Learn TypeScript

Creating type aliases

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:

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:

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:

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:

let variable: TypeAliasName;

Using type aliases for primitives

We are going to explore type aliases in an exercise.

TypeScriptOpen 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:
let firstName: FirstName = "Tom";
let personScore: PersonScore = 70;
🤔

Do any type errors occur?

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:

type TypeAliasName = (paramName1: paramType1, ...) => ReturnType;
  • Copy the function below and paste it in the code editor:
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:

type TypeAliasName = (
...,
optionalParam?: optionalParamType
) => ReturnType;
  • Add an optional category parameter to the Log type of type string.
🤔

Do any type errors occur on the log function after the update to the Log type?

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:
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.
🤔

Do any type errors occur on the variables we gave the Score type now?

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.
🤔

Do any type errors occur on the variables we gave the Score type now?

  • 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.

© 2020 Carl Rippon
Privacy Policy
This site uses cookies. Click here to find out more