Horje
Explain the symbol type in TypeScript

In TypeScript, a symbol is a primitive data type. A primitive data type is not an object, possesses no properties or methods, and cannot be altered. The symbol type is similar to other types such as number, string, and boolean. Symbol values are created using the Symbol constructor.

Syntax: Following is the syntax to create a symbol value:

Symbol()  // OR
Symbol("string")

Example 1: Creating symbols

Symbols are created using the symbol constructor directly or by using an optional key in addition. We created a normal symbol and a symbol with an optional key “abc”.

JavaScript
<script>
    // Creating a symbol normally
    let symbol1 = Symbol();
    console.log(symbol1);
    
    // Creating a symbol with an optional key
    let symbol2 = Symbol("abc");
    console.log(symbol2);
</script>

Output:

Symbol()
Symbol(abc)

Example 2: Every symbol is unique

Every symbol is unique. The below code checks if two symbols are the same but false is returned as we compare two symbols.

JavaScript
<script>
    // Creating a symbol
    let symbol1 = Symbol();
    
    // Creating a symbol with an optional key
    let symbol2 = Symbol("abc");
    
    console.log(symbol1 == symbol2);
    console.log(symbol1 === symbol2);
</script>

Output:

false
false

Example 3: Symbols as keys for object properties

As symbols are unique they can be used as keys for object properties. 

JavaScript
<script>
    let symbol1 = Symbol();
    
    let obj1 = {
      symbol1: "secret_code",
    };
    
    console.log(obj1.symbol1);
</script>

Output:

secret_code

Example 4: Symbols used to declare class members or class methods

In this example, a class member is declared by using symbols. The method returns the name of the class. We call the class by creating an object and then access the method. 

JavaScript
<script>
    let symbol1 = Symbol();
    
    class SymbolClass {
      symbol1() {
        return "SymbolClass";
      }
    }
    
    let obj = new SymbolClass();
    let className = obj.symbol1();
    console.log(className);
</script>

Output:

SymbolClass

Example 5: Symbols as unique literals

Generally, symbols are only treated as a type. To treat symbols as unique literals, typescript has a special type called ‘unique symbol’. It is a subtype of Symbol(). The ‘unique symbol’ can be used only with those variables which are declared const or on read-only properties. If we want to reference a unique symbol type variable we need to use the type of operator. 

JavaScript
let symbol1: unique symbol = Symbol();

Output:

'Symbol' only refers to a type, but is being used 
as a value here. Do you need to change your
target library?
Try changing the 'lib' compiler option to es2015 or later.

Unique type variable must be const. The right declaration is shown below:

declare const symbol1: unique symbol;

FAQs – Symbol type in TypeScript

What is a symbol in TypeScript?

A symbol in TypeScript is a primitive data type that is unique and immutable. It is often used to create unique property keys in objects.

How do you create a symbol in TypeScript?

A symbol can be created using the Symbol constructor. Optionally, you can pass a string to the constructor for debugging purposes, but it does not affect the uniqueness of the symbol.

Can symbols be used as keys for object properties?

Yes, symbols can be used as keys for object properties. This ensures that the property keys are unique, avoiding potential naming conflicts.

What is the difference between a regular symbol and a unique symbol in TypeScript?

A regular symbol is unique but is generally treated as a type. A unique symbol is a special subtype of Symbol that can only be used with const declarations or read-only properties, providing a stricter level of uniqueness and type safety.

Why are symbols useful in TypeScript?

Symbols are useful for creating unique keys in objects, avoiding naming collisions, and providing a way to define private-like properties and methods in classes. They also help in meta-programming scenarios, such as defining well-known symbols to customize object behavior.




Reffered: https://www.geeksforgeeks.org


JavaScript

Related
How can JavaScript codes be hidden from old browsers that do not support JavaScript ? How can JavaScript codes be hidden from old browsers that do not support JavaScript ?
What to understand Callback and Callback hell in JavaScript ? What to understand Callback and Callback hell in JavaScript ?
How to Link a Custom React Component to Another Page ? How to Link a Custom React Component to Another Page ?
Explain handler method in ES6 Explain handler method in ES6
How to check null and undefined in TypeScript ? How to check null and undefined in TypeScript ?

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
9