0

我很难输入我的 Twitter 小部件。

目前，它给我带来了一堆错误，包括：

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 '。

4

2 回答 2

0

您可以像下面那样提供它，或者如果使用 vscode，您可以按 F12 导航到模块并搜索 createTweet，您将在那里获得它的数据类型。

export interface ICourseContentElementEmbedTweetWidget {
  widgets: {
    createTweet: any
  }
  [key: string]: string;
}
于 2021-05-06T19:45:39.007 回答
0

如果您在类型上定义的属性与索引签名的类型不同，您将收到一条错误消息。

原因是您可以通过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

但是我建议不要这样做，因为现在您必须在访问索引器时检查类型或进行类型断言。如果可以，请删除索引器并仅指定可用的属性。

于 2021-05-06T20:26:24.697 回答