Typescript Defining And Using Interfaces Complete Guide

1. What is an Interface in TypeScript?

Answer: An interface in TypeScript is a structure that defines the contract in your application. It is a way to define syntax for objects to follow. Interfaces define properties, methods, and events, which are the members of the interface. Interfaces contain only the declaration of the members and not their implementation.

2. How do you define an Interface in TypeScript?

Answer: You define an interface using the interface keyword followed by the name of the interface and curly braces containing members (properties or methods). Here is an example:

interface Person {
    name: string;
    age: number;
    greet(): void;
}

3. Can an interface have optional properties?

Answer: Yes, an interface can have optional properties. You specify an optional property by adding a question mark (?) after the property name in the interface definition. For example:

interface Person {
    name: string;
    age?: number; // Optional property.
}

4. How are interfaces different from types in TypeScript?

Answer: Both interfaces and types are used to type-check JavaScript/TypeScript code but they have different use cases. Interfaces are primarily used to declare object shapes, whereas types can use more complex constructs such as unions, intersections, primitives, and tuples.

5. Can interfaces be extended like classes?

Answer: Yes, interfaces can extend other interfaces and thus inherit their members. This is done using the extends keyword. Multiple inheritance is possible in TypeScript interfaces. For example:

interface Named {
    name: string;
}

interface Aged {
    age: number;
}

interface Person extends Named, Aged {
    greet(): void;
}

6. How do you implement an interface in a class?

Answer: A TypeScript class can implement an interface using the implements keyword. The class must provide implementations for all the members declared in the interface. Here’s an example:

interface Shape {
    getArea(): number;
}

class Circle implements Shape {
    radius: number;
    constructor(_radius: number) {
        this.radius = _radius;
    }

    getArea(): number {
        return Math.PI * Math.pow(this.radius, 2);
    }
}

7. Can interfaces be merged?

Answer: Yes, in TypeScript, interfaces with the same name are automatically merged. When this happens, the properties of both interfaces are combined into a single interface. If a property has different types in the two interfaces, TypeScript will throw an error.

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

// Box now has properties height, width, and scale.

8. What is a hybrid type in TypeScript with respect to interfaces?

Answer: A hybrid type in TypeScript is a type that combines both object and function interfaces into a single type. This is useful in scenarios where you want to create an object that can also act like a function.

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

let c: Counter;

function getCounter(): Counter {
    let counter = function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

9. How do you define a function type with an interface in TypeScript?

Answer: You can define a function type within an interface by specifying the parameters and return type of the function. Here's an example:

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}

10. Are interfaces closed or open in TypeScript?

Answer: Interfaces in TypeScript are considered open. This means that you can add new members to an existing interface with the same name elsewhere in the program. This facilitates the creation of a single interface that can be built up over time and by different pieces of code in your project.