Utilizing TypeScript to define and implement interfaces and declarations for powerful customization

Question

Utilizing TypeScript to define and implement interfaces and declarations for powerful customization

As you navigate through the collections typings file, a common pattern emerges:

interface Set<T> {
    add(value: T): this;
    clear(): void;
    delete(value: T): boolean;
    forEach(callbackfn: (value: T, value2: T, set: Set<T>) => void, thisArg?: any): void;
    has(value: T): boolean;
    readonly size: number;
}

interface SetConstructor {
    new (): Set<any>;
    new <T>(values?: T[]): Set<T>;
    readonly prototype: Set<any>;
}
declare var Set: SetConstructor;

This structure includes:

An interface for a collection type
A constructor interface
And a variable declared with declare

The perplexity arises. Could someone provide clarity by answering these questions?

The role of Set<T> appears straightforward, but where is the actual implementation? When calling new Set(), what exactly is being instantiated? In contrast to other languages where interfaces cannot be directly instantiated, only classes implementing them.
What purpose does the set constructor interface serve? Since it's not a class, it doesn't seem to contain executable code.
The use of declare var adds further confusion:
- Declare typically introduces types implemented elsewhere. How can a variable fall into this category? Shouldn't import (or require) fulfill the role of importing external implementations?
- The naming similarity between the Set interface and the declared variable raises questions about potential conflicts. How do they coexist without issue?
- The "combining" aspect between the two interfaces (Set for name and SetConstructor for type) is puzzling—what exactly is its purpose?

typescript

Answer 1

Answer №1

(1) The various lib files detail native objects and classes that already exist within the environment where your script will run (browser/node).
This is why you won't find the implementation for these interfaces.

(2) Any interfaces with a postfix of Constructor denote the static aspects of the classes along with their constructors.

Both Set and SetConstructor together form the Set class, which has a built-in implementation.
While the Set interface describes instances, the SetConstructor represents the class structure.

The different constructor methods described in SetConstructor return instances of Set, so even though you're not instantiating the Set interface directly, you do receive an instance of it.

All the native types are already available in the environment, so there's no need to import string, Set, Map, Promise, etc.
Declaring them using the declare keyword just informs the compiler about their presence at runtime.

(3) It's important to distinguish between values and types.
For instance:

type MyPoint = {
    x: number;
    y: number;
}
const MyPoint: MyPoint = {
    x: 0,
    y: 0
}

In this case, MyPoint serves as both a type (the interface) and a value (the const variable), sharing the same name without any conflicts since a single name isn't used for both a variable and a type.
However, with classes, since they function as both types and values, reusing a class name wouldn't work.

The two interfaces aren't combined; rather:
There exists a variable named Set, with its type being SetConstructor.
When creating a new instance (new Set()), one of the methods within this Set variable is invoked, and the returned value aligns with the type Set (the interface).

Hoping this clarifies things.

Edit

You can liken the Set variable to something like:

const MyClass = class {
    constructor(public x: string) {}
}

In this scenario, the Set interface would be:

interface MyClass {
    x: string;
}

Meanwhile, the SetConstructor is defined as:

interface MyClassConstructor {
    new (str: string): MyClass;
    readonly prototype: MyClass;
}

The key distinction lies in the fact that the implementation of Set is native.

Answer 2

(1) The various lib files detail native objects and classes that already exist within the environment where your script will run (browser/node).
This is why you won't find the implementation for these interfaces.

(2) Any interfaces with a postfix of Constructor denote the static aspects of the classes along with their constructors.

Both Set and SetConstructor together form the Set class, which has a built-in implementation.
While the Set interface describes instances, the SetConstructor represents the class structure.

The different constructor methods described in SetConstructor return instances of Set, so even though you're not instantiating the Set interface directly, you do receive an instance of it.

All the native types are already available in the environment, so there's no need to import string, Set, Map, Promise, etc.
Declaring them using the declare keyword just informs the compiler about their presence at runtime.

(3) It's important to distinguish between values and types.
For instance:

type MyPoint = {
    x: number;
    y: number;
}
const MyPoint: MyPoint = {
    x: 0,
    y: 0
}

In this case, MyPoint serves as both a type (the interface) and a value (the const variable), sharing the same name without any conflicts since a single name isn't used for both a variable and a type.
However, with classes, since they function as both types and values, reusing a class name wouldn't work.

The two interfaces aren't combined; rather:
There exists a variable named Set, with its type being SetConstructor.
When creating a new instance (new Set()), one of the methods within this Set variable is invoked, and the returned value aligns with the type Set (the interface).

Hoping this clarifies things.

Edit

You can liken the Set variable to something like:

const MyClass = class {
    constructor(public x: string) {}
}

In this scenario, the Set interface would be:

interface MyClass {
    x: string;
}

Meanwhile, the SetConstructor is defined as:

interface MyClassConstructor {
    new (str: string): MyClass;
    readonly prototype: MyClass;
}

The key distinction lies in the fact that the implementation of Set is native.

Utilizing TypeScript to define and implement interfaces and declarations for powerful customization

Answer №1

Edit

Similar questions

Developing a React TypeScript event type that caters to both MouseEvent and TouchEvent interfaces

Using Typescript with Angular 2 to Implement Google Sign-In on Websites

What are some effective methods for troubleshooting Vue.js computed properties and templates?

Animating progress bars using React Native

What is the best way to implement custom sorting for API response data in a mat-table?

Creating a variable name dynamically using Typescript

Can someone please point me in the right direction to locate a Typescript project within Visual Studio

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Strange occurrences observed in the functionality of Angular Material Version 16

Struggling to retrieve object values through useContext? Consider implementing useReducer in conjunction with useContext for more efficient state management

Avoiding an event from spreading in Angular

Can TypeScript be implemented within nuxt serverMiddleware?

Struggling with TypeScript and JsObservable? Let us assist you!

React component encounters 'Object may be undefined' error from TypeScript upon importing object

What could be causing the error in Angular Universal Server Side Rendering after deployment on Firebase Hosting?

An unexpected error occurred in the file node_modules/@firebase/firestore/dist/index.d.ts at line 27:28 - Please insert a ']' at this location

Metamorphosed Version.execute SourceText and TypeScript Writer

Can optional properties or defaults have a specific type requirement defined for them?

The constructor in a Typescript Angular controller fails to run

How should I proceed if a TypeScript definition file that I am relying on is lacking a specific definition?