2

I have created a method map below as per this Stackoverflow question here to help me dynamically call a static method. However, I keep running into the following error:

Avoid referencing unbound methods which may cause unintentional scoping of this

How do I fix this?

  addCourseContentElementMethodMap = {
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
      CourseContentElementAudioService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_BUTTON]:
      CourseContentElementButtonService.addCourseContentElementButton,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_FIDDLE]:
      CourseContentElementCodeService.addCourseContentElementCodeFiddle,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_MARKDOWN]:
      CourseContentElementCodeService.addCourseContentElementCodeMarkdown,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_REPL]:
      CourseContentElementCodeService.addCourseContentElementCodeRepl,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_DOCUMENT]:
      CourseContentElementDocumentService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EDITOR]:
      CourseContentElementEditorService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EMBED_TWEET]:
      CourseContentElementEmbedService.addCourseContentElementEmbedTweet,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EMBED_YOUTUBE]:
      CourseContentElementEmbedService.addCourseContentElementEmbedYoutube,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_IMAGE]:
      CourseContentElementImageService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_QUIZ]:
      CourseContentElementQuizService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_VIDEO]:
      CourseContentElementVideoService.addCourseContentElement,
  };

It's happening on every line of the above:

   55:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   57:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   59:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   61:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   63:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   65:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   67:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   69:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   71:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   73:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   75:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   77:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method

The methods in question are here:

export class CourseContentElementAudioService {
  constructor(private courseContentElementService: CourseContentElementsService) {}
}

An example of the one of the methods:

  static addCourseContentElement(
    courseContents: ICourseContent[],
    selectedCourseContentElementUid: string,
    selectedCourseContentUid: string | undefined
  ): ICourseContent[] {
    return CourseContentElementsService.addCourseContentElement(
      courseContents,
      selectedCourseContentUid,
      {
        uid: selectedCourseContentElementUid,
        url: initialState.courseMedia.audio[0].url,
      },
      CourseContentElementType.AUDIO
    );
  }
xlm
  • 6,854
  • 14
  • 53
  • 55
methuselah
  • 12,766
  • 47
  • 165
  • 315

2 Answers2

2

there are some options available for you:

  1. turn off this lint rule for the whole project

  2. turn off this lint rule for this file/block of code

  3. bind methods, so they are no longer unbound

[CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 CourseContentElementEditorService.addCourseContentElement.bind(CourseContentElementEditorService)
  1. the shortest one time use arrow wrappers to make your functions bound
 [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 (...args) => CourseContentElementEditorService.addCourseContentElement(...args)
Andrei
  • 10,117
  • 13
  • 21
  • Thanks, I tried 3, so my code looks like `[CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]: CourseContentElementAudioService.addCourseContentElement.bind( CourseContentElementAudioService )` – methuselah May 04 '21 at 22:04
  • However, I now get this warning for the above line `Unsafe assignment of an any value`. Why is that? – methuselah May 04 '21 at 22:05
  • hmm, i thought for a moment and I thing I got a better solution. – Andrei May 04 '21 at 22:07
  • Btw when I do `...args`, I get the error message `Expected 3 arguments, but got 0 or more`. Do I need to explicitly state the parameters required? – methuselah May 04 '21 at 22:29
1

Add to the configuration the option

     "@typescript-eslint/unbound-method": ["error", {
      "ignoreStatic": true
    }],

as per https://typescript-eslint.io/rules/unbound-method/

Dmitriy Kachko
  • 2,804
  • 1
  • 19
  • 21