Utilize generics to define the data type of the output

Question

Utilize generics to define the data type of the output

Within my Angular service, there is a method that retrieves data from Sync Storage:

 getFromSyncStorage(key: string): Promise<Object | LastErrorType> {
    return new Promise(function (resolve, reject) {
      chrome.storage.sync.get(key, function (v: Object) {
        if (chrome.runtime.lastError) {
          return reject(chrome.runtime.lastError);
        }
        resolve(v && v[key]);
      });
    });
  }

It's important to note that LastErrorType is defined as:

export type LastErrorType = typeof chrome.runtime.lastError;

The challenge arises when predicting the return type based on the key passed. For instance:

getAllRunHistory() {
    return this.cds.getFromSyncStorage('my-special-key');
}

Attempting to specify the return type as an array results in a TypeScript error:

getAllRunHistory() : Promise<Array<any>>{
    return this.cds.getFromSyncStorage('my-special-key');
}

How can generics be utilized to properly type this versatile getFromSyncStorage method?

typescript generics google-chrome-extension typescript2.0 typescript-generics

Answer 1

Answer №1

To achieve this functionality, you can utilize generics. Define a type that represents the mapping from key to value type. For your specific case, it may look something like this:

type DataStorageMap = {
    "special-key": Array<any>,
    [k: string]: Object // all other keys
}

Subsequently, you can define your method with the following signature:

fetchData<K extends keyof DataStorageMap>(
  key: K
): Promise<DataStorageMap[K] | ErrorType> {
   // implementation
}

Keep in mind that you might need to use type assertions within the method's implementation if the compiler cannot confirm that "special-key" corresponds to Array<any>.

When you call the method like this:

retrieveData() {
    return this.database.fetchData('special-key');
}

The return type will be recognized as

Promise<Array<any> | ErrorType>

. This is the desired behavior, unless you are certain that you will never encounter an ErrorType, in which case you can adjust the type definition like so:

type DataStorageMap = {
    "special-key": Array<any>, // no error expected
    [k: string]: Object | ErrorType // potential error scenario
}

fetchData<K extends keyof DataStorageMap>(
  key: K
): Promise<DataStorageMap[K]> {
   // implementation
}

I hope this explanation is helpful to you. Best of luck with your implementation!

Answer 2

To achieve this functionality, you can utilize generics. Define a type that represents the mapping from key to value type. For your specific case, it may look something like this:

type DataStorageMap = {
    "special-key": Array<any>,
    [k: string]: Object // all other keys
}

Subsequently, you can define your method with the following signature:

fetchData<K extends keyof DataStorageMap>(
  key: K
): Promise<DataStorageMap[K] | ErrorType> {
   // implementation
}

Keep in mind that you might need to use type assertions within the method's implementation if the compiler cannot confirm that "special-key" corresponds to Array<any>.

When you call the method like this:

retrieveData() {
    return this.database.fetchData('special-key');
}

The return type will be recognized as

Promise<Array<any> | ErrorType>

. This is the desired behavior, unless you are certain that you will never encounter an ErrorType, in which case you can adjust the type definition like so:

type DataStorageMap = {
    "special-key": Array<any>, // no error expected
    [k: string]: Object | ErrorType // potential error scenario
}

fetchData<K extends keyof DataStorageMap>(
  key: K
): Promise<DataStorageMap[K]> {
   // implementation
}

I hope this explanation is helpful to you. Best of luck with your implementation!

Answer 3

Answer №2

It seems like utilizing generics is the optimal solution. The original method has been modified to the following:

 getFromSyncStorage<T>(key: string): Promise<T> {
    return new Promise(function (resolve, reject) {
      chrome.storage.sync.get(key, function (v) {
        if (chrome.runtime.lastError) {
          return reject(chrome.runtime.lastError);
        }
        resolve(v && v[key]);
      });
    });
  }

Subsequently, we can implement it in this manner:

this.getFromLocalStorage<Array<MyType>>(mds.key).then(...)

However, a drawback is that I am unsure how to specify the error type for the promise, which is unfortunate. I believe it's a limitation within the Promise TypeScript typings :(

Answer 4

It seems like utilizing generics is the optimal solution. The original method has been modified to the following:

 getFromSyncStorage<T>(key: string): Promise<T> {
    return new Promise(function (resolve, reject) {
      chrome.storage.sync.get(key, function (v) {
        if (chrome.runtime.lastError) {
          return reject(chrome.runtime.lastError);
        }
        resolve(v && v[key]);
      });
    });
  }

Subsequently, we can implement it in this manner:

this.getFromLocalStorage<Array<MyType>>(mds.key).then(...)

However, a drawback is that I am unsure how to specify the error type for the promise, which is unfortunate. I believe it's a limitation within the Promise TypeScript typings :(

Utilize generics to define the data type of the output

Answer №1

Answer №2

Similar questions

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

Converting Javascript tools into Typescript

Accelerated repository uses TypeScript to compile a node application with dependencies managed within a shared workspace

What is the best way to create a generic function parameter for a single property of an object?

Using the TypeScript compiler API to determine the location in the generated code of a particular AST node

Is it necessary to conceal Angular navigation controls when the user is not authenticated?

Setting up VSCode to run various tasks

Tips on rotating a material-ui icon

Combining Promises in Typescript to create a single Promise

What is the best way to include a Web Service within an export variable in Angular 2 using TypeScript?

Issue with the declaration of custom types in Typescript

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

The array remains undefined even after being assigned within the subscribe function

Encountering Error 404 while submitting a form on Prisma, Axios, and NestJS

How can I transfer data between methods within Angular?

SonarQube alerting you to "Eliminate this unnecessary casting"

How can you inject the parent component into a directive in Angular 2, but only if it actually exists?

Can we determine the data type of a value within a class instance by utilizing a function to retrieve it?

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly