TypeScript Literal Types restrict the value of a variable to finite valid values. The latest version of Typescript supports the following Literal Types
- String Literal Types
- Numeric Literal Types
- Boolean Literal Types
- Enum Literal Types
This is very useful feature which restrict the possible values, that you can store in a variable
Table of Content
String Literal Types
The String Literal types accept only pre defined string value.
In the following example engineStatus can have only one value i.e. "Active"
1 2 3 | let engineStatus:"Active"; |
Defining a variable type as 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 who 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 works similar to the string literal types
The following example creates a numeric literal type with 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 other way around
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 |