How to Extract Interface Members in TypeScript ?

In TypeScript, you can extract interface members (properties and methods) from a class using several approaches. we are going to learn how to extract interface members in TypeScript.

Below are the approaches used to extract interface members in TypeScript:

Approach 1: Manual Extraction

You manually declare an interface and list the members that you want to extract.

Example: In this example, an interface named MyInterface is manually declared to match the structure of the MyClass. The interface includes a property property1 of type string a method method1 with no parameters and a return type of void. This manual extraction allows for explicit control over the interface members.

Javascript

class MyClass {
    public property1: string = "Hello";
    public method1(): void {
        console.log("Method 1 called");
    }
}

// Manually extract interface
interface MyInterface {
    property1: string;
    method1(): void;
}

const myInstance: MyInterface = new MyClass();

console.log(myInstance.property1); // Output: Hello
myInstance.method1(); // Output: Method 1 called

Output:

Hello
Method 1 called

Approach 2: implements Keyword

You use the implements keyword to create an interface that matches the structure of the class.

Example: Using the implements keyword, the class MyClass explicitly states that it adheres to the MyInterface. The MyInterface interface lists the expected members (property1 and method1). This approach enforces that MyClass must implement all the members declared in MyInterface, providing a clear contract between the class and the interface.

Javascript

class MyClass implements MyInterface {
    public property1: string = "World";
    public method1(): void {
        console.log("Method 1 called");
    }
}

// Extracted interface
interface MyInterface {
    property1: string;
    method1(): void;
}

const myInstance: MyInterface = new MyClass();

console.log(myInstance.property1); // Output: World
myInstance.method1(); // Output: Method 1 called

Output:

World
Method 1 called

Approach 3: type Keyword with typeof

You use the type keyword and the typeof operator to automatically generate an interface based on the class.

Example: In this TypeScript example, we define a Dog class with properties (name and age) and a method (bark). To extract an interface that includes both the static and instance sides of the class, we use InstanceType<typeof Dog>.

Javascript

class Dog {
    constructor(public name: string, public age: number) { }

    bark(): void {
        console.log('Woof! Woof!');
    }
}

// Extracting interface using 
// InstanceType and typeof
type DogInterface = InstanceType<typeof Dog>;

const myDog = new Dog('Buddy', 3);

const myDogTyped: DogInterface = myDog;

// Now you can use the interface members
console.log(myDogTyped.name);
console.log(myDogTyped.age);

Output:

Buddy
3

Approach 4: Using Utility Types

While TypeScript utility types offer powerful transformations on types, classes don’t support structural typing directly. Thus, extracting members from a class using utility types like Pick isn’t feasible. However, you can achieve similar functionality by manually declaring an interface that mirrors the structure of the class.

Example:

JavaScript

// Define an interface that mirrors the structure of MyClass
interface MyInterface {
    property1: string;
    method1(): void;
}

// Implement the interface in MyClass
class MyClass implements MyInterface {
    public property1: string = "Hello";
    public method1(): void {
        console.log("Method 1 called");
    }
}

// Now you can use instances of MyClass wherever MyInterface is expected
const myInstance: MyInterface = new MyClass();

// Access properties and methods through the interface
console.log(myInstance.property1); 
myInstance.method1(); 

Output:

Hello 
Method 1 called