Skip to content
Related Articles

Related Articles

What are string literal types in TypeScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Jul, 2022
View Discussion
Improve Article
Save Article

The string literal type was added in TypeScript version 1.8. String literal types work well with union types and type aliases in practice. These properties can be combined to give strings enum-like functionality. The string literal type allows you to specify a set of possible string values for a variable, only those string values can be assigned to a variable. TypeScript throws a compile-time error if one tries to assign a value to the variable that isn’t defined by the string literal type. 

Example 1: In this example, we declare a variable and we set the string literal types to be ‘a’ or ‘b’ or ‘c’, pipe(|) parameter is used for this purpose. When ‘a’ is assigned to the variable it doesn’t give an error as ‘a’|’b’|’c’ specifies variable can be either  ‘a’ or ‘b’ or ‘c’. When we assign ‘d’ to variable typescript compiler raises an error.

Javascript




let variable1: "a" | "b" | "c";
 
variable1 = "a";
console.log(variable1); // No error
 
variable1 = "d";
console.log(variable1); // Error

Output: Typescript compiler output:

error TS2322: Type '"d"' is not assignable to type '"a" | "b" | "c"'.
  variable1 = "d";
  ~~~~~~~~~

Output after executing javascript file:

a
d

Example 2: String literal types are case sensitive, so we cannot assign Upper case values to variables where the lower case is required. It’s demonstrated in the below example.

Javascript




let variable1: "a" | "b" | "c";
 
variable1 = "a";
console.log(variable1); // No error
 
variable1 = "A";
console.log(variable1); // Error

Output: Typescript compiler output:

two.ts:5:1 – error TS2820: Type ‘”A”‘ is not assignable to type ‘”a” | “b” | “c”‘. Did you mean ‘”a”‘? variable1 = “A”;

~~~~~~~~~

Example 3: This example shows we can also use functions to set values to variables of string literal types. In this example we need to set the status of the article, status can be set as “in_review” or “publish_queue” or “published” or “awaiting_author”. When ‘in_review’ is passed to the function no error is raised. When ‘delete’ is passed to the function error is raised as the string isn’t included in the status. 

When ‘in_review’ is passed to the function.

Javascript




type status = "in_review" | "publish_queue" | "published" | "awaiting_author";
 
let article_status: string;
 
function setArticleStatus(articleParams: status) {
  article_status = articleParams;
  console.log(article_status);
}
 
// No error status is set to 'in_review'
setArticleStatus("in_review");

Output:

in_review

When ‘delete’ is passed to the function.

Javascript




type status = "in_review" | "publish_queue" | "published" | "awaiting_author";
 
let article_status: string;
 
function setArticleStatus(articleParams: status) {
  article_status = articleParams;
  console.log(article_status);
}
 
// gives error status is set to 'delete'
setArticleStatus("delete");

Output:

error TS2345: Argument of type ‘”delete”‘ is not assignable to parameter of type ‘status’. setArticleStatus(“delete”);

~~~~~~~~

Reference: https://www.typescriptlang.org/docs/handbook/literal-types.html#string-literal-types


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!