Navigating the "this" scope within a callback function while in strict mode

Having some trouble with error TS2683 when using webix(5.4.0) + typescript(3.1.1) in strict mode.

($$('DATE') as webix.ui.datepicker).attachEvent('onChange', function() {
      let val:any = this.getValue() // or let val = ... without any
      // this:this??? () = > not suit for me, btw
      ...
}

The error message reads:

'this' implicity has type 'any' because it doesn't have a type annotation.

After checking How to access the correct `this` inside a callback? I realized that most solutions focus on outer this handling, but I need guidance on declaring inner this type. Any suggestions on how to proceed?

typescriptstrictwebix

Answer №1

To inform the compiler about the type of this, you should include a type annotation.

($$('DATE') as webix.ui.datepicker).attachEvent('onChange', function(this:webix.ui.datepicker) {
    let val:any = this.getValue()    
});

It would have been ideal if the attachEvent method had explicitly stated the type of this in the callback type, but since it did not, you must specify it manually.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortless code formatting with VS Code for TypeScript and JavaScript

Does anyone know of any extensions or JSON settings that can help me format my code like this: if(true) { } else { } Instead of like this: if(true){ } else { } ...

javascripttypescriptvisual-studio-codecode-formatting

Setting button height dynamically in React Native

I've implemented a button using React Native Elements in my layout. Here's the code snippet: <Button title="Login" buttonStyle={{ backgroundColor: Colour.green }} containerStyle={{ ...

cssreactjstypescriptreact-nativeflexbox

invoke a specified function at runtime

I recently came across a useful library called https://github.com/ivanhofer/typesafe-i18n This library has the capability to generate strongly typed translation data and functions, as illustrated below. (the examples provided are simplified for clarity) e ...

typescripttypescript-generics

How to efficiently display nested object data using Angular Keyvalue pipe

I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric. While attempting to loop through ...

angulartypescriptobservableasync-pipe

What kind of output should a Server Side Component generate?

Recently, I decided to incorporate the NextPage type from Next.js into my component writing routine after hearing it's a beneficial practice. However, I discovered that it only functions properly with client-side components. When attempting to utilize ...

javascriptreactjstypescriptnext.js

validating schemas with yup - checking tuples and alternative data structures

I searched through yup's documentation but couldn't find any information on validating tuple arrays and alternative objects. Can someone provide guidance on how to validate an object with these specific properties using yup? interface Example { ...

javascriptnode.jstypescriptvalidationyup

How do you go about making a prop optional in Typescript based on a generic type?

In my app, I have a specific type with optional props based on a generic type: type MyCustomType<R extends Record<string, string> | undefined, A extends string[] | undefined> = { record: R, array: A } There is a function that directly uses ...

typescripttypescript-generics

Troubleshooting a NextJS Middleware Issue: Retrieving a Blank Screen After Token Verification

I'm currently developing a Spotify Clone using its API and utilizing Next JS Middleware to enforce redirect conditions. The purpose of these conditions is to verify if the user has a token; if not, they should be redirected to the login page. For som ...

typescriptnext.jsmiddleware

React's Redux persist is causing a duplication of requests being sent

I am currently utilizing redux-persist along with Redux Toolkit. I have observed a peculiar behavior where, upon changing the slice (RTK), a request is sent to the server. When using redux-persist without a persister, only one request is made as expected. ...

typescriptreact-reduxredux-sagaredux-toolkitredux-persist

Converting literal types within simulated JSON data

I'm currently working with a JSON object that looks like this: { "elements": [ { "type": "abstract" }, { "type": "machine" }, { "type": "user" ...

javascriptjsontypescripttypes

Why am I encountering difficulties with my property injection, as it is not injecting anything other than undefined

In my current TypeScript project utilizing inversify, I have set up a logger in my TYPES as TYPES.ILoggger. When I access the logger directly from my container, it functions as expected: import {ILogger} from "./interfaces/ILogger"; import {TYPES} from ". ...

typescriptinversifyjs

What is the process of using 'DefaultImports' to import DTOs into TypeScript through ServiceStack?

Whenever I attempt to utilize the command line tools that come with ServiceStack for TypeScript, I continuously encounter issues with the DefaultImports functionality not behaving as anticipated or being particularly beneficial. What is the proper way to m ...

typescriptservicestack

Steps for leveraging pdfMake with live data

Recently delving into Angular, I've been exploring the capabilities of pdfMake. While I successfully incorporated static data, I'm facing challenges when attempting to utilize dynamic data. Any guidance on how to achieve this would be greatly app ...

javascripthtmlangulartypescriptpdfmake

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

javascriptreactjstypescriptreact-ref

Error: _CoalescedStyleScheduler provider not found

I'm currently attempting to follow a tutorial on Angular Material pagination, but I keep encountering this error: ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MatTable -> _CoalescedStyleScheduler]: Static ...

angulartypescriptpagination

The typescript compiler encounters an error when processing code that includes a generator function

Recently, I started learning about TypeScript and came across the concept of generators. In order to experiment with them, I decided to test out the following code snippet: function* infiniteSequence() { var i = 0; while(true) { yield i++ ...

typescript

What is the best way to stop webpack from generating typescript errors for modules that are not being used?

The directory structure is set up as follows: └── src ├── tsconfig.json ├── core │ ├── [...].ts └── ui ├── [...].tsx └── tsconfig.json Within the frontend, I am importing a limi ...

javascripttypescriptwebpackbabel-loader

generate a neatly organized schedule of time slots for presentation

Looking to generate a list of selectable times in 24-hour format for users to choose from. Here's an example: Begin with: 01:00 AM 01:30 AM 02:00 AM ... End with: 11:30 PM 00:00 AM 00:30 AM ... Although I've tried the method below, I'm un ...

angulartypescript

Craft dynamic SVG components using TypeScript

Looking to generate a correctly formatted SVG element using TypeScript: createSVGElement(tag) { return document.createElementNS("http://www.w3.org/2000/svg", tag); } Encountering an issue with tslint: Error message: 'Forbidden http url in str ...

javascriptsvgtypescripttslint

Variable storing an array of strings in TypeScript with React JS

Currently, I am facing an issue with my array object declaration in relation to the declared interface. I am puzzled as to why I am receiving errors for all my properties. Can someone help me understand why I am getting the following errors? [0] (10,5): ...

reactjstypescript