Using some standard generic types

In this lesson, we will learn the syntax for generic types before consuming some of the standard generic types in TypeScript.

Understanding the generic type syntax

Generic types allow us to create a specific type by enabling us to pass types into it as parameters. The parameters are passed inside angled brackets. If there are multiple parameters, they are separated by a comma.

Copy
const myVar = GenericType<SpecificType1, SpecificType2, ...>

This will make more sense when we use some of the standard generic types below.

Array<T>

One of the easiest generic types to understand is Array. In fact, we have used this before when we first created a strongly-typed array. Let's explore this an exercise.

Open exercise in CodeSandbox

The code declares a scores variable with a type annotation using the generic Array type.

• Let's assign scores to an array of numbers:

Copy
scores = [70, 65, 75];

• Now assign scores to an array that contains a non-numeric element:

Copy
scores = [70, "65", 75];

The type checker picks up on the problem as we expect.

In the above example, we passed a primitive type into the generic type. However, we can pass any type into generic parameters. Let's explore this:

• Add the following code for a Coordinate type into the code editor:

Copy
type Coordinate = [number, number];

• Let's assign coordinates to a value:

Copy
coordinates = [
  [30, 100],
  [100, 50],
];

• Try giving a coordinate an extra dimension:

Copy
coordinates = [
  [30, 100, 0],
  [100, 50],
];

Let's move on to look at another useful generic type in the next section.

Promise<T>

We can use the Promise generic type to specify the return type for asynchronous code. We specify the type of the item that is eventually returned in the generic parameter.

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

Copy
const promisedResponse: Promise<Response> = fetch("https://swapi.dev/api/");

The code uses the Promise generic type to strongly-type what is returned from the fetch function.

• Let's use the then method in promisedResponse to handle the response when the promise has been resolved. Type the code out rather than copying and pasting and notice the intellisense the editor provides.

Copy
promisedResponse.then((res) => console.log(res.ok));

Record<K,V>

Generic types can have multiple parameters. Let's explore an example:

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

Copy
type Result = {
  firstName: string;
  surname: string;
  score: number;
};
type ResultRecord = Record<string, Result>;

The Record generic type allows a key-value object type to be created. We have used this to create a ResultRecord type where the key is any string, and the value is of type Result.

• Let's use our ResultRecord type to create some records:

Copy
const records: ResultRecord = {
  rodj: {
    firstName: "Rod",
    surname: "James",
    score: 70,
  },
  janes: {
    firstName: "Jane",
    surname: "Smith",
    score: 95,
  },
  fredp: {
    firstName: "Fred",
    surname: "Peters",
    score: 60,
  },
};
console.log(records);

In the example above, rodj, janes, and fredp are the keys, and the values all have the Result type.

• Let's add another record to our records object:

Copy
const records: ResultRecord = {
  ...,
  bobk: {
    firstName: "Bob",
    surname: "Keel",
    score: 65
  }
}

Summary

Generic types allow us to create types that are reusable in many different situations. This is because we can create a specific type for our use case from a generic type by passing our types into it as parameters.

Excellent - we are starting to understand generic types!

In the next lesson, we will begin to create our own generic types.