Monday, November 18, 2024
Google search engine
HomeLanguagesJavascriptWhat are string literal types in TypeScript ?

What are string literal types in TypeScript ?

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. 

Syntax:

This syntax defines a variable named variableName with the string literal type ‘stringLiteral’. The string literal type restricts the possible values that variableName can take to the string value ‘stringLiteral’.

let variableName: 'stringLiteral';

For example, let’s say you want to define a variable status that can only have the values ‘pending’, ‘approved’, or ‘rejected’. You can do this using a string literal type, like this:

let status: 'pending' | 'approved' | 'rejected';

Now, if you try to assign any other string value to status, TypeScript will give you an error, In this example, status is a variable with a string literal type that can only have the values ‘pending’, ‘approved’, or ‘rejected’. Any other value will result in a type error.

status = 'review'; // Error: 'review' is not assignable to type 'pending' | 'approved' | 'rejected'

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 a 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, the 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

RELATED ARTICLES

Most Popular

Recent Comments