Interface In Js : A Programming Tutorial To Create A Simple Interface In Js

What Is Interface

An interface is a set of methods or properties that define the behavior of an object. A class can implement more than one interface, and each implementation will have its own set of methods.

Interfaces can contain fields and methods, but not properties. While implementing an interface, all methods that are defined in the interface must be implemented. You can’t provide your own method name, but you can override it with a different implementation.

What Is Interface in JavaScript

An interface in JavaScript is a set of methods and properties that define the behavior of an object. Interfaces define the contract between an object and the code that uses it.

interface MyInterface {
  fetchData();
}

Interfaces don’t have implementation code — the methods and properties are declared using only their names and return types.

For example, you may define an object called Counter in JavaScript which has two methods: increment() and decrement().

var counter = new Object(); // create instance
counter.increment(); // increase by 1
counter.decrement(); // decrease by 1

Types of Interface in JavaScript

1. Function Interface

A function-based interface defines a callable method using the name “call”. This type is used to define functions and does not support other methods than those defined by its parent class.

2. Object Interface / Class Interface

An object-based interface defines a property like below:

(object) { }
{x();}

3. Prototype Interface

Objects created using new have both a constructor and prototype that implement interface methods from Object.prototype.

This may seem a lot at first, but it’s useful for organizing code.

Interface As Function Type

Function interfaces define the behavior of code that uses the object returned by a function.

An Interface As Function Type (IAFT) is a function that takes arguments and returns an object. It is used for interfaces with only generic types like string or int.

Creating An Interface

• Create a new file called interface.js.
• Create a class named Interface.
• Add this code to the Interface class:

var Interface = {
  constructor() {
    console.log("Hello world!");
  },
  sayHello(name1) {
    console.log("Hello world!", name1);
  }
}

• Import libraries: react, react-dom, and react-native.
• Add this to your index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppRegistry } from 'react-native';
import Interface from './interface';

ReactDOM.render(<Interface />);
AppRegistry.registerComponent('com.example', () => Interface);

Example interface implementation:

interface Foo {
  getNumber(): number;
  getString(): string;
}

class Bar implements Foo {
  getNumber(): number {
    return 42;
  }
  getString(): string {
    return '42';
  }
}

Sample Program To Explain Interface In JS

This program demonstrates interface concepts in JavaScript:

• A class can have multiple interfaces.
• An object does not have any interface by default but can be assigned one using interface keyword.

var obj = {};      // A normal object
var myObj = {};    // Another normal object
var myInterface = {}; // A custom type definition (interface)

interface MyInterface {
  // Interface definition goes here
}

Conclusion

Declaring an interface is simple once you understand the syntax and how it differs from class definitions.

Classes create objects; interfaces define types. Classes can have constructors and methods, but not fields; interfaces can include all of these.

Cognitionteam develops custom applications using JavaScript and React Native. Contact us with your queries!