Implementing strict typing in Twitter widget to eliminate issues with accessing members

Question

Implementing strict typing in Twitter widget to eliminate issues with accessing members

I'm struggling to properly type my Twitter widget in TypeScript.

Currently, I am encountering several errors such as:

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)

I want to resolve this by defining an interface for the Twitter widget but I'm uncertain about how to accomplish that.

  loadTwitterWidget(): void {
    this.setLoadingStatus.emit(true);
    this.courseContentElementEmbedTweetService
      .loadScript()
      .pipe(take(1))
      .subscribe(
        // Planning to create an interface here
        (twitter) => {
          (this.tweet.nativeElement as HTMLElement).innerHTML = null;
          // The error arises at this point
          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)
      );
  }

So far, I have attempted the following solution:

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

However, I encounter the error

TS2411: Property 'widgets' of type '{ createTweet: unknown; }' is not assignable to string index type '

.

typescript index-signature

Answer 1

Answer №1

If you need to access the createTweet widget, simply refer to the interface provided below. You can also easily find this information by opening the modules in vscode and searching for createTweet.

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

Answer 2

If you need to access the createTweet widget, simply refer to the interface provided below. You can also easily find this information by opening the modules in vscode and searching for createTweet.

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

Answer 3

Answer №2

If you assign properties to your type that do not match the type of the index signature, an error message will be generated.

The issue arises from the fact that you can access the widgets in two different ways:

object.widgets OR
object["widgets"]

Although these two methods are essentially the same, they would result in differing types within your code.

To resolve this issue, you can define the index signature type as a union type of the property types:

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

This concept is explained in the TypeScript documentation here: https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures

However, I recommend avoiding this approach as it would require type checking or assertions when accessing the indexer. If possible, eliminate the indexer and specify only the available properties.

Answer 4

If you assign properties to your type that do not match the type of the index signature, an error message will be generated.

The issue arises from the fact that you can access the widgets in two different ways:

object.widgets OR
object["widgets"]

Although these two methods are essentially the same, they would result in differing types within your code.

To resolve this issue, you can define the index signature type as a union type of the property types:

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

This concept is explained in the TypeScript documentation here: https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures

However, I recommend avoiding this approach as it would require type checking or assertions when accessing the indexer. If possible, eliminate the indexer and specify only the available properties.

Implementing strict typing in Twitter widget to eliminate issues with accessing members

Answer №1

Answer №2

Similar questions

Customize the form using a custom component in react-hook-form: setting a default value

Utilizing the backtick operator for string interpolation allows for dynamic value insertion

Guide to integrating global interfaces into your Nuxt project

A guide on validating dates in Angular Ionic5 with the help of TypeScript

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration

Function outcome influenced by variable type

Obtaining the current row index in React MUI Data Grid using React-Context

What is the best way to retrieve a value from async/await functions?

Fetching URL from Right Before Logging Out in Angular 2 Application

Working with arrays in Angular 4 to include new items

Is there a way to verify whether a key within an Interface corresponds to a class that is a subclass of a specific Parent

TS2304 TypeScript (TS) Unable to locate the specified name

Inconsistency with Angular 4 instance variables causes ambiguity within a function

Troubleshooting Paths with Angular's NgFor Directive

Setting a default value for a select-option in Angular can be done by initializing the

bespoke arguments for the super function in a subclass of Angular

Using Typescript: invoking static functions within a constructor

Click on a link to open it in the current tab with customized headers

Troubleshooting Primevue Data table styling issues in Vue3

Tips for sending data to CSS in Angular