Exploring TypeScript's Generic Types

Question

Exploring TypeScript's Generic Types

Currently, I am engaged in a frontend project using Angular for my company. Our main task is to retrieve various objects from an API such as Users, Products, etc.

I am focusing on streamlining our services responsible for transferring data between components and the API to avoid redundancy. My goal is to handle different API calls based on the type of my generic.

In essence, it comes down to this:

public foo<TMyType>(){
        if (TMyType === TypeA) {
            //do something
        } else if (TMyType === TypeB) {
            //do something else
        } else {
            throw new Error('Invalid type');
        }
    }

It's important to note that I don't intend to pass the actual object, but just make decisions based on the generic type used when calling the function. I believe there should be a simple solution to this challenge, but I haven't been able to come up with one yet.

Thank you very much

angular typescript

Answer 1

Answer №1

When it comes to runtime type comparison, there are some workarounds you can use:

function checkType<T extends TypeA | TypeB>(input: T) {
    
}

In the code snippet T extends TypeA | TypeB, it indicates that the generic type T must be either TypeA or TypeB.

To differentiate between TypeA and TypeB, you need to identify a distinct property that sets them apart.

For instance:

type TypeA = string
type TypeB = { test: string }

function checkType<T extends TypeA | TypeB>(input: T) {
    if(typeof input === "string") {
         //... input is TypeA
    } else if("test" in input) {
         //... input is TypeB
    }
}

Answer 2

When it comes to runtime type comparison, there are some workarounds you can use:

function checkType<T extends TypeA | TypeB>(input: T) {
    
}

In the code snippet T extends TypeA | TypeB, it indicates that the generic type T must be either TypeA or TypeB.

To differentiate between TypeA and TypeB, you need to identify a distinct property that sets them apart.

For instance:

type TypeA = string
type TypeB = { test: string }

function checkType<T extends TypeA | TypeB>(input: T) {
    if(typeof input === "string") {
         //... input is TypeA
    } else if("test" in input) {
         //... input is TypeB
    }
}

Answer 3

Answer №2

To streamline your code, consider utilizing class inheritance to reduce boilerplate.

class BaseApiService {
     protected baseURL: string = '/data';

     constructor(protected networkClient: NetworkClient) {}

     fetchResource<T>(param: string): Observable<T> {
          return this.networkClient.get<T>(`${this.baseURL}/${param}`)
               .pipe( 
          // additional logic here
               ); 
     }
}

class CustomApiService extends BaseApiService {
    baseURL = '/info';
}

Answer 4

To streamline your code, consider utilizing class inheritance to reduce boilerplate.

class BaseApiService {
     protected baseURL: string = '/data';

     constructor(protected networkClient: NetworkClient) {}

     fetchResource<T>(param: string): Observable<T> {
          return this.networkClient.get<T>(`${this.baseURL}/${param}`)
               .pipe( 
          // additional logic here
               ); 
     }
}

class CustomApiService extends BaseApiService {
    baseURL = '/info';
}

Exploring TypeScript's Generic Types

Answer №1

Answer №2

Similar questions

You must use the 'new' keyword in order to invoke the class constructor

Ensuring that Http requests are carried out upon opening Angular-PWA

Building a MEAN stack application using Angular 5 and implementing passportJS for authentication

Is there a way to turn off props validation for a JSX element that is a function type?

Utilizing nested namespaces for optimal organization and clarity

Angular threw an error saying: "Template parse errors: is not a recognized element"

Leveraging Angular 8's HttpClient to retrieve and display a complex JSON object in an HTML table

Are you ready to put Jest to the test by checking the completion event of

Angular 6 universal website using a .net template is experiencing difficulties with publishing because of the uglifyjs-webpack-plugin

Testing Angular components with Jest's mocking capabilities

Typescript code encountering unexpected behavior with Array.includes()

Error: Attempting to access the 'createClient' property of an undefined object - TypeError

Utilizing a directive in contexts beyond a component

The resource in CosmosDB cannot be found

What is the best way to include the file name and size as query parameters in Node.js?

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime

Using React TypeScript: maximize the efficiency of sending multiple JSON objects to the frontend with the useData hook

Issue with jsPDF: PNG file is either incomplete or corrupted

Is there a way to instruct Alexa/Jovo to incorporate just one render document in its response?

Exploring the Validation of Forms in Angular for Practical Implementations