TypeScript Literal Types restrict the value of a variable to finite valid values. This is in contrast to the variable which allows you to change value (except for TypeScript Constants). The latest version of Typescript supports the String Literal Types, Numeric Literal Types, Boolean Literal Types & Enum Literal Types
Table of Contents
What is a Literal
A literal is a notation for representing a fixed value in the source code. For Example, 1 is literal, because it represents the number 1. hello is literal because it represents the string “hello”. Similarly null is literal because it represents the value null.
This is exactly opposite to TypeScript variables or TypeScript constants, which can take any value.
TypeScript also allows us to define our own literal types. The latest version of Typescript supports the following Literal Types
- String Literal Types
- Numeric Literal Types
- Boolean Literal Types
- Enum Literal Types
This is a very useful feature that restricts the possible values, that you can store in a variable
String Literal Types
The String Literal types accept only pre-defined string values.
The following example engineStatus can have only one value i.e. "Active"
1 2 3 | let engineStatus:"Active"; |
Defining a variable type as a string literal does not initialize its value. The TypeScript initializes the variable as Undefined.
1 2 3 4 5 | let engineStatus:"Active"; console.log(typeof engineStatus) //Undefined console.log(engineStatus) //Undefined |
We can only assign the value "Active" to it.
1 2 3 4 5 6 7 8 | let engineStatus:"Active"; engineStatus="Active" console.log(typeof engineStatus) //String console.log(engineStatus) //Active engineStatus="active" //Type '"active"' is not assignable to type '"Active"' |
Union Types
The power of literal types comes, when you create the Union Types using string literal types
The engineMode variable can now only have two literal types"started"& "stopped". Any other values including the values that only change in a case like "Started" is also not allowed.
1 2 3 4 5 6 7 8 | let engineMode : "started" | "stopped" engineMode="started"; //OK engineMode='stopped'; //OK engineMode="Started" //error |
Using literal types stops the users from mistyping the value of a variable. Also, it gives you IntelliSense help as shown below.
Numeric Literal Types
The numeric literal types work similarly to the string literal types
The following example creates a numeric literal type with a value 1. You can only assign 1 to it. Assigning any other value other that 1 results in a compile error.
1 2 3 4 5 6 7 | let Active:1 Active=1; //OK Active=0; //Type '0' is not assignable to type '1' |
Use union types to restrict the values that a variable can take.
1 2 3 4 5 6 7 8 9 10 11 12 13 | function getSize(size: 35 | 38 | 41 | 44 | 47 | 50):string { if(size==35) { return "S"; } else if (size==38) { return "M"; } else if (size==41) { return "L"; } else if (size==44) { return "XL"; } else if (size==47) { return "XXL"; } else if (size==50) { return "XXXL"; } } getSize(35); //OK getSize(36); //Argument of type '36' is not assignable to parameter of type '35 | 38 | 41 | 44 | 47 | 50' |
Perform Numerical operations.
1 2 3 4 5 6 | let val:10|11|12|13|14|15; val=10; console.log(10+val) |
You can assign it to a number, but not vice versa
1 2 3 4 5 6 7 | let val1:10|11|12|13|14|15=10; let val2=10; val2=val1; //ok val1=val2 //Type 'number' is not assignable to type '10 | 11 | 12 | 13 | 14 | 15' |
Boolean Literal Types
Boolean Literal Types works in a similar way.
1 2 3 4 5 6 | let b:true; b=true; //OK b=false; //Type 'false' is not assignable to type 'true' |
Enum Literal Types
You can also define Enum as literal type.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | enum Dir1 { Up = 1, Down, } enum Dir2 { Left=3, Right, } let a:Dir1.Up|Dir2.Left a=Dir1.Up //ok a=Dir1.Down //Type 'Dir1.Down' is not assignable to type 'Dir1.Up | Dir2.Left' |
Literal Types
The following examples uses the union of string, number & boolean literal types as the argument to engine function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function engine(value: "start" |"stop" | 1 |0 |true|false) { if (value=="start" || value==true || value==1) { //Start the Engine console.log("Start the Engine") } if (value=="stop" || value==false || value==0) { //Stop the Engine console.log("Stop the Engine") } } engine("start") //OK engine(true) //OK engine(1) //OK engine("stop") //OK engine(false) //OK engine(0) //OK |