Array and class types interfaces in Typescript

How to create array and class types interfaces in TypeScript?

In previous post, we learnt how to create basic and function type interfaces in TypeScript.

In this post, we shall learn many other types of interfaces in TypeScript.

Array and Class Type Interface in TypeScript

Array Type Inteface

Like previous post on Function type interface, we can also use interfaces to describe Array types. Look at below code snippet.

In the 1^st part of the code snippet, we have declared NameArray that stores string and in the 2^nd part of the code snippet, we have AgeArray that returns number.

The type of index for the array is always number so that we can retrieve array elements with it's index position in the array.

// Array that return string
interface NameArray {
    [index:number]:string
}

// using the interface
var myNames: NameArray;
myNames = ['Sheo', 'Narayan', 'Dutta'];

// ================================
// Array that return number
interface AgeArray {
    [index:number]:number
}
var myAges: AgeArray;
myAges =[2, 4, 6];
alert(myAges[0]);

Compiling above TypeScript code generates following JavaScript code.

// using the interface
var myNames;
myNames = ['Sheo', 'Narayan', 'Dutta'];
alert(myNames);

var myAges;
myAges = [2, 4, 6];
alert(myAges[0]);

Class Type Interface

In other programing languages (C# or Java), interface enforces that a class meets a contract. TypeScript also has that ability.

In below code snippet, we have declared IPerson interface with firstName, lastName as property and FullName as method/function.

This interface is being implemented by Employee class using implements keyword. Once we have implemented this interface, we must declare those properties in the class and implement those methods in the class, like we have done below. If we do not implement properties and methods, it throws error at the compile time.

Note that we have also declared a constructor in the class. So when we instantiate this class, we must pass necessary parameters otherwise we will get error at compile time.

// defining interface for class
interface IPerson {
    firstName: string;
    lastName: string;
    FullName();
    GetMonth(d: Date);
}

// implementing the interface
class Employee implements IPerson {
    firstName: string;
    lastName: string;
    FullName() {
        return this.firstName + ' ' + this.lastName;
    }

    GetMonth(date: Date) {
        return date.getMonth();
    }

    constructor(f: string, l: string) {
        this.firstName = f;
        this.lastName = l;
    }
}

// using the interface directly
var myPerson = <IPerson>{};
myPerson.firstName = 'Sheo';
myPerson.lastName = 'Narayan';
alert(JSON.stringify(myPerson));

// using the class that implements interface
var myEmployee = new Employee('Sheo', 'Narayan');
var fullName = myEmployee.FullName();
var monthName = myEmployee.GetMonth(new Date());
alert(fullName + ' month name: ' + monthName);

Compiling above code gives following JavaScript output

// implementing the interface
var Employee = (function () {
    function Employee(f, l) {
        this.firstName = f;
        this.lastName = l;
    }
    Employee.prototype.FullName = function () {
        return this.firstName + ' ' + this.lastName;
    };
    Employee.prototype.GetMonth = function (date) {
        return date.getMonth();
    };
    return Employee;
})();

// using the interface
var myPerson = {};
myPerson.firstName = 'Sheo';
myPerson.lastName = 'Narayan';
alert(myPerson.GetMonth(new Date()));
alert(JSON.stringify(myPerson));

// using the class that implements interface
var myEmployee = new Employee('Sheo', 'Narayan');

// var myEmployee = new Employee();
var fullName = myEmployee.FullName();
var monthName = myEmployee.GetMonth(new Date());
alert(fullName + ' month name: ' + monthName);