Interfaces in TypeScript

Why we need Interfaces

The interplay between Interfaces and Classes is how we will get a strong code re-use in TypeScript.

Interfaces create a new type, describing the property names and value types of an object

So consider we want to make a function that accepts an object and prints the values. This is how we do it if we are not using interfaces

const oldCiviv = {
    name : 'Civic', 
    year : 2020,
    broken : true
}

X const printVehicle = ( vehicle : {
    name : string;
    year : number;
    broken : boolean
}) : void => {

    const {year, name, broken} = vehicle;    
    console.log({name, year, broken});
}

Consider the above example is our implementation. On line X we are specifying the type for object we want to receive in our function. See how we are separating the keys and corresponding data types using a semi colon ;

Eventually if we want to reuse this code, it will become bulky and have to write again and again. So we declare an interface for the same purpose.

Syntax for interface

To declare an interface, we start with the keyword 'interface' filled by the name of interface. The naming convention is same as class declaration.

interface Vehicle{
    name : string;
    year : number;
    broken : boolean;
}

We can name the interface Vehicle, we can name it anything. Now to declare the type of object, we will use a ':' and write the 'Vehicle' or interface name in front of the object argument. This is how it will look like in our code now

Using declared interface in our code

X const printVehicle = (vehicle : Vehicle) : void => {
    const {year, name, broken} = vehicle;
    console.log({name, year, broken});
}

See how we wrote the vehicle : Vehicle in line X

More on declaring interfaces

We can express any different type inside an interface including complex data types and functions.

interface Vehcile{
    name : string;
    year : number;
    broken : boolean;
 X   summary() : string;
}

So the line X says that anything that has to be function summary() should return a type string.

The update oldCivic object will look like this

const oldCiviv = {
    name : 'Civic',
    year : 2020,
    broken : true,
    summary() : string {
        return this.name
    }
}

To make sure an object is of the same type as an interface, TypeScript will iterate through all the properties of the interface and make sure object has the same property with the same type

Implementing an interface in a class

This is an example to show how we will implement an interface. Just follow along as it is for reference and not for in detail explanation

import {Analyzer, OutputTarget} from '../Summary';
X export class WinsAnalysis implements Analyzer, Outputtarget{
}

The Analyser and OutputTarget are two interface that we have already implemented somewhere in a Summary file. Here we are importing them and implementing them in our WinsAnalysis class.

See on line marked X, how we are using the 'implements' keyword and then the name of interfaces separated with commas. TypeScript will make sure we are implementing all the property, functions from both interfaces correctly.

Note: We can add more number of methods that we need but we must implement the methods and properties from the interfaces we are using for the class

Thanks for reading. Will appreciate your feedback