Learning TypeScript Part 3 – Interfaces


Interfaces are the most flexible way of describing types in TypeScript language. The only job of an interface in TypeScript is to describe a type. While classes and functions will deal with implementation.

To define an interface use the keyword interface.

interface IMovie {
 play(name: string): void;

Roles of Interfaces

  • Describing an Object
  • Describing an Indexable Object
  • Ensuring Class instance Shape

Describing an Object

In Javascript methods like $.ajax takes many arguments, but not necessarily we need to pass all the arguments whenever we use this method. TypeScript support this notion of optional properties to help you use these objects correctly.

interface IMovieSettings {
 name: string;
 length?: number;
 genre?: string;

function playMovie(movie: IMovieSettings) {

If ? symbol is used after some of the member names then it means that the member is optional.

playMovie({ name: 'The Hobbit' }); //OK
playMovie({ name: 'The Hobbit', length: '70 mins' }); // Invalid type for length
playMovie({ length: 70, genre: 'Adventure' }); // Property name is missing

Describing an Indexable Object

Indexable types have an index signature that describes the types we can use to index in to the object, along with corresponding return types when indexing

interface IMovies {
 [index: number]: string;
let movies: IMovies;
movies = ["The Hobbit", "Lord of the Rings", "Deadpool"];

Ensuring Class Instance Shape

Let’s extend the IMovies example above

interface IMovie {
 play(name: string): void;
 language: string;

we can implement this inrface  in a class using implements keyword

class HollywoodMovie implements IMovie {
language = 'English';

play(name: string) {

Now we can use an instance of Hollywoodmovie wherever a IMovie is expected.

var movie: IMovie = new HollywoodMovie();

Similarly we can also use structural typing of TypeScript to implement the IMovie object literal.

var movie = {
play: (name: string) => { console.log(name) },
language: 'Any',

.Net activity logs Agile Azure bad parts C# C#7.0 C# Tuples CSS Framework CSS Styling Customization designpatterns dotnet dotnet-core event hubs frontend development functions getting-started Hype Cycle JavaScript learn Next.js Node node_modules npm objects vs functions performance optimization React Redux rimraf scalability server-side rendering Software Development SOLID State management static site generation Tailwind CSS Tips Tricks Tuple Tuples Umamaheswaran Visual Studio Web Design web development

Daily writing prompt
What sacrifices have you made in life?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: