A literal is a more concrete sub-type of a collective type.\nWhat 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.
\nWhen 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.\nIn contrast, using const to declare a variable will inform TypeScript that this object will never change.
\nts// We're making a guarantee that this variable\n// helloWorld will never change, by using const.\n\n// So, TypeScript sets the type to be \"Hello World\" not string\nconst helloWorld const helloWorld: "Hello World"= \"Hello World\";\n\n// On the other hand, a let can change, and so the compiler declares it a string\nlet hiWorld let hiWorld: string= \"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, finate number of potential case (in helloWorld’s case: 1) is called narrowing.
In practice string literal types combine nicely with union types, type guards, and type aliases.\nYou can use these features together to get enum-like behavior with strings.
\n\ntstype Easing = \"ease-in\" | \"ease-out\" | \"ease-in-out\";\nclass UIElement {\n animate(dx: number, dy: number, easing: Easing) {\n if (easing === \"ease-in\") {\n // ...\n } else if (easing === \"ease-out\") {\n } else if (easing === \"ease-in-out\") {\n } else {\n // error! should not pass null or undefined.\n }\n }\n}\n\nlet button = new UIElement();\nbutton.animate(0, 0, \"ease-in\");\nbutton.animate(0, 0, \"uneasy\"); // error: \"uneasy\" is not allowed here
You can pass any of the three allowed strings, but any other string will give the error
\nArgument of type '\"uneasy\"' is not assignable to parameter of type '\"ease-in\" | \"ease-out\" | \"ease-in-out\"'\nString literal types can be used in the same way to distinguish overloads:
\n\ntsfunction createElement(tagName: \"img\"): HTMLImageElement;\nfunction createElement(tagName: \"input\"): HTMLInputElement;\n// ... more overloads ...\nfunction createElement(tagName: string): Element {\n // ... code goes here ...\n}
TypeScript also has numeric literal types.
\n\ntsfunction rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {\n // ...\n}
These are seldom written explicitly, but they can be useful when narrowing issues and can catch bugs:
\n\ntsfunction foo(x: number) {\n if (x !== 1 || x !== 2) {\n // ~~~~~~~\n // Operator '!==' cannot be applied to types '1' and '2'.\n }\n}
In other words, x must be 1 when it gets compared to 2, meaning that the above check is making an invalid comparison.