Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods

Question

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
    );
  }

Answer 1

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)

4. the shortest one time use arrow wrappers to make your functions bound

 [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 (...args) => CourseContentElementEditorService.addCourseContentElement(...args)