避免引用未绑定的方法，这可能会在调用静态方法时导致无意的“this”范围错误

Question

我在下面创建了一个方法映射根据这里的 Stackoverflow 问题来帮助我动态调用静态方法。但是，我不断遇到以下错误：

避免引用未绑定的方法，这可能会导致无意的范围界定

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

它发生在上面的每一行：

   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

有问题的方法在这里：

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

其中一种方法的示例：

  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

将选项添加到配置

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

按照https://typescript-eslint.io/rules/unbound-method/

Answer 2

有一些选项可供您选择：

1. 关闭整个项目的此 lint 规则

2. 关闭此文件/代码块的 lint 规则

3. 绑定方法，因此它们不再是未绑定的

[CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 CourseContentElementEditorService.addCourseContentElement.bind(CourseContentElementEditorService)

4. 最短的一次使用箭头包装器来绑定你的函数

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

Answer 3

我在编写测试时得到了这个。看来这是 jest / vitest

toBeCalled

的问题。根据 typescript-eslint 文档：

如果您想在玩笑测试中使用 toBeCalled 和类似的匹配，您可以为您的测试文件禁用此规则，以支持 eslint-plugin-jest 的此规则版本。

我在配置中添加了一条规则以忽略测试文件的此规则：

  {
    files: ["**/*.test.{ts,tsx, js}", "**/*.spec.{ts,tsx, js}"],
    rules: {
      "@typescript-eslint/unbound-method": "off",
    },
  },