Dealing with Unsafe call of an any typed value.(@typescript-eslint/no-unsafe-call)

  angular, eslint, javascript, typescript

I was getting the following ESLint error: Avoid referencing unbound methods which may cause unintentional scoping of this when trying to create a way to dynamically call static methods, which I since fixed as follows thanks to S/O:

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

However, now I get this error, Unsafe call of an any typed value.(@typescript-eslint/no-unsafe-call):

  addElement(
    course: ICourse,
    courseContents: ICourseContent[],
    selectedCourseContentUid: string,
    selectedCourseContentElementUid: string,
    selectedCourseModule: number,
    showAddElementMenu: boolean,
    courseContentElementMethod: CourseContentElementMethodMap
  ): void {
    if (
      this.canCourseContentElementBeAdded(
        courseContentElementMethod,
        courseContents,
        selectedCourseContentUid
      )
    ) {
      this.hideAddElementMenu(showAddElementMenu);
      // ERROR: Unsafe call of an any typed value.(@typescript-eslint/no-unsafe-call)
      courseContents = this.addCourseContentElementMethodMap[courseContentElementMethod](
        courseContents,
        selectedCourseContentElementUid,
        selectedCourseContentUid
      ) as ICourseContent[];
      this.setCourseContent(
        course,
        courseContents,
        selectedCourseContentElementUid,
        selectedCourseModule
      );
    } else {
      this.toastrService.warning(CANNOT_ADD_ELEMENT_MESSAGE, DEFAULT_WARNING_TITLE);
    }
  }

I think that I need to create an interface to strongly type addCourseContentElementMethodMap (maybe call it ICourseContentElementMethodMap), but the question now is, how does an interface for a method map look like?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.