A literal is a more concrete sub-type of a collective type. What this means is that "Hello World" is a string, but a string is not "Hello World" inside the type system.

There are two sets of literal types available in TypeScript today, strings and numbers, by using literal types you can allow an exact value which a string or number must have.

Literal Narrowing

When you declare a variable via var or let, you are telling the compiler that there is the chance that this variable will change its contents. In contrast, using const to declare a variable will inform TypeScript that this object will never change.

  1. ts
    // We're making a guarantee that this variable
  2. // helloWorld will never change, by using const.
  4. // So, TypeScript sets the type to be "Hello World" not string
  5. const helloWorld = "Hello World";
  7. // On the other hand, a let can change, and so the compiler declares it a string
  8. let hiWorld = "Hi World";

The process of going from an infinite number of potential cases (there are an infinite number of possible string values) to a smaller, finite number of potential case (in helloWorld’s case: 1) is called narrowing.

String Literal Types

In practice string literal types combine nicely with union types, type guards, and type aliases. You can use these features together to get enum-like behavior with strings.

  1. ts
    type Easing = "ease-in" | "ease-out" | "ease-in-out";
  3. class UIElement {
  4.   animate(dx: number, dy: number, easing: Easing) {
  5.     if (easing === "ease-in") {
  6.       // ...
  7.     } else if (easing === "ease-out") {
  8.     } else if (easing === "ease-in-out") {
  9.     } else {
  10.       // It's possible that someone could reach this
  11.       // by ignoring your types though.
  12.     }
  13.   }
  14. }
  16. let button = new UIElement();
  17. button.animate(0, 0, "ease-in");
  18. button.animate(0, 0, "uneasy");
  19. Argument of type '"uneasy"' is not assignable to parameter of type 'Easing'.2345Argument of type '"uneasy"' is not assignable to parameter of type 'Easing'.

You can pass any of the three allowed strings, but any other string will give the error

  1. Argument of type '"uneasy"' is not assignable to parameter of type '"ease-in" | "ease-out" | "ease-in-out"'

String literal types can be used in the same way to distinguish overloads:

  1. ts
    function createElement(tagName: "img"): HTMLImageElement;
  2. function createElement(tagName: "input"): HTMLInputElement;
  3. // ... more overloads ...
  4. function createElement(tagName: string): Element {
  5.   // ... code goes here ...
  6. }

Numeric Literal Types

TypeScript also has numeric literal types, which act the same as the string literals above.

  1. ts
    function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
  2.   return (Math.floor(Math.random() * 5) + 1) as 1 | 2 | 3 | 4 | 5 | 6;
  3. }
  5. const result = rollDice();

A common case for their use is for describing config values:

  1. ts
    interface MapConfig {
  2.   lng: number;
  3.   lat: number;
  4.   tileSize: 8 | 16 | 32;
  5. }
  7. setupMap({ lng: -73.935242, lat: 40.73061, tileSize: 16 });