Using Typescript: storing a reference to an interface within a variable

Question

Using Typescript: storing a reference to an interface within a variable

During the implementation of client-side server communication, I encountered a particular challenge: How can I store a reference to an interface in a variable?

I have defined an interface that contains all the details related to a specific RESTful backend call:

export interface IEndpoint {
  path: string,
  method: HTTP_METHOD,
  data: any,
  response: any
}

To create instances of this interface (ISomeInterface and IAnotherInterface are the interfaces I want to reference later), I do the following:

export const GET_TEST: IEndpoint = {
  path: 'api/test',
  method: HTTP_METHOD.GET,
  data: <ISomeInterface>{},
  response: <IAnotherInterface>{}
};

The objective is to use the data and response fields as type references in a Promise (where meta is an instance of IEndpoint):

new Promise<meta.response>((resolve) => {
  ...
});

The issue arises when trying to extract the type/interface previously assigned for the callback type of the Promise (meta.response).

angular typescript ionic-framework interface

Answer 1

Answer №1

In the realm of programming, values and types reside in distinct domains. During compile time, types are eliminated, preventing us from assigning a type to an interface field as attempted.

One approach is to operate within the type domain by incorporating data and response types within the IEndpoint type using generic parameters, which can be extracted when necessary.

export interface IEndpoint<TData, TResponse> {
    path: string,
    method: HTTP_METHOD,
    // included to address TypeScript's handling of unused generics
    _data?: TData,
    _response?: TResponse
}

function makeRequest<T extends IEndpoint<any, any>>(endPoint: T, data: T['_data']): Promise<T['_response']> {
    return null as any// actual call
}

interface ISomeInterface { data: string }
interface IAnotherInterface { result: string }
export const GET_TEST: IEndpoint<ISomeInterface, IAnotherInterface> = {
    path: 'api/test',
    method: "GET"
};
// Receives ISomeInterface and returns a Promise<IAnotherInterface>
makeRequest(GET_TEST, { data: ""}).then(r=> r.result);

As @jeroen-vervaeke highlights, makeRequest could also be simplified without altering its effect:

function makeRequest2<TData, TResponse>(endPoint: IEndpoint<TData, TResponse>, data: TData): Promise<TResponse>{
    return null as any;
}

Answer 2

In the realm of programming, values and types reside in distinct domains. During compile time, types are eliminated, preventing us from assigning a type to an interface field as attempted.

One approach is to operate within the type domain by incorporating data and response types within the IEndpoint type using generic parameters, which can be extracted when necessary.

export interface IEndpoint<TData, TResponse> {
    path: string,
    method: HTTP_METHOD,
    // included to address TypeScript's handling of unused generics
    _data?: TData,
    _response?: TResponse
}

function makeRequest<T extends IEndpoint<any, any>>(endPoint: T, data: T['_data']): Promise<T['_response']> {
    return null as any// actual call
}

interface ISomeInterface { data: string }
interface IAnotherInterface { result: string }
export const GET_TEST: IEndpoint<ISomeInterface, IAnotherInterface> = {
    path: 'api/test',
    method: "GET"
};
// Receives ISomeInterface and returns a Promise<IAnotherInterface>
makeRequest(GET_TEST, { data: ""}).then(r=> r.result);

As @jeroen-vervaeke highlights, makeRequest could also be simplified without altering its effect:

function makeRequest2<TData, TResponse>(endPoint: IEndpoint<TData, TResponse>, data: TData): Promise<TResponse>{
    return null as any;
}

Answer 3

Answer №2

If you're facing difficulties, you can overcome them by using a generic class and associating the method with this particular class:

export class ServiceEndpoint<X, Y> {
  constructor(
    private endpoint: string,
    private action: HTTP_ACTION,
    private input: X,
    private output: Y
  ) {}

  // Implement your new promise method here
}

Answer 4

If you're facing difficulties, you can overcome them by using a generic class and associating the method with this particular class:

export class ServiceEndpoint<X, Y> {
  constructor(
    private endpoint: string,
    private action: HTTP_ACTION,
    private input: X,
    private output: Y
  ) {}

  // Implement your new promise method here
}

Answer 5

Answer №3

When mentioning the meta portion, it is important to note:

new Promise<typeof meta.response>((resolve) => {
  ...
});

Instead of considering it as a type, recognize it as a value. An alternative approach is to utilize typeof:

new Promise<typeof (meta.response)>((resolve) => {
  ...
});

Alternatively, you can directly reference the response type:

new Promise<IAnotherInterface>(resolve => {
  ...
});

In addition, the TypeScript team recommends using as for casting instead of <>:

export const GET_TEST: IEndpoint = {
  path: 'api/test',
  method: HTTP_METHOD.GET,
  data: {} as ISomeInterface,
  response: {} as IAnotherInterface
};

Answer 6

When mentioning the meta portion, it is important to note:

new Promise<typeof meta.response>((resolve) => {
  ...
});

Instead of considering it as a type, recognize it as a value. An alternative approach is to utilize typeof:

new Promise<typeof (meta.response)>((resolve) => {
  ...
});

Alternatively, you can directly reference the response type:

new Promise<IAnotherInterface>(resolve => {
  ...
});

In addition, the TypeScript team recommends using as for casting instead of <>:

export const GET_TEST: IEndpoint = {
  path: 'api/test',
  method: HTTP_METHOD.GET,
  data: {} as ISomeInterface,
  response: {} as IAnotherInterface
};

Using Typescript: storing a reference to an interface within a variable

Answer №1

Answer №2

Answer №3

Similar questions

Angular 6 Time Discrepancy

A guide on implementing nested child routes in AngularJS 2

What is the method of including a null option in a dropdown menu?

Tips for overflowing an image within an Ionic toolbar

How can I make sure that the combobox in my Ionic app is aligned with the text fields in a row?

Fetching JSON data from a Node.js server and displaying it in an Angular 6 application

Angular Observable being triggered repeatedly

Retrieving data from Node.js within an Angular application

Determining the Type<> of a component based on a string in Angular 2

Setting a variable in Angular after a successful AJAX call

A guide on utilizing server-based data grouping and showcasing it in ag-grid within an angular environment

Utilize Lambda Layer to seamlessly share interfaces/types across Lambda Functions

Guide to sending a request to a third-party API using Node.js and Express.js with the 'Authorization: Basic' header

What is the correct way to install @angular-devkit/build-angular in Angular version 13?

Using Typescript with Momentjs: 'String type cannot be assigned to Date type'

Utilizing Nativescript Angular, personalize the styling by separating the SCSS file into two distinct platform-specific SCSS files labeled as .android.scss and .ios

A method for increasing a counter using only an instance of a class or function without accessing its methods or properties in Javascript

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Setting up ESM for Firebase functions: A step-by-step guide

`Obtaining information from a single JSON object`