A guide on verifying the static characteristics of a class with an interface

Question

A guide on verifying the static characteristics of a class with an interface

When it comes to converting a constructor function in JavaScript to TypeScript, there are some important considerations to keep in mind.

function C() {
    this.x = 100;
}
C.prototype = {
    constructor: C,
    m() {}
};
C.staticM = function () {};

Here is the TypeScript version of the code:

class C {
    x: number;

    constructor() {
        this.x = 100;
    }

    m() {}
    static staticM() {}
}

In addition to converting the code, interfaces are also added for C():

interface CConstructor {
    new (): CInstance;
    staticM(): void;
}

interface CPrototype {
    constructor: CConstructor;
    m(): void;
}

interface CInstance extends CPrototype {
    x: number;
}

However, when attempting to implement the interfaces with the following code:

class C implements CInstance {...}

An error message occurs:

[ts]
Class 'C' incorrectly implements interface 'CInstance'.
Types of property 'constructor' are incompatible.
    Type 'Function' is not assignable to type 'CConstructor'.
    Property 'staticM' is missing in type 'Function'.

To resolve this issue and check the static properties of a class against an interface (staticM() in this example), further modifications may be necessary.

typescript

Answer 1

Answer №1

Static properties are not permitted in interfaces or abstract classes in Typescript, as discussed in this longstanding problem: https://github.com/Microsoft/TypeScript/issues/14600

It is recommended to avoid relying heavily on static props when working with Typescript, unfortunately :/

Answer 2

Static properties are not permitted in interfaces or abstract classes in Typescript, as discussed in this longstanding problem: https://github.com/Microsoft/TypeScript/issues/14600

It is recommended to avoid relying heavily on static props when working with Typescript, unfortunately :/

Answer 3

Answer №2

You cannot simply have a static implementation of an interface. However, you can ensure that a class satisfies the interface by assigning the class to a typed variable of the interface:

class MyClass {
    value: number;

    constructor() {
        this.value = 100;
    }

    method() {}
    static staticMethod() {}
}

interface ClassConstructor {
    new (): InstanceOfMyClass;
    staticMethod(): void;
}

interface InstanceOfMyClass {
    value: number;
    method(): void;
}

let typeCheck: ClassConstructor = MyClass; //error will occur if implementation is incorrect

Alternatively, you can use a function to create the class and ensure its implementation adheres to the interface:

function createClass(cls: ClassConstructor) {
    return cls;
}


const MyClass = createClass(class {
    value: number;

    constructor() {
        this.value = 100;
    }

    method() { }
    static staticMethod() { }
});

type MyClassInstance = InstanceType<typeof MyClass>;

interface ClassConstructor {
    new(): InstanceOfMyClass;
    staticMethod(): void;
}

interface InstanceOfMyClass {
    value: number;
    method(): void;
}

Answer 4

You cannot simply have a static implementation of an interface. However, you can ensure that a class satisfies the interface by assigning the class to a typed variable of the interface:

class MyClass {
    value: number;

    constructor() {
        this.value = 100;
    }

    method() {}
    static staticMethod() {}
}

interface ClassConstructor {
    new (): InstanceOfMyClass;
    staticMethod(): void;
}

interface InstanceOfMyClass {
    value: number;
    method(): void;
}

let typeCheck: ClassConstructor = MyClass; //error will occur if implementation is incorrect

Alternatively, you can use a function to create the class and ensure its implementation adheres to the interface:

function createClass(cls: ClassConstructor) {
    return cls;
}


const MyClass = createClass(class {
    value: number;

    constructor() {
        this.value = 100;
    }

    method() { }
    static staticMethod() { }
});

type MyClassInstance = InstanceType<typeof MyClass>;

interface ClassConstructor {
    new(): InstanceOfMyClass;
    staticMethod(): void;
}

interface InstanceOfMyClass {
    value: number;
    method(): void;
}

A guide on verifying the static characteristics of a class with an interface

Answer №1

Answer №2

Similar questions

What is the process through which Typescript determines the property types of union types?

What is the process for bringing my API function into a different Typescript file?

Limit the selection of 'pickable' attributes following selections in the picking function (TypeScript)

Include a fresh attribute in the Interface

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

MUI is designed to only manage either onBlur or onKeyPress, but not both simultaneously

Ways to observe redux action flow within a component

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

Interface constructor concept

What's the best way to utilize the tsconfig.json "types" field within a monorepository setting?

The scope of the inferred type parameter in the generic TypeScript function is overly broad

What's the best way to replicate a specific effect across multiple fields using just a single eye button?

Delete the option "x" from the kendo combobox

`Why isn't GetServerSideProps being triggered for a nested page in Next.js when using Typescript?

The 'log' property cannot be found on the type '{ new (): Console; prototype: Console; }' - error code TS2339

Unable to link to 'Attribute A' because it is not recognized as a valid property of 'Subcomponent'

The type does not contain a property named `sort`

In Angular, the data retrieved from the API will only appear on the page once it has been manually

Examining Resolver Functionality within NestJS

Execute multiple observables concurrently, without any delay, for every element within a given list