使用枚举作为 object 文字的键

Question

I keep getting the following error at the line highlighted below:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ICourseContent'. No index signature with a parameter of type 'string' was found on type 'ICourseContent'.

let elementsRemaining = 0;
[
  CourseContentElementType.AUDIO,
  CourseContentElementType.VIDEO,
  CourseContentElementType.IMAGE,
  CourseContentElementType.DOCUMENT,
  CourseContentElementType.CODE,
  CourseContentElementType.QUIZ,
  CourseContentElementType.EMBED,
].forEach((elementType) => {
  if (
    // Error occurs here
    courseContents[this.getCourseContentIndex(courseContents, selectedCourseContentUid) - 1][
      elementType as string
    ] != null
  ) {
    elementsRemaining++;
  }
});

The object is as follows:

export interface ICourseContent {
  id: number;
  uid?: string;
  text: ICourseContentElementText;
  button: ICourseContentElementButton[];
  audio?: ICourseContentElementMedia;
  embed?: ICourseContentElementEmbed;
  video?: ICourseContentElementMedia;
  image?: ICourseContentElementImage;
  quiz?: ICourseContentElementQuiz;
  code?: ICourseContentElementCode;
  document?: ICourseContentElementDocuments;
  camera?: ICourseContentElementCamera;
}

The enum is as follows:

export enum CourseContentElementType {
  CARD = 'card',
  TEXT = 'text',
  BUTTON = 'button',
  CODE = 'code',
  DOCUMENT = 'document',
  AUDIO = 'audio',
  VIDEO = 'video',
  IMAGE = 'image',
  QUIZ = 'quiz',
  EMBED = 'embed',
}

How do I create the index signature on ICourseContent so that I can access my index with the enum?

I tried the following:

export interface ICourseContent {
  id: number;
  uid?: string;
  [key: string]: string;
  text: ICourseContentElementText;
  button: ICourseContentElementButton[];
  audio?: ICourseContentElementMedia;
  embed?: ICourseContentElementEmbed;
  video?: ICourseContentElementMedia;
  image?: ICourseContentElementImage;
  quiz?: ICourseContentElementQuiz;
  code?: ICourseContentElementCode;
  document?: ICourseContentElementDocuments;
  camera?: ICourseContentElementCamera;
}

but I get the error message:

TS2411: Property 'id' of type 'number' is not assignable to string index type 'string'.

TS2411: Property 'uid' of type 'string | undefined' is not assignable to string index type 'string'.

TS2411: Property 'text' of type 'ICourseContentElementText' is not assignable to string index type 'string'.

TS2411: Property 'button' of type 'ICourseContentElementButton[]' is not assignable to string index type 'string'.

Answer 1

I did this, and the error message went away:

  static isEnoughCourseContentElementsPresent(
    courseContents: ICourseContent[],
    selectedCourseContentUid: string,
    elementsRequired = 1
  ): boolean {
    let elementsRemaining = 0;
    [
      CourseContentElementType.AUDIO,
      CourseContentElementType.VIDEO,
      CourseContentElementType.IMAGE,
      CourseContentElementType.DOCUMENT,
      CourseContentElementType.CODE,
      CourseContentElementType.QUIZ,
      CourseContentElementType.EMBED,
    ].forEach((elementType) => {
      if (
        courseContents[this.getCourseContentIndex(courseContents, selectedCourseContentUid) - 1][
          elementType as
            | CourseContentElementType.AUDIO
            | CourseContentElementType.VIDEO
            | CourseContentElementType.IMAGE
            | CourseContentElementType.DOCUMENT
            | CourseContentElementType.CODE
            | CourseContentElementType.QUIZ
            | CourseContentElementType.EMBED
        ] != null
      ) {
        elementsRemaining++;
      }
    });
    if (
      courseContents[this.getCourseContentIndex(courseContents, selectedCourseContentUid) - 1].text
        .html != null
    ) {
      elementsRemaining++;
    }
    return elementsRemaining === elementsRequired;
  }