Literal Types and `as const`

27 October 2021

these are my notes from working through the Beginner 1 exercise from TypeScript’s Type | Treat 2021.

Literal Types

TypeScript will create literal types for values where possible. For example, the type of const myString = 'a string' will be a string. Because the variable is a string, and it’s declared with const then its value (and therefore its type) must always be a string.

For arrays, TS will type the array based on the primitive types of the array’s values. e.g. const myArray = ['a', 'b', 'c'] will be typed as string[].

Tuple Types

TS also has Tuple Types, which are:

another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

If I know myArray won’t change, I can define its type like:

type MyArray = ["a", "b", "c"];

const myArray: MyArray = ["a", "b", "c"];

// Now this will error
myArray.push("d");
// Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

TS Playground link

Type Assertions

TS allows you to assert the type of a value, which is useful when you have more information than the TS compiler.

// type 1
const myNum = getIntLessThanTwo() as 1;

`const` Assertions

Building on type assertions, TS introduced const assertions, which act as a shortcut for literally typing a value.

// Type '"hello"'
let x = "hello" as const;

// Type 'readonly [10, 20]'
let y = [10, 20] as const;

// Type '{ readonly text: "hello" }'
let z = { text: "hello" } as const;

Literally typing an array

Pulling together the above info we’ve got three ways to literally type an array.

type MyArray = ["a", "b", "c"];

// type ["a", "b", "c"]
const firstArray: MyArray = ["a", "b", "c"];

// type ["a", "b", "c"]
const secondArray = ["a", "b", "c"] as ["a", "b", "c"];

// type readonly ["a", "b", "c"]
const thirdArray = ["a", "b", "c"] as const;

Note that thirdArray’s type has a readonly modifier. I’m not sure what the practical difference is in this simple example.

To Be Continued

This gets us through the first part half of the answer. To be continued…