What are Hybrid Types in TypeScript?

Hybrid types are used by TypeScript to refer to types that combine different things such as objects, functions, arrays etc. In this article, we will learn more about Hybrid Types in TypeScript.

What are Hybrid Types in TypeScript?

In TypeScript, using interfaces or type aliases we can define hybrid types, these declarations may include property signatures (they declare objectlike properties), call signatures (these declare callable behaviour) and index signatures.

Hybrid types are a combination of different type elements, typically including:

• Callable properties: The object can be called as a function.
• Properties: The object can have properties like a regular object.

Example: Object-Function Hybrid Type

In the given example, the Logger interface introduces a mixture of two types of functions: ones that receive messages as arguments and others that do not, in addition, it exposes a property named level and a method called setLevel.

interface Logger {
    (message: string): void;
    level: string;
    setLevel(newLevel: string): void;
}

function createLogger(): Logger {
    let logger = function (message: string) {
        console.log(`[${logger.level}] ${message}`);
    } as Logger;

    logger.level = "info";
    logger.setLevel = function (newLevel: string) {
        logger.level = newLevel;
    };

    return logger;
}

const myLogger = createLogger();
myLogger("Starting the application.");
myLogger.setLevel("debug");
myLogger("Debugging the application.");

Output

[info] Starting the application.
[debug] Debugging the application.

Example: Array-Object Hybrid Type

Let us consider an illustration in which the StringArray interface is a sort of array as well as object meaning it allows using numbers for indexing and has additional properties like length and description.

interface StringArray {
    [index: number]: string;
    length: number;
    description: string;
}

let myStringArray: StringArray = {
    0: "hello",
    1: "world",
    length: 2,
    description: "This array contains strings."
};

console.log(myStringArray[0]);
console.log(myStringArray.description);

Output

hello
This array contains strings.

Use Cases for Hybrid Types

1. Library APIs: Libraries should use hybrid types for creating sound API which is flexible; for example the jQuery objects can be callable with functions but also have methods and properties.
2. Event Emitters: It may have a function to emit events and some methods to add or remove listeners.
3. Configuration Objects: For your configuration objects to be callable (i.e. trigger actions), they may also contain settings properties.
4. Complex Data Structures: Hybrid types are perfect for complex data structures requiring support of dynamic keys similar to objects and numerical indexing just like arrays.

Advantages of Hybrid Types

• Flexibility: It allows one type to play various roles thus simplifying the creation of adaptable APIs.
• Type Safety: TypeScript’s type checking helps capture hybrid types’ errors at compile time.

pankajbind

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• TypeScript
• TypeScript-Questions