TL;DR;

Pure JavaScript interface simulation, using the code analysis function of VS Code IntelliSense, can be called a skill. Through the clever combination of object factory and empty function, interface-like code prompts and type checking are implemented, and the null value merging operator (??) is used to simplify the code. In a production environment, build scripts need to be used to remove unnecessary interface code.

The following is an example of a pure JavaScript interface that relies on code analysis in a code editor like VS Code IntelliSense, so it can also be called a trick:

var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);

Here is an example of renaming properties in pure JavaScript:

You create an object factory that initializes the property's code analysis and then replaces the object with a function that returns null. This enables some declaration tricks using the null coalescing operator (??) to keep your code tidy.

It works with arrays too! See the sample code in the Trivia #4 section below.

Discovery process

1. I hope VS Code IntelliSense will prompt for the properties of the createBox() option.

2. Using the default parameters works, but I'd like to put it somewhere else to reduce clutter.

3. Declaring an option outside a function generates an error because its value can be modified by anyone.

4. So it must be an object factory. On line 5, I use backticks instead of parentheses to differentiate between "interface" and function call. Actually, for the sake of this article, I should just use a unique name prefix for variable names, like InterfaceBoxOptions or something like that, ok!

5. Okay, this works, but what if I declare the options as their own variables? How do I tell IntelliSense that an object has properties of an interface?

6. As you may know, if I assign the interface to the object first, IntelliSense assumes the interface property.

7. To my surprise, it still works even after reassigning the variable with a new object.

8. But that’s one more line. Unless it's a line of code, I won't accept it! But can it?

9. The answer is yes, use the null coalescing (??) operator. This is the only way I've found. However, to allocate a new object instead of an interface, I need to somehow make boxOptions return null.

10. Fortunately - or perhaps by design - IntelliSense still prompts for the interface's initial properties even after reassigning them to a function that returns null (line 5).

That’s it, I got a working interface-like setup in pure JavaScript. Probably should have used TypeScript from the start, but I'm in the wild west.

Production environment

For the object declaration, I wrote a build script that replaced interfaceName ?? with an empty string before passing it to Terser, since the compressor won't judge the null value returned by the merge.

Before:

var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);

:

let opt = InterfaceOptions`` ?? {
  name: null,
};

If you don’t delete the interface part, the compressed code may look like this:

let opt = {
  name: null,
};

Trivia

1. Use var

For interfaces, you should use var instead of let or const. This ensures that it is removed when using Terser to compress at the top level.

let opt = (() => null)() ?? {
  name: null,
};

var interface = () => null;

var InterfaceOptions = () => ({
  name: null,
});
InterfaceOptions = interface;

Terser issue #572: Remove variables that are only assigned but never read.

2. Empty interface alternative

If global interface functions are not available, for example if you are writing a library for someone else, you can do this:

// terser 選項
{
  toplevel: true,
  compress: true,
  // ...
}

3. Use interfaces within interfaces

If you haven’t figured it out yet, here’s how:

var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);

Not bad, right?

4. Does it work with arrays?

Yes, but you need to create a separate interface for the array for IntelliSense to work properly. I would say it's pretty confusing.

Example 1:

let opt = InterfaceOptions`` ?? {
  name: null,
};

But it does have benefits. Now you know what to add to the array!

Example 2:

let opt = {
  name: null,
};

5. Can it work recursively?

Like this? No, code analysis breaks for this specific object.

But you can do this:

let opt = (() => null)() ?? {
  name: null,
};

All images have been preserved and used the same format as the original text. Since the image URL cannot be processed directly, I retained the /uploads/... path in the original text. Please make sure these paths are correct for your environment.

The above is the detailed content of Interface in Vanilla JavaScript with VS Code IntelliSense. For more information, please follow other related articles on the PHP Chinese website!