Creating personalized data types in Typescript for interface fields

In the code snippet provided, there is a global type definition as follows:

declare global {
    type ResponseData = {
        opcode: number;
        message: string;
        data?: <WILL-CHANGE-ON-EACH-CASE>;
    };
}

The goal is to assign a custom type to the data field for specific return values. For instance:

interface AppInformation {
    NAME: string;
    VERSION: string;
}

// What should be defined as a return type???
export const getAppInfo = (): {...ResponseData, data: AppInformation } => {
    return apiResponse.success(200, CONFIG.APP);
};

What should be defined as the return type for the getAppInfo function? The placeholder in the code gives an idea of the desired outcome.

Thank you in advance,

Answer №1

If you desire the ResponseData to have a customizable type, using a type parameter (for example) T which represents the type of the data property:

type ResponseData<T> = {
  opcode: number;
  message: string;
  data?: T
};

Then, when needed, you can specify the type T to input a specific type like AppInformation:

interface AppInformation {
  NAME: string;
  VERSION: string;
}

const getAppInfo = (): ResponseData<AppInformation> => {
  return {
    opcode: 1, message: "msg", data: {
      NAME: "name", VERSION: "ver"
    }
  }
};

The compiler will recognize that the data (if provided) should be of type AppInformation:

console.log(getAppInfo().data?.NAME.toUpperCase())

Playground link for code

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to implementing "Intl.DateTimeFormat" within a Next.js React component

I have a component that is being rendered on the server, making "Intl.DateTimeFormat" accessible. What is the proper way to use "Intl.DateTimeFormat" in a Next.js React component? The error message I am encountering is: Error: There was an error while hy ...

The use of PartialLinkText is ineffective when utilized in TypeScript

Below is a list of elements: <div class="container-menu" _ngcontent-c13=""> <nav _ngcontent-c13=""> <ul _ngcontent-c13=""> <li _ngcontent-c13=""> <a class="" _ngcontent-c13="" href="/32info" role="link" routerlinkactive="active" ...

Validating dates in TypeScript

Currently, I am studying date handling and have an object that contains both a start and end date. For example: Startdate = "2019-12-05" and Enddate = "2020-05-20" My goal is to establish a condition that first verifies the dates are not empty. After tha ...

Guidelines for establishing authentic headers on a SignalR connection

Can headers be set on the SignalR connection directly? I am aware of setting query string parameters but it is not secure enough for my specific scenario. var conn = ($ as any).hubConnection(); conn.url = URL; conn.qs = { "token": SECRET_KEY }; conn ...

Is it possible to include a conditional type in TypeScript using inlining?

Apologies if this question seems basic to those well-versed in typesystems. I'm puzzled by the difference in outcomes when inlining a conditional statement in TypeScript. For instance, using the Extract conditional leads to different results dependin ...

Here is a method to transform the JSON object into a string as demonstrated below:

Presented below is a JSON object: { "category": "music", "location": { "city": "Braga" }, "date": { "start": { "$gte": "2017-05-01T18:30:00.000Z" }, "end": { "$lt": "2017-05-12T18:30:00.000Z" } } } I am looking t ...

Is there a way to specialize generic methods in Typescript and make them more specific?

I am working with a generic static method in an abstract class: abstract class Base { static find<T extends Base>(options?: Object): Promise<T[]> { return findResults(options); } } Now, I am trying to specify its type in a derived cla ...

Guide on integrating google play services into a nativescript plugin seed?

I am developing a plugin for NativeScript using the recommended nativescript-plugin-seed available at this link. In my plugin, I require access to the Google Location service, but I am facing issues with accessing it. In order to implement the required de ...

Encountering an error with loading in Angular may require a suitable loader

I am currently working on integrating an AWS QuickSight dashboard into an Angular application. For implementation in Angular, I am referring to the following URL: https://github.com/awslabs/amazon-quicksight-embedding-sdk Could someone provide me with sa ...

Transitioning create-react-app from JavaScript to Typescript

A few months ago, I began a React project using create-react-app and now I am interested in transitioning the project from JavaScript to TypeScript. I discovered that there is an option to create a React app with TypeScript by using the flag: --scripts-v ...

Fastify Typescript: dealing with an unidentified body

I'm new to Fastify and I've encountered a problem with accessing values in the body using Typescript. Does anyone have any ideas or suggestions? Thanks! Update: I want to simplify my code and avoid using app.get(...) Here's my code snippet ...

What steps are involved in compiling a library without using Ivy?

After compiling my library, I navigated to dist/my-library and encountered the following error message: ERROR: Attempting to publish a package compiled with Ivy, which is not permissible. Prior to publishing, delete and re-build the package without us ...

Switching between a single checkbox and a group of checkboxes: A step-by-step guide

My goal here is to design a group of checkboxes. The "Search everywhere" option is initially checked by default. If you check any other checkbox, the "Search everywhere" box automatically unchecks. You're allowed to check multiple checkboxes, but once ...

Retrieve a variable in a child component by passing it down from the parent component and triggering it from the parent

I'm struggling to grasp this concept. In my current scenario, I pass two variables to a component like this: <app-selectcomp [plid]="plid" [codeId]="selectedCode" (notify)="getCompFromChild($event)"></app-select ...

What is the best way to utilize project references with multiple tsconfig files?

Let's say I have three separate projects to work on: shared frontend backend In order to use the shared project as a reference in both the frontend and the backend, I need to make a few adjustments. The backend utilizes commonjs modules while the fr ...

Using Typescript with d3 Library in Power BI

Creating d3.axis() or any other d3 object in typescript for a Power BI custom visual and ensuring it displays on the screen - how can this be achieved? ...

Adding comments in TypeScript: A quick guide

Hey there, I'm new to TS and could use some help. Here is the code snippet I have: I want to comment out the logo but adding "//" and '/*' doesn't seem to work. This is what I tried: // <LogoComponent classes={{container: style.log ...

Altering the dimensions of radio buttons

I am a newcomer to using material-ui. I am currently working on incorporating radio buttons in a component and would like to reduce its size. While inspecting it in Chrome, I was able to adjust the width of the svg icon (1em). However, I am unsure how to a ...

What is the best approach to eliminate the 'false' type within a setState function in React?

Hey, I've been working on a project that involves using the useState hook and dealing with state using generics. I encountered an issue where I manipulated a fetched array within a setState function using the filter method, which resulted in returnin ...

Determining the type of a single deconstructed variable from an object

My useForm hook is designed to take an object and return several useful functions back, including that object as a state. However, due to TypeScript limitations, the specific type from the initial object cannot be returned because useForm accepts dynamic o ...