Linking key value pairs through a TypeScript interface

Question

Linking key value pairs through a TypeScript interface

coding

  interface StoreActions {
    setUserName: string
    actionOne: string[]
    actionTwo: { testValue: string }
  }

  interface CustomActions extends AnyAction {
    typeOfAction: keyof StoreActions
    // additionalData:???
  }

The attribute typeOfAction in CustomActions corresponds to the keys in StoreActions

Anticipated Results

For typeOfAction = 'setUserName', the data type is string
For typeOfAction = 'actionOne', the data type is string[]
For typeOfAction = 'actionTwo', the data type is { testValue: string }

Feasibility and Method

typescript

Answer 1

Answer №1

If you're faced with this scenario, there are a couple of routes you can take.

One approach is to utilize a discriminated union encompassing all possible types. By creating the union using a mapped type, TypeScript can effectively narrow down the type. This method is generally recommended for its efficiency. Check out this Playground to see it in action.

interface StoreActions {
    setUser: string
    action1: string[]
    action2: { test: string }
}

type MakeUnion<T> = {
    [K in keyof T]: { type: K, data: T[K] }
}[keyof T]


interface AnyAction {
    other: 'common properties that all actionsH members have'
}

type ActionsH = MakeUnion<StoreActions> & AnyAction

Alternatively, you can make the interface generic and use the key from the generic to determine the type of the data property. This method allows for greater flexibility and customization. Visit this Playground to experiment with this concept.

interface StoreActions {
    setUser: string
    action1: string[]
    action2: { test: string }
}

interface AnyAction {
    other: 'common properties that all actionsH members have'
}

interface ActionH<K extends keyof StoreActions> extends AnyAction {
    type: K
    data: StoreActions[K]
}

Answer 2

If you're faced with this scenario, there are a couple of routes you can take.

One approach is to utilize a discriminated union encompassing all possible types. By creating the union using a mapped type, TypeScript can effectively narrow down the type. This method is generally recommended for its efficiency. Check out this Playground to see it in action.

interface StoreActions {
    setUser: string
    action1: string[]
    action2: { test: string }
}

type MakeUnion<T> = {
    [K in keyof T]: { type: K, data: T[K] }
}[keyof T]


interface AnyAction {
    other: 'common properties that all actionsH members have'
}

type ActionsH = MakeUnion<StoreActions> & AnyAction

Alternatively, you can make the interface generic and use the key from the generic to determine the type of the data property. This method allows for greater flexibility and customization. Visit this Playground to experiment with this concept.

interface StoreActions {
    setUser: string
    action1: string[]
    action2: { test: string }
}

interface AnyAction {
    other: 'common properties that all actionsH members have'
}

interface ActionH<K extends keyof StoreActions> extends AnyAction {
    type: K
    data: StoreActions[K]
}

Linking key value pairs through a TypeScript interface

coding

Anticipated Results

Feasibility and Method

Answer №1

Similar questions

When using TypeScript, a typed interface will not permit a value that is not within its specified string literal type

I'm encountering issues with undefined parameters in my component while using generateStaticParams in Next.js 13. What is the correct way to pass them

Can all objects within an interface be iterated through in order to retrieve both the key and its corresponding value?

When you use array[index] in a Reduce function, the error message "Property 'value' is not defined in type 'A| B| C|D'" might be displayed

Is the "Angular is not functioning" error message the result of a missing import?

Receiving feedback from an http.post request and transferring it to the component.ts file in an Angular

Angular, perplexed by the output displayed in the console

Discover the power of TypeScript's dynamic type inference in functions

The status of the 'slider' may be 'undefined'

Developing middleware for managing event handlers

Addressing ESLint and TypeScript Issues in Vue.js with Pinia: A comprehensive guide

Cosmic - Ways to incorporate personalized validation strategies into the `getConfigValue()` function?

Bring in a function by its name from the ts-nameof package that is not declared in the d.ts export

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Exporting Types in an NPM Package: Best Practices

Next.js is having trouble identifying the module '@types/react'

Using references to pass variables in TypeScript [Angular 8]

Develop a custom class for importing pipes in Angular 4

Creating a dynamic union type in Typescript based on the same interface properties

Asynchronously download static images with the power of NextJS and TypeScript integration