8

A lot of MDN pages describe things as "interfaces" - I was surprised that "interface" wasn't linked to a more explanatory page; it's just described as an "object type" on MDN's web APIs page.

1

1 Answer 1

14

An interface describes the shape of an object. (what properties it has, what type of values those properties contain, etc.) It's not an object itself - it's a more abstract description of what a particular object that implements the interface looks like.

For example, in the HTML standard, the DragEvent interface is described as such:

[Exposed=Window]
interface DragEvent : MouseEvent {
  constructor(DOMString type, optional DragEventInit eventInitDict = {});

  readonly attribute DataTransfer? dataTransfer;
};

dictionary DragEventInit : MouseEventInit {
  DataTransfer? dataTransfer = null;
};

So DragEvent is a type of MouseEvent (which is another interface). It has a constructor function, so you can call new on window.DragEvent. When calling the constructor, you call it with the following arguments:

  • type, which is a DOMString (which is basically just any plain string)
  • An optional argument of type DragEventInit (which the documentation defines), which defaults to the empty object

A DragEvent instance also has a dataTransfer property


Note that the "interface" definition you're linking to is not exactly a JavaScript thing, but more of a thing for web APIs. In other implementations of JavaScript not in browsers (for example, in Node), an interface may mean something different (or nothing at all).

TypeScript, a widely used static type checker for JavaScript, has a very similar notion of interfaces, which describe the shape of a particular object. For example:

// Define the shape of a Foo object
interface Foo {
  prop: string;
}

// Create an object that implements Foo
const someFoo: Foo = {
  prop: 'somevalue'
};

Not the answer you're looking for? Browse other questions tagged or ask your own question.