Deducing type from object by utilizing conditional types

In my current .d.ts file, I have defined the following types:

type TransactionRowTypes = {
    // transaction row types
}
type UserDataTypes = {
    // user data types
}
type InventoryRowTypes = {
    // inventory row types
}

type EventClientEvent = {
    event: 'transactions' | 'userchange' | 'inventory';
    time: number;
    payload: Array<any>;
};

I am aiming to assign specific types to the payload property based on the value of EventClientEvent.event. For instance, if EventClientEvent.event is set to transactions, then I want the payload type to be TransactionRowTypes. Similarly, if it's userchange, then the type should be UserDataTypes, and so forth. I'm grappling with implementing conditional typing within an object type and unsure if I'm approaching this correctly. Though I do have a type extractor, I'm uncertain how to utilize it.

type EventName<T extends {event: string}> = T["event"];

If anyone can offer guidance or direct me towards resources that could assist me in resolving this dilemma, I would greatly appreciate it. Thank you.

typescript

Answer №1

When it comes to the issue at hand, conditional types may not be the most effective solution. It appears that what you need is for EventClientEvent to function as a discriminated union structured like this:

type EventClientEvent = {
    event: "transactions";
    time: number;
    payload: TransactionRowTypes[];
} | {
    event: "userchange";
    time: number;
    payload: UserDataTypes[];
} | {
    event: "inventory";
    time: number;
    payload: InventoryRowTypes[];
}

Instead of manually defining this structure, you have the option to create a mapping interface like so:

interface EventMapping {
  transactions: TransactionRowTypes;
  userchange: UserDataTypes;
  inventory: InventoryRowTypes
}

You can then use this interface to generate the EventClientEvent dynamically by using the following code snippet:

type EventClientEvent = { [K in keyof EventMapping]:
  {
    event: K;
    time: number;
    payload: Array<EventMapping[K]>
  }
}[keyof EventMapping]

This approach leverages distributive object type functionality and distributes the internal type over unions in K, which in this scenario represents 

"transactions" | "userchange" | "inventory"
.

To confirm that this setup yields the equivalent type as outlined earlier, you can refer to this Playground link for the provided 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

Issue with typescript in Material-UI Next

I encountered an error while trying to integrate material-ui-next component into a default VS2017 react-redux template. The error message reads as follows: ERROR in [at-loader] ./node_modules/material-ui/BottomNavigation/BottomNavigationButton.d.ts:6:74 T ...

reactjstypescriptasp.net-corereact-reduxmaterial-ui

What could be causing the failure to typecheck the sx prop?

Trying to implement sx prop-based styling in a React project. Looking to utilize the theme using a theme getter. While styles render correctly in the browser, TypeScript raises errors and understanding the type ancestry is proving challenging. Working e ...

reactjstypescriptmaterial-uiemotion

Passing a custom data type from a parent component to a child component in React

I'm currently working on developing a unique abstract table component that utilizes the MatTable component. This abstract table will serve as a child element, and my goal is to pass a custom interface (which functions like a type) from the parent to t ...

angulartypescriptgenericsangular-material

Stop users from inputting dates beyond the current date in Angular 4

Encountering an issue with comparing the date of birth object and today's date object using Moment.js. Even if the entered date is smaller than today's date, it still throws an error. Below is the HTML code: <div class="form-group datepicker ...

javascriptangulartypescriptdate

Is it possible to incorporate an interface with a named function in TypeScript (function declaration)?

Just dipping my toes into Typescript and experimenting with interfaces for my functions: interface StringFunction { (arg1: string): string } I managed to associate this interface with a function by declaring it as a variable: let testFunction: Strin ...

typescript

Restricting Dates in Angular 2 Date Picker

I encountered an issue while attempting to disable specific dates in a date picker. Here is my custom date picker written in TypeScript: import { DateFormatter } from './ng2-bootstrap/date-formatter'; import { DatePickerComponent } from './n ...

angulartypescriptdatedatepicker

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript: type Constructor = new (...args: any) => any; function nameMixin(Base: Constructor) { return class extends ...

javascripttypescriptdynamicsubclassmixins

What are the benefits of pairing Observables with async/await for asynchronous operations?

Utilizing Angular 2 common HTTP that returns an Observable presents a challenge with nested Observable calls causing code complexity: this.serviceA.get().subscribe((res1: any) => { this.serviceB.get(res1).subscribe((res2: any) => { this.se ...

javascriptangulartypescriptpromiseobservable

Utilizing NestJS to efficiently share an end-to-end server across multiple test suites

Currently, I'm utilizing the NestJS test module to simulate the nest app for testing purposes and my goal is to make this app accessible across various test suites. Here is how I have set it up: test |_ helpers |_ testApp.ts |_ e2e |_ u ...

typescriptmocha.jsnestjs

Incorrect form of @types/elasticsearch SearchResponse

Whenever I utilize the ElasticsearchService from @nestjs/elasticsearch, the response does not align with the type SearchResponse from @types/elasticsearch. The issue is that SearchResponse is supposed to be an object, but I actually receive an array contai ...

typescriptelasticsearchhttp-status-codesnestjs

Executing JavaScript code on ionic 2 platform

Recently, I developed a JavaScript algorithm and now I'm looking to implement it in my ionic 2 application. My preference is to avoid the hassle of converting the entire algorithm to typescript. While I managed to run javascript in the index.html page ...

javascripttypescriptionic2

Unable to integrate the leaflet-realtime plugin with Angular5 and Ionic at this time

Having trouble utilizing the leaflet-realtime plugin in my Ionic3 & Angular 5 project When I import import leaflet from 'leaflet'; in this manner Upon attempting to implement real-time functionality with the following code snippet leaflet ...

angulartypescriptionic3leaflet

Angular validation with input binding using if statement

I have developed a reusable component for input fields where I included a Boolean variable called "IsValid" in my typescript file to handle validation messages. Here is the code from my typescript file: export class InputControlsComponent implements OnIn ...

htmlangulartypescriptinputbinding

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3

Currently, I am working on creating a computed property that checks if an item is in the array. The function I have created returns a boolean value and takes one parameter, which is the item to be checked. isSelected: function (item: MediaGalleryItemTypes) ...

javascripttypescriptvue.jsvue-componentvuejs3

How is it possible that TypeScript does not provide a warning when a function is called with a different number of arguments than what is expected?

I am working on a vanilla JavaScript project in VS Code and have set up jsconfig.json. Here is an example of the code I am using: /** * @param {(arg: string) => void} nestedFunction */ function myFunction(nestedFunction) { // Some logic here } myFu ...

javascripttypescriptvisual-studio-codejsdoc

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

I am working with a custom decorator called Param, where I have a console.log that runs once. How can I modify it to return a fresh value of id on each request similar to what is done in nestjs? @Get('/:id') async findUser ( @Param() id: stri ...

javascriptnode.jstypescriptnestjsreflect-metadata

Is it achievable to display keys from an interface using Typescript in node.js?

Using node.js with typescript, I have a query. I defined a type from interfaces key, and I'm wondering if it's feasible to display the key list? interface IFooReal { prop1: string; prop2: number; } type KnownKeys<T> = { [K in ...

node.jstypescript

Can we ensure type safety for the options of method decorators?

Exploring the creation of utility decorators like memoize and rateLimiter, I aim to maximize type safety while minimizing unnecessary boilerplate code. Can decorators maintain full type safety without explicitly defining generics? type GET_FUNCTION_SIGNA ...

typescripttypesdecoratortype-safety

``Is there a way to retrieve the response headers parameter when making an Axios get request?

How can I retrieve the csrf token from the response header of an Axios get request and use it in the header of a post request? Here's my current code: const FileApi= { list: (type:string,period:string): AxiosPromise<FilesL[]> => axios.g ...

reactjstypescriptpromiseaxios

What is the best way to retrieve URL parameters in Node.js using TypeScript?

In the onRequest method provided below, I encounter an error: onRequest(request: Http.IncomingMessage, response: Http.ServerResponse): void { response.writeHead(200, {"Content-Type": "text/plain"}); const tc = new TaxCalculator(); ...

node.jstypescriptexpress