A reference to 'this' is not permissible within a static function in Types

Question

A reference to 'this' is not permissible within a static function in Types

Based on this GitHub issue, it is stated that referencing this in a static context is allowed. However, when using a class structure like the following:

class ZController {
    static async b(req: RequestType, res: Response) {
            await this.a(req);
    }

    static async a(req) {
        console.log('here')
    }
}

An error occurs:

Error: unhandledRejection: Cannot read properties of undefined (reading 'a')
TypeError: Cannot read properties of undefined (reading 'a')
    at b (/usr/src/app/controllers/z.ts:24:33)
    at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/app/node_modules/express/lib/router/route.js:137:13)
    at xxx (/usr/src/app/middlewares/Auth.js:108:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The project is utilizing Typescript version 4.4.2.

This raises the question - why does TypeScript not support this feature as expected?

typescript

Answer 1

Answer №1

In the code, there is an instance where an unbound copy of ZController.b is being passed. This results in this not being associated with ZController when it is called.

type Req = {};
type Res = {}
class ZController {
    static async b(req: Req, res: Res) {
        await this.a(req);
    }

    static async a(req: Req) {
        console.log('here')
    }
}

ZController.b({}, {}); // functions correctly

const zb = ZController.b; // zb does not have a binding to `ZController`

zb({}, {}); // at this point, we encounter an issue as 'this' is undefined

// solution by re-binding back to ZController

const zb2 = ZController.b.bind(ZController);

zb2({}, {}); // works correctly

// alternative by creating a wrapper:

const zb3 = (req: Req, res: Res) => ZController.b(req, res);

zb3({}, {}); // operates smoothly

Alternatively, avoid using this in static methods:

class ZController2 {
    static async b(req: Req, res: Res) {
        await ZController2.a(req);
    }

    static async a(req: Req) {
        console.log('here2')
    }
}

const zb4 = ZController2.b;

zb4({},{}) // executes without issues

Playground Link

Answer 2

In the code, there is an instance where an unbound copy of ZController.b is being passed. This results in this not being associated with ZController when it is called.

type Req = {};
type Res = {}
class ZController {
    static async b(req: Req, res: Res) {
        await this.a(req);
    }

    static async a(req: Req) {
        console.log('here')
    }
}

ZController.b({}, {}); // functions correctly

const zb = ZController.b; // zb does not have a binding to `ZController`

zb({}, {}); // at this point, we encounter an issue as 'this' is undefined

// solution by re-binding back to ZController

const zb2 = ZController.b.bind(ZController);

zb2({}, {}); // works correctly

// alternative by creating a wrapper:

const zb3 = (req: Req, res: Res) => ZController.b(req, res);

zb3({}, {}); // operates smoothly

Alternatively, avoid using this in static methods:

class ZController2 {
    static async b(req: Req, res: Res) {
        await ZController2.a(req);
    }

    static async a(req: Req) {
        console.log('here2')
    }
}

const zb4 = ZController2.b;

zb4({},{}) // executes without issues

Playground Link

A reference to 'this' is not permissible within a static function in Types

Answer №1

Similar questions

The name 'const' is missing or not found

What is the best way to sort through an Array of photo filenames?

Navigation arrows for sliding`

The recursive component is functional exclusively outside of its own scope

The exportAs property for matAutocomplete has not been specified

Restricting number input value in Vue using TypeScript

Having constant problems with ngModel twoway binding. Any suggestions on how to successfully bind to a property in order to update an api link?

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

How come TypeScript tuples support the array.push method?

Struggling to convert a JSON response into an object model using TypeScript in Angular?

Error: TypeScript React SFC encountering issues with children props typing

Having trouble retrieving the Ionic 2 slides instance - getting a result of undefined

What happens when i18next's fallbackLng takes precedence over changeLanguage?

Exploring ways to interact with an API using arrays through interfaces in Angular CLI

Adjust the selected value in real-time using TypeScript

Show a notification pop-up when a observable encounters an error in an IONIC 3 app connected to an ASP.NET

The function cloneElement does not share any properties with the type Partial<P> and Attributes

Issue with InversifyJS @multiInject: receiving an error stating "ServiceIdentifier has an ambiguous match"

What is the best way to retrieve matching values based on IDs from an imported table?

The server response value is not appearing in Angular 5