Discover the specified attribute within different object categories

Dealing with an array of modifications that need to be applied to a specific object:

interface CustomMods {
    merge?: MergeModifications,
    offset?: OffsetModifications,
    split?: SplitModifications,
    .....
}

type ModificationsArray = CustomMods[];

Struggling to ensure type safety in this scenario.

const getModification = <V extends CustomMods, K extends keyof V>(mod: V): { modType: K, modSettings: V[K]} => {
  const match = Object.keys(mod).find((k) => isNotNullOrUndefined(mod[k as K]));

  if (!match){
    throw new Error('ERROR')
  }

  return {
    modType: match as K,
    modSettings: mod[match as K]
  }
}


const {modType, modSettings} = getModification(mod)

switch(modType) {
    case 'merge': 
    // Expected modSettings type to be MergeModsettings here 
    // but it's currently 'MergeModSettings | OffsetModSettings | SplitModSettings'.
}

Answer №1

My recommendation is:

interface MergeMod {
    modType: "merge"
    merge: MergeModSettings
}
interface OffsetMod {
    modType: "offset"
    offset: OffsetModSettings
}
interface SplitMod {
    modType: "split"
    split: SplitModSettings
}
type Mod = MergeMod | OffsetMod | SplitMod

const m: Mod = // ...

switch (m.modType) {
    case "merge":
    // Here 'm' is of type 'MergeMod'
}

Note: When you destructure a variable, the destructured variable types become unlinked. It's not possible to infer the type of one (modType) from another (modSettings) just by testing it.

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

Differences between Typescript and Node versions

Is there a connection between the version of Typescript and the version of Node since Typescript is a global npm module? In other words, is there a minimum Node version required to run a specific version of Typescript. ...

Why do we need the TypeScript ts-jest pre-processor?

I am relatively new to TypeScript and JavaScript, so I have a question regarding the necessity of preprocessing modules like ts-jest for running Jest tests with TypeScript code. Currently, I am working on a TypeScript project in Node and everything seems t ...

Why is the table not sorting when I apply filters?

I am encountering an issue where the data filters and table sorting are not working together. When I apply filters, the sorting functionality stops working. The filters work fine independently, but once applied, they interfere with the sorting feature. Any ...

Experiencing a RepositoryNotFoundError in TypeORM, although I am confident that the repositories are properly registered

I am creating a new application using Next.js + TypeORM and encountering an issue with the integration. RepositoryNotFoundError: No repository for "User" was found. It seems like this entity is not registered in the current "default" connection? Althoug ...

What is the method for invoking a class method in Typescript from another method within the same class acting as an event handler?

I came across this TypeScript code that I need help with: class MyClass { constructor() { $("#MyButton").on("click", this.MyCallback); this.MyMethod(); } MyCallback = () => { $.ajax("http://MyAjaxUrl") ...

Tips for tidying up duplicated typescript content sourced from a pre-existing library

Seeking guidance on implementing best practices and gaining a better understanding of my approach. After discovering the library react-google-calendar-api, I successfully installed it using npm in my React project. However, I wanted to expand its function ...

Showcasing a single object in an IONIC/Angular application using the ngIF directive

I am in need of assistance as I have encountered an issue. Essentially, I am fetching an object from an external API (Strapi) using the GET method, but when attempting to display it on Views with ngIF, it fails to show up. https://i.sstatic.net/nFyOE.png ...

I am unable to add a new property to the request object in the Express framework

My goal is to add a new property to the request object in typescript. Here's the code snippet I'm using: import { request, Request, response, Response } from "express"; ((req: Request, res: Response) => { console.log(req.user); ...

How to extract a JavaScript object from an array using a specific field

When dealing with an array of objects, my goal is to choose the object that has the highest value in one of its fields. I understand how to select the value itself: Math.max.apply(Math, list.map(function (o) { return o.DisplayAQI; })) ... but I am unsur ...

The attribute 'photographs' is not defined within the category 'Image[]'

I'm attempting to retrieve a response from the Pexels API for images. My goal is to fill the empty defaultImages array within the photos object obtained from the response. import * as React from "react"; import { ChakraProvider} from "@ ...

Prevent click events on disabled tabs in PrimeNG tabMenu

I am encountering an issue with PrimeNG's p-tabMenu when it comes to disabled menu items. For example, suppose I have a tabMenu with 4 sub tabs labeled AAA, BBB, CCC, and DDD. This is how the menuItems are set up in the TypeScript component: //.... ...

Understanding the significance of emitDecoratorMetadata in transpiled code

I have a question regarding the significance of the emitDecoratorMetadata option when transpiling TypeScript to JavaScript in an Angular 2 environment. If this option is set to false, and metadata is not included in the final code, what impact will it ha ...

Encountering a Type Error while attempting to generate an HTML element from the typescript file within Angular 7

Attempting to convert some JavaScript code into TypeScript and create an HTML element from the ts. Here is the function causing issues: createSvgElem(name: string, attributes: any) { let node = document.createAttributeNS('http://www.w3.org/2000/s ...

What exactly constitutes an error in a problem?

There is no error @Component({ selector: 'app-root', template: '<h1>InlineTemplate</h1>', styles: ['h1{color:red;}']}) However, after pressing Enter, an error occurs @Component({ selector: ' app-root', ...

TypeScript struggles with resolving types in union types

Imagine you have a data structure that can either be an array of numbers or strings and you intend to iterate over this array. In TypeScript, there are various ways to handle this scenario that are all validated by the type checker. [1, 2].map(e => cons ...

Having difficulty in converting JSON objects into key/value pairs in Angular 7

I have a task to convert my JSON data from its current format as shown below: cacheMapDataDto = [{ "cacheName": "cache_nchl_individual_type", "count": 2, "mapObj": { "NCHL_BI_BATCH_VERIFICATION": false, "NCHL_STL_BATCH_VERIFICATIO ...

What are the steps to resolve the UglifyJs error stating 'Unexpected token operator'?

When running the following command in my Angular app: > ng build --prod --aot --env=staging I encounter this error message: ERROR in vendor.0625f773941bc83e6748.bundle.js from UglifyJs Unexpected token operator «*», expected punc «(» [vendor.0625 ...

The connections between module dependencies are unable to be resolved

I'm encountering an issue with the npm link command. Here's the scenario: I have two Angular apps - 1) app-core (published locally) 2) app-main The app-core module has the following dependencies (installed via npm): core rxjs z ...

Need help with resetting a value in an array when a button is clicked?

Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked. component.ts names = [{name: f ...

`In TypeScript Angular, encountering challenges with accessing object properties`

My TypeScript object looks like this const playlist: { tracks: Array<Track> } = { tracks: new Array<Track>() }; This is the Track interface I am working with interface Track { title?: string; album?: string; artists?: string; duration? ...