Блог

У меня возникли трудности с вводом виджета в Твиттере.

На данный момент это выбрасывает мне кучу ошибок, в том числе:

 ESLint: Unsafe call of an any typed value.(@typescript-eslint/no-unsafe-call)
ESLint: Unsafe member access .catch on an any value.(@typescript-eslint/no-unsafe-member-access)
ESLint: Unsafe member access .createTweet on an any value.(@typescript-eslint/no-unsafe-member-access)
ESLint: Unsafe member access .finally on an any value.(@typescript-eslint/no-unsafe-member-access)
ESLint: Unsafe member access .then on an any value.(@typescript-eslint/no-unsafe-member-access)
 

Я хотел бы исправить это, создав интерфейс для twi, но я не уверен, как это будет выглядеть.

   loadTwitterWidget(): void {
    this.setLoadingStatus.emit(true);
    this.courseContentElementEmbedTweetService
      .loadScript()
      .pipe(take(1))
      .subscribe(
        // I want to create an interface for this
        (twitter) => {
          (this.tweet.nativeElement as HTMLElement).innerHTML = null;
          // Errors occur here
          twitter['widgets']
            .createTweet(this.courseContentElementEmbed.id, this.tweet.nativeElement, {
              ...this.tweetOptions,
            })
            .then((r) => {
              if (!r) {
                this.setErrorStatus.next();
              } else {
                this.setSuccessStatus.next();
              }
            })
            .catch((error) => this.logger.error(error))
            .finally(() => this.setLoadingStatus.emit(false));
        },
        (error) => this.logger.error(error)
      );
  }
 

До сих пор я пробовал следующее:

 export interface ICourseContentElementEmbedTweetWidget {
  widgets: {
    createTweet: unknown
  }
  [key: string]: string;
}
 

Но я понял ошибку TS2411: Property 'widgets' of type '{ createTweet: unknown; }' is not assignable to string index type ' .

Вы можете предоставить его, как показано ниже, или вы можете перейти к модулям, нажав F12, если используете vscode и выполните поиск createTweet, там вы получите его тип данных.

 export interface ICourseContentElementEmbedTweetWidget {
  widgets: {
    createTweet: any
  }
  [key: string]: string;
}
 

Если вы определяете свойства для своего типа, которые отличаются от типа подписи индекса, вы получите сообщение об ошибке.

Причина в том, что вы можете получить доступ widgets к нему двумя способами:

• object.widgets или
• object["widgets"]

которые являются одинаковыми, но будут иметь разные типы в вашем коде.

Чтобы решить эту проблему, вы можете определить тип подписи индекса как тип объединения типов свойств:

 export interface ICourseContentElementEmbedTweetWidget {
  widgets: {
    createTweet: unknown
  }
  [key: string]: string | { createTweet: unknown };
}
 

Это описано в документах TypeScript здесь: https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures

Однако я бы посоветовал этого не делать, потому что теперь вам придется проверять тип или выполнять утверждение типа при каждом обращении к индексатору. Если вы можете, удалите индексатор и укажите только доступные свойства.