TypeScript Tutorial: Interfaces in TypeScript (Chapter 5)

We are now on a ground where, when we look around, we can see the other aspects of the TypeScript language clearly. Basic building blocks of any language are DataTypes and Functions, which we know now with the help of our previous chapters. Here in this chapter we are going to begin our journey for OOPs by looking into the interfaces in TypeScript.

A TypeScript Tutorial for beginners on TypeScript

Interfaces in TypeScript

When we talk about an interface, we think about having a blue print of any object which would like to be defined in the terms presented by that interface. Means, if an interface says that the object must have a property named a, that’s a hard line. No object, can cross that line, if they want to implement that interface.

Other aspect of interface is to set a communication restraints. For example, if a function accepts an interface then it should be called only with the object that complies with that interface, nothing else. Knowing all that, let’s see what interfaces in TypeScript looks like.

A Simple Interface

Here is an interface in its simplest way written in TypeScript.

interface IPerson {
    firstName: string;
    lastName: string;
}

Above code is defining an interface, that prescribes how a person in the system should look like. Whether it is a single property or many, interface can be beneficial in putting a restraint on how the data is moulded and used. Below example shows the basic usage of interfaces in TypeScript, passing it as a parameter to a function.

function getFullName(person: IPerson) {
    return person.firstName + ' ' + person.lastName;
}

let person = { firstName: 'John', lastName: 'Doe', age: 28 }

console.log(getFullName(person));

You are able to pass an object which has both the required properties, so it is possible to call the function with that object.

Properties can be Optional

Unlike other object oriented languages, interfaces in TypeScript can have optional properties. That means, the objects can be created without defining those properties and can still be used without TypeScript complaining about them. Let’s see the above example of a person interface with optional properties.

// interface with optional properties
interface IPerson {
    firstName?: string;
    lastName?: string;
}

// function using the interface
function getFullName(person: IPerson) {
    return person.firstName + ' ' + person.lastName + ' (' + person.age + ')';
}

// person object without the firstName
let person = { lastName: 'Doe', age: 28 }

console.log(getFullName(person));

When you try to compile the above code, it is not going to complain about the missing firstName property, but about the age property. I know this code is eventually going to break, but it is just to demonstrate the pain point of TypeScript compiler.

Interfaces a Blue-Print for Functions

Interfaces in TypeScript can be used to define how a function would look like. Let’s see how, with the below snippet.

// function type interface
interface PersonNameFunc {
    (fristName: string, lastName: string): string;
}

// function variable
let PersonName: PersonNameFunc;

// function defination
PersonName = function (fname: string, lname: string) {
    return fname + ' ' + lname;
}

Interfaces has no role in JavaScript

Stop thinking about JavaScript, when you are learning TypeScript. I know you can’t … me either. I have also seen the compiled output, when I wrote my first interface in TypeScript. I know you are also as surprised as I was, seeing an empty JavaScript file. The truth is, Interfaces doesn’t get compiled into JavaScript in anyway. They just play their part in TypeScript and die over there. I know, I might have shown you this earlier in this posts, but it is never late.

That’s not all!

While there are a of things to learn with Interfaces in TypeScript, I will be stopping here for the scope of this posts. You will be learning a bit more in upcoming chapters. You can continue reading this blog for more posts on similar tutorial and subscribe to get a notification as soon as new posts are available.

I will leave you here with all your studies and learning, while I prepare myself for the next post. In case you have any doubt or queries, please feel free to leave your comments below. I will try to answer all your questions as soon as possible. Your feedback is important for me, so that I can produce more quality posts on exciting topics.

Have a nice day ahead … happy learning

Go to Beginning with TypeScript Tutorial Index page.

Published by

Anant Anand Gupta

Microsoft Technology Professional

Leave a Reply