Basic Literal Types

let direction: 'North'; 

direction = 'North'; 
direction = 'n0r7h'; // Error

Combining with Unions

let direction: 'North' | 'East' | 'South' | 'West'; 

direction = 'North'; // Ok
direction = 'n0r7h'; // Error
direction = 'South'; // Ok

Naming Unions

Example CardinalDirection:

type CardinalDirection = 'North' | 'East' | 'South' | 'West';

let direction: CardinalDirection;

function move(distanceMeters: number, direction: CardinalDirection) {
  console.log(`Moving ${distanceMeters} meters towards ${direction}`);
}

Another example, DiceValue:

type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice() {
  return (Math.floor(Math.random() * 6) + 1) as DiceValue;
}

Transcript

00:00

Here we have a variable called direction of type string. Now the type string can accept any JavaScript string, for example, a dictionary spelling of the word north. However, because it accepts all strings, you can even provide it with a string that is a bit poorly spelt. Now, if you want to ensure that north is always spelt with the correct spelling in your code base, there are a few JavaScript runtime solutions to that problem. For example, you can create a variable pointing to the string not and only use that variable instead of typing the string inconsistently in your code base.

00:33

Now, in addition to all the JavaScript runtime solutions, TypeScript also provides a compiled time solution to this problem in the form of literal types. TypeScript allows you to use any string literal in a type position. For example, the literal string knot. And now the only value that can ever be assigned to this variable is the literal string knot. Any other type or string will result in a compile time error as shown over here. Now, of course, a variable that only accepts just one string literal is not particularly useful and you would most commonly use a

01:09

literal type in a union. For example, we can create a union of all of the cardinal directions that can be used for this direction variable. And now anything that is in this union will be fine and anything else will result in a compile time error. Now, one great thing about literal string types in TypeScript is that they also show up in autocomplete, which can result in a great developer experience. Now just like any other union type in TypeScript, we can extract this union of string literals into a named type alias, for example, called cardinal direction.

01:44

And once you have this type alias, you can start using it in a library of utility functions, specifically your domain. Now, in addition to literal strings, TypeScript also supports literal types for the bullion, true and false, as well as any number value. To demonstrate that, let's look at another example. Now we can represent the value of a traditional dice as the number values 1, 2, 3, 4, 5, 6. And then we can create a utility function that uses math dot random to roll a dice. We use the return value from math dot random

02:18

and scale it from zero to 5.99999 to get the idea and then use math dot flow to limit this value to be zero to five, and then scale it by adding one to B one to six, which matches our dice value type. And we inform TypeScript of this fact by using a type assertion. Now, once we have this type and this utility function in place, we can start using it in our code base. And at any point, if we try to use it improperly, for example, try to compare the result of a roll dice to the number literal seven, which is not a member

02:51

of the dice value, we get a compiled time error from TypeScript, keeping us from shipping bugs to production.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Literal Types

Subscription Required

Basic Literal Types

Combining with Unions

Naming Unions

Transcript

Professional TypeScript Masterclass