[Typescript] Introduction to Generics in Typescript

If Typescript is the first language in which you've encountered generics, the concept can be quite difficult to understand. We skip the lecture in this lesson and dive straight into a real-world use-case that is guaranteed to help you understand the need for generics.

 

Let's say we have this part of code:

class Emitter{
    emit(event){
        console.log(event);
    }
}

const emitter = new Emitter();

emitter.emit({path: '/home', directory: true});

The object we want to pass in is {path: "", directory: ""}. But it may happen that we have some typo error, so we want IDE helps us to detect that.

 

TO do this, we need interface:

class Emitter<MyEvent>{ 
    emit(event: MyEvent){
        console.log(event);
    }
}

interface MyEvent{
    path: string
    directory: boolean
}


const emitter = new Emitter<MyEvent>();

emitter.emit({path: '/home', directory: true});

So it defines that the emit() function's param should have 'directory' and 'path' attrs. If not, it will report error.

 

So far so good, but what happen if we have anyother function inside the class, such as:

class Emitter<T>{ // T: allow everything come in
    emit(event: MyEvent){
        console.log(event);
    }

    yield(value: MyValue){
        console.log(value);
    }
}

interface MyEvent{
    path: string
    directory: boolean
}

interface MyValue{
    message: string
}

const emitter = new Emitter<MyEvent>();
const yielder = new Emitter<MyValue>();

emitter.emit({path: '/home', directory: true});
yielder.yield({message: "Hello World!"});

yield() take objet with message prop, and the interface defined as MyValue. So allows Emitter class accept multi interfaces, we can use <T>, then for each function, we add the interface for that.