Creating a contravariant function member in TypeScript?

Question

Creating a contravariant function member in TypeScript?

I am facing a challenge with a class that contains a member which is a function taking an instance of the same class:

class Super {
    public member: (x: Super) => void = function(){}
    use() {const f = this.member; f(this)}
}

However, I need the member to be contravariant so that subclass instances can accept member values that are functions taking that specific subclass, like this:

class Sub extends Super {
    method() {}
}

const sub = new Sub();
sub.member = function(x: Sub) {x.method()};

Yet, TypeScript rightfully raises an error:

Type '(x: Sub) => void' is not assignable to type '(x: Super) => void'.
  Types of parameters 'x' and 'x' are incompatible.
    Property 'method' is missing in type 'Super' but required in type 'Sub'.

Is there a way to declare member such that it allows a covariant parameter type in subclasses?

My attempts to solve this have included:

I know that using method syntax to declare member (member(s: Super) {/* ... */}) would make it bivariant, but this doesn't work when member may be a collection of functions (e.g., my actual code involves a dictionary of such functions:
```
{[name: string]: (/*...*/, s: Super) => /*...*/}
```
).

I tried redeclaring member in Sub with a more restrictive signature:

class Sub extends Super {
    public member: (x: Sub) => void = function(x){x.method()};
    method() {}
}

But TypeScript still rejects it:

Property 'member' in type 'Sub' is not assignable to the same property in base type 
'Super'.
  Type '(x: Sub) => void' is not assignable to type '(x: Super) => void'.
    Types of parameters 'x' and 'x' are incompatible.
      Property 'method' is missing in type 'Super' but required in type 'Sub'.

I am aware that TypeScript now supports the in and out modifiers on templates for co/contravariance, but I am unsure if they apply here and how to modify the declaration of Super accordingly.
I prefer not to disable strictFunctionTypes as it is generally helpful and I don't want users of this library to adjust their settings just to assign to .member on subclass instances.
If all else fails, I can resort to casting the assigned values as (x: Super) => void, but this removes safeguards against incorrect assignments to different subclasses, resulting in runtime failures like this:
```
class Sub1 extends Super {
    method1() {}
}
class Sub2 extends Super {
    method2() {}
}

const sub1 = new Sub1();
sub1.member = function(x: Sub2) {x.method2()} as (x: Super) => void;
```
This code is accepted by TypeScript but fails at runtime.
Browsing through related questions, I came across a similar query involving interfaces rather than subclasses, but the answers provided are not formal yet. Furthermore, the linked snippets seem to rely on explicitly listing all subtypes, which is impractical for situations where there are numerous subclass variations.

typescript subclass covariant contravariant

Answer 1

Answer №1

If you're looking for a way to utilize the polymorphic this type, which essentially functions as an implicit generic type parameter always constrained to the "current" class, then it's like this: within the body of the Super class, the this type represents "some subtype of Super", while inside the Sub class body it represents "some subtype of Sub". When it comes to instances of Super, the this type will be associated with Super, and for Sub instances, it'll be linked with Sub.

In essence, within the class body, this behaves akin to a generic parameter; outside of the class body, it functions as though that parameter has been explicitly assigned with a type argument corresponding to the present object type.

This realization leads to the desired outcome with the sample code provided:

class Super {
    public member: (x: this) => void = function () { } 
    use() { const f = this.member; f(this) }
}

class Sub extends Super {
    method() { }
}

const sub = new Sub();
sub.member = function (x: Sub) { x.method() }; // works fine

Looks solid.

Keep in mind that a similar behavior can be achieved by using generics more directly (employing a recursive, F-bounded constraint reminiscent of Java):

class Super<T extends Super<T>> { 
    public member: (x: T) => void = function () { }
    use(this: T) { const f = this.member; f(this) } 
}

class Sub extends Super<Sub> {
    method() { }
}

const sub = new Sub();
sub.member = function (x: Sub) { x.method() };

Although somewhat less elegant, this approach offers additional flexibility if standalone this types alone don't align with your requirements.

Playground link to code

Answer 2

If you're looking for a way to utilize the polymorphic this type, which essentially functions as an implicit generic type parameter always constrained to the "current" class, then it's like this: within the body of the Super class, the this type represents "some subtype of Super", while inside the Sub class body it represents "some subtype of Sub". When it comes to instances of Super, the this type will be associated with Super, and for Sub instances, it'll be linked with Sub.

In essence, within the class body, this behaves akin to a generic parameter; outside of the class body, it functions as though that parameter has been explicitly assigned with a type argument corresponding to the present object type.

This realization leads to the desired outcome with the sample code provided:

class Super {
    public member: (x: this) => void = function () { } 
    use() { const f = this.member; f(this) }
}

class Sub extends Super {
    method() { }
}

const sub = new Sub();
sub.member = function (x: Sub) { x.method() }; // works fine

Looks solid.

Keep in mind that a similar behavior can be achieved by using generics more directly (employing a recursive, F-bounded constraint reminiscent of Java):

class Super<T extends Super<T>> { 
    public member: (x: T) => void = function () { }
    use(this: T) { const f = this.member; f(this) } 
}

class Sub extends Super<Sub> {
    method() { }
}

const sub = new Sub();
sub.member = function (x: Sub) { x.method() };

Although somewhat less elegant, this approach offers additional flexibility if standalone this types alone don't align with your requirements.

Playground link to code

Creating a contravariant function member in TypeScript?

Answer №1

Similar questions

Managing Events in Angular 2 and Creating Custom Event Handlers

AngularFire2 Firestore Custom Query: retrieve documents based on current date and time.startTime

What is the process for including a new attribute to the Component in the _app.tsx file when using Next.js along with Typescript?

Struggling with the @typescript-eslint/no-var-requires error when trying to include @axe-core/react? Here's a step-by

Check out the attributes of a class

Using Array.push within a promise chain can produce unexpected results

Setting the desired configuration for launching an Aurelia application

Angular 2's ng-required directive is used to specify that

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

My Nextjs project is encountering deployment issues with both Netlify and Heroku

What is the best way to invoke a method in a child component from its parent, before the child component has been rendered?

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)

Unable to locate the module styled-components/native in React Native

Error: Model function not defined as a constructor in TypeScript, mongoose, and express

Unleashing the potential of an endless animation by incorporating pauses between each iteration

A guide to adding a delay in the RxJS retry function

Why does the ReactJS MaterialUI Modal fail to update properly?

`Why TypeScript in React may throw an error when using a setter`

Simple and quickest method for incorporating jQuery into Angular 2/4

How can you prevent the keys from being read-only when mapping onto a type?