Literal Types and `as const`
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"'.
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…