Explain the symbol type in TypeScript

The Symbol is introduced in the last main revision of JavaScript, ES6. The Symbol is a data type. As we use the number, string, or Boolean to create the variables of different data-type, we can use the symbol type to create the Symbol.

Using the symbol types has many benefits as it provides more features than other data types. In this tutorial, we will learn about the basics of the Symbol and its different uses of the Symbol.

Syntax

Users can follow the syntax below to create a variable of symbol data type.

let test_symbol = Symbol();
let key_symbol = Symbol("key-for-symbol"); 

In the above syntax, we have created the Symbol using the Symbol() constructor. We can also pass the key as a symbol parameter to identify the Symbol.

In TypeScript, we can create multiple symbols that are unique. It means symbols are immutable; even if we create a symbol with the same keys, we can find both symbols are unique.

// Creating two different symbols with the same key.
var first_sym = Symbol("sym");
var second_sym = Symbol("sym");

// we can't compare two symbols as they are immutable
if (first_sym === second_sym) {
}
else {

   // execution flow always executes this block
}

In the above code, users can see that it gives a compilation error as the two symbols are incomparable.

Example 1

In the example below, we have created the symbols and used the description property of symbols to get the value we passed as a parameter of the symbol while creating the symbol.

Also, we have used the toString() method to convert the symbol to a string.

// Creating the symbols
const first_sym = Symbol("sym");
const second_sym = Symbol("sym");

//  getting the description of the symbol
console.log("The description of the first_sym is " + first_sym.description);

// converting symbols to string
console.log("The symbol in the string is " + first_sym.toString());

On compiling, it will generate the same code in JavaScript.

Output

It will produce the following output −

The description of the first_sym is undefined
The symbol in the string is Symbol(sym) 

Example 2: Using the symbol to define the object properties

In the example below, we have created the symbol and defined the object. We used the obj_symbol as a property of the object. Also, we can access it like the object's normal property.

const obj_symbol = Symbol();

// creating the object
let object = {

   // using the obj_symbol as key of object
   [obj_symbol]: "obj value",
};

// accessing the symbol property of the object
console.log(
   "The vlaue of the obj_symbol property in the object is " + object[obj_symbol]
);

On compiling, it will generate the same code in JavaScript.

Output

It will produce the following output −

The vlaue of the obj_symbol property in the object is obj value

Use the Symbol with the switch case statement

As every symbol is unique, we can use it as a case of the switch-case statement. When we use the symbols with the switch case statement, it ensures that every case is unique. If any case doesn’t match with the case passed as a parameter of the switch statement, it goes to the default case.

Syntax

Users can follow the syntax below to use the symbol type with the switch case statement.

switch(symbol) {
   case symbol1: 
      break
   case symbol2: 
      break;
}

In the above syntax, a symbol is passed as a parameter of the switch statement. After that, we used the symbol name followed by the case keyword to create a different case.

Example

In the example below, we have created four different symbols. After that, we defined the print_symbol function, which contains the switch case statement to handle the different cases.

In the switch case statement, we are using the symbol values as a case and executing the code of the particular case.

// different symbols
const symbol1 = Symbol();
const symbol2 = Symbol();
const symbol3 = Symbol();
const symbol4 = Symbol();

function print_symbol(symbol) {

   // creating the switch case statement
   switch (symbol) {
   
      // different cases
      case symbol1:
         console.log("The case is symbol 1.");
         break;
      case symbol2:
         console.log("The case is symbol 2.");
         break;
      case symbol3:
         console.log("The case is symbol 3.");
         debugger;
         break;
      case symbol4:
         console.log("The case is symbol 4.");
         break;
      default:
         console.log("The case is default.");
   }
}

// calling the function
print_symbol(symbol2);
print_symbol(symbol4);

On compiling, it will generate the same code in JavaScript.

Output

It will produce the following output −

The case is symbol 2.
The case is symbol 4.

Unique Symbol

In TypeScript, Symbol is a primitive data type. So, we need to use it as a type only, but we can also use it as literals using the ‘unique symbol’. The symbol includes the unique symbol, which means the unique symbol is a subtype of the symbol.

We can use the unique symbol with only const variables and readonly properties. If we want to reference the specific symbol type to another variable, we can use the ‘typeof’ operator.

Syntax

Users can follow the syntax below to use the symbol as a literal using the unique symbol.

const test_symbol: unique symbol = Symbol();
let symbol1: typeof test_symbol = test_symbol;
class C {
   static readonly symb: unique symbol = Symbol("unique symbol");
}

Example

In the example below, we have declared the test_symbol of the type symbol and used the unique symbol keyword to use the symbol as a type literal. Also, users can observe how we can use the typeof operator to use the symbol as a type literal of the variables declared with the let and var keywords.

Also, we have used the unique symbol keyword to define the type of the readonly static class’s member.

// here, we used the unique symbol to define the type of the sym1.
const test_symbol: unique symbol = Symbol();

// we can't reference the unique symbol to the let type of variable
// let sym2: unique symbol = Symbol();

// to reference the symbol type to the variables declared with the let keyword, using the typeof operator.
let symbol1: typeof test_symbol = test_symbol;
console.log("The value of symbol1 is " + typeof test_symbol);

// referencing the unique symbol to the static class property
class C {
   static readonly symb: unique symbol = Symbol("unique symbol");
}

On compiling, it will generate the following JavaScript code −

// here, we used the unique symbol to define the type of the sym1.
var test_symbol = Symbol();

// we can't reference the unique symbol to the let type of variable

// let sym2: unique symbol = Symbol();

// to reference the symbol type to the variables declared with the let keyword, using the typeof operator.
var symbol1 = test_symbol;
console.log("The value of symbol1 is " + typeof test_symbol);

// referencing the unique symbol to the static class property
var C = /** @class */ (function () {
   function C() {
   }
   C.symb = Symbol("unique symbol");
   return C;
}());

Output

The above code will produce the following output −

The value of symbol1 is symbol

We have learned the basics of the symbol type in this tutorial. Also, we have learned to use the ‘unique symbol’ keyword to use the symbol type as a type literal. Also, we learned to use the typeof operator to get the symbol type of another variable and use it as a type of another variable.