What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

Question

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

As a newcomer to Typescript, my understanding of the code might be lacking. I am currently working with the Klasa framework, which is built on top of Discord bot framework using Discord.js. The framework recently introduced plugin functionality and there are plenty of examples written in regular ES6...

const { Client, util: { mergeDefault } } = require('klasa');
const DriverStore = require('../lib/structures/DriverStore');
const { OPTIONS } = require('../lib/util/constants');

class MusicClient extends Client {

    constructor(config) {
        super(config);
        this.constructor[Client.plugin].call(this);
    }

    static [Client.plugin]() {
        mergeDefault(OPTIONS, this.options);
        this.drivers = new DriverStore(this);
        this.registerStore(this.drivers);
     }
}

module.exports = MusicClient;

The type of Client.plugin is a Symbol. How does this code function? Is it possible to achieve something similar in TypeScript?

My attempt at translating the code into TypeScript looked like this:

import { KlasaClientOptions, Client } from "klasa"

export class ExtendedClient extends Client {
    public prop: string;
    constructor(options: KlasaClientOptions) {
        super(options);
        // Element implicitly has an 'any' type 'typeof KlasaClient' has no index signature. 
        this.constructor[Client.plugin].call(this);
        // Also trying to use ExtendedClient.plugin.call() gives me 
        // Property 'call' does not exist on type 'symbol'
    }

    static [Client.plugin]() {
        // Property 'prop' does not exist of type 'typeof ExtendedClient'
        this.prop = "somestring";
    }
}

Edit: I fixed the error after I found out static [Client.plugin]() has the context of KlasaClient so I changed it as

import { KlasaClientOptions, Client } from "klasa"

export class ExtendedClient extends Client {
    public prop: string;
    constructor(options: KlasaClientOptions) {
        super(options);
        (this.constructor as any)[Client.plugin].call(this);

    }

    static [Client.plugin](this: ExtendedClient) {
        this.prop = "somestring";
    }

}

This resolved the issues I was facing.

javascript typescript

Answer 1

Answer №1

The code is quite peculiar, and unless there is a specific design constraint necessitating it, it may not be considered best practice.

It involves defining a static method but calling it as if it were an instance method, which is causing issues with TypeScript.

The main components are:

This:
```
static [Client.plugin]() {
    this.registerStore(this.drivers);
}
```
...which defines a static method named Client.plugin (whether it's a Symbol or a string doesn't really matter).
And this in the constructor:
```
this.constructor[Client.plugin].call(this);
```
...calls the method as if it were an instance method. This sets this as an instance of the class during the method call instead of the constructor function, which is unconventional.

In order to satisfy TypeScript, you could consider approaching it like this:

import { KlasaClientOptions, Client } from "klasa";

export class ExtendedClient extends Client {
    public prop: string;
    constructor(options: KlasaClientOptions) {
        super(options);
        (this.constructor as any)[Client.plugin].call(this);
    }

    static [Client.plugin]() {
        const inst = this as ExtendedClient;
        // Now use `inst` instead of `this`
        inst.prop = "somestring";
    }
}

The essential aspects are:

This:
```
(this.constructor as any)[Client.plugin].call(this);
```
...temporarily bypasses TypeScript's type checking using any, which is necessary for handling this unusual structure.
And this:
```
const inst = this as ExtendedClient;
```
...casts this as an ExtendedClient object to tell TypeScript that it should treat this as such instead of the constructor function.

Answer 2

The code is quite peculiar, and unless there is a specific design constraint necessitating it, it may not be considered best practice.

It involves defining a static method but calling it as if it were an instance method, which is causing issues with TypeScript.

The main components are:

This:
```
static [Client.plugin]() {
    this.registerStore(this.drivers);
}
```
...which defines a static method named Client.plugin (whether it's a Symbol or a string doesn't really matter).
And this in the constructor:
```
this.constructor[Client.plugin].call(this);
```
...calls the method as if it were an instance method. This sets this as an instance of the class during the method call instead of the constructor function, which is unconventional.

In order to satisfy TypeScript, you could consider approaching it like this:

import { KlasaClientOptions, Client } from "klasa";

export class ExtendedClient extends Client {
    public prop: string;
    constructor(options: KlasaClientOptions) {
        super(options);
        (this.constructor as any)[Client.plugin].call(this);
    }

    static [Client.plugin]() {
        const inst = this as ExtendedClient;
        // Now use `inst` instead of `this`
        inst.prop = "somestring";
    }
}

The essential aspects are:

This:
```
(this.constructor as any)[Client.plugin].call(this);
```
...temporarily bypasses TypeScript's type checking using any, which is necessary for handling this unusual structure.
And this:
```
const inst = this as ExtendedClient;
```
...casts this as an ExtendedClient object to tell TypeScript that it should treat this as such instead of the constructor function.

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

Answer №1

Similar questions

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

Enhance your MaterialUI Button with a higher order component that accepts a component

Issue with subscribing to nested observables, unable to successfully unsubscribe

How to display percentage value on ReactJS Material UI progress bar

What is the best way to initiate a new animation from the current position?

Vue and Summernote issue: Model content doesn't display in form when loaded from database

What is the best method to extract information from JavaScript tables using Python and Selenium?

The content inside an HTML element and covertly deciphered quotations

Guide on resolving the error "Type 'Emits' does not have any call signatures" in Vue 3 with the combination of script setup and TypeScript

What location is the optimal choice for documenting logs at a debugging level?

Tips for retrieving the value sent via an AJAX $.post request in a PHP file

perform asynchronous calls within a for loop in a synchronous manner

Jasmine has detected an undefined dependency

Tracking mouse movement: calculating mouse coordinates in relation to parent element

PWA JavaScript struggling with GPS geolocation coordinates

"Exploring the world of Skeletal Animation with Three.js

Get a URL from the JSON data returned by the Wikipedia API

Is there a way to customize Material UI theme types and make adjustments to existing types using Typescript?

How to Show a GIF in ASP.NET Core 3.0 When OnPost() is Invoked

Encountering the error message "Cannot GET /" in a NodeJS Express