Using Typescript to retrieve a property by its name using a string as a generic type

Question

Using Typescript to retrieve a property by its name using a string as a generic type

I messed up the title, not sure the exact term for what I am trying to achieve. Type constraints are a bit confusing to me right now as I'm learning them in both F# and Typescript at the same time.

I have a variable called interface state that contains lists of all the necessary data types for the page

interface state{
    clients: clients[]
    appointments: appointments[]
    ...
}

const ApplicationState : state = {...}

I need a generic function that can retrieve a specific client, appointment, or any other data by its id.

For example:

getData('clients', 2)

To start, I defined a type with permitted properties (if there's a better way to do this, please let me know).

type entity = "clients" | "appointments"

But would it then be possible to access the property of ApplicationState?

So, could the getData function look something like this?

const getData = (foo: entity, id: number) => {
    ApplicationState.magicallyGetPropertyByName.filter(entity => entity.id = foo.id)
}

Is it achievable while still maintaining type inference?

Appreciate your help

typescript

Answer 1

Answer №1

The primary issue at hand is the inability to use filter on a union type like in the following example:


type Clients = {
  tag: 'Clients'
  id: number
}

type Appointments = {
  tag: 'Appointments'
  id: number
}

declare const test: Clients[] | Appointments[]

test.filter(elem => elem)

For more information, refer to issues/7294 and issues/13097

However, there is a workaround available:

type Clients = {
  tag: 'Clients'
  id: number
}

type Appointments = {
  tag: 'Appointments'
  id: number
}

type State = {
  clients: Clients[]
  appointments: Appointments[]
}

type Entity = keyof State;

declare const ApplicationState: State

const withState = <
  S extends Record<string, { id: number }[]>
>(state: S) =>
  <E extends keyof S>(prop: E, id: number) =>
    state[prop].filter(entity => entity.id === id)

const getData = withState(ApplicationState);

getData('clients', 2)

Playground It's worth noting that I defined State as a type instead of an interface because interfaces are not indexed by default. Reverting it back to an interface will result in an error when using withState.

In actuality, you don't need precise types for clients and appointments; you just need to ensure they share a common property like id.

Answer 2

The primary issue at hand is the inability to use filter on a union type like in the following example:


type Clients = {
  tag: 'Clients'
  id: number
}

type Appointments = {
  tag: 'Appointments'
  id: number
}

declare const test: Clients[] | Appointments[]

test.filter(elem => elem)

For more information, refer to issues/7294 and issues/13097

However, there is a workaround available:

type Clients = {
  tag: 'Clients'
  id: number
}

type Appointments = {
  tag: 'Appointments'
  id: number
}

type State = {
  clients: Clients[]
  appointments: Appointments[]
}

type Entity = keyof State;

declare const ApplicationState: State

const withState = <
  S extends Record<string, { id: number }[]>
>(state: S) =>
  <E extends keyof S>(prop: E, id: number) =>
    state[prop].filter(entity => entity.id === id)

const getData = withState(ApplicationState);

getData('clients', 2)

Playground It's worth noting that I defined State as a type instead of an interface because interfaces are not indexed by default. Reverting it back to an interface will result in an error when using withState.

In actuality, you don't need precise types for clients and appointments; you just need to ensure they share a common property like id.

Using Typescript to retrieve a property by its name using a string as a generic type

Answer №1

Similar questions

I am currently working on configuring a webhook utilizing the Stripe platform with NextJS version 13.2.3

Encountering issues with Typescript when providing parameters for res.status().json()

Moment-Timezone defaults to the locale settings after the global Moment locale has been established

What could be the reason for the absence of a TypeScript error in this situation?

Top method for allowing non-component functions to update Redux state without the need to pass store.dispatch() as a parameter

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Angular module with customizable configurations

The redirection code is not being executed when calling .pipe() before .subscribe()

How should dynamic route pages be properly managed in NextJS?

Some elements that fit the criteria of 'number | function' are not callable at all

Creating Typescript libraries with bidirectional peer dependencies: A complete guide

Setting up @cypress/code-coverage with Angular and TypeScript: A comprehensive guide

Angular 8 encountered a 404 (Not Found) error when trying to POST to http://localhost:4200/assets/data/students.json

Guide on navigating to a specific page with ngx-bootstrap pagination

When using tsdx with React, null values can prevent proper usage of hooks

Yelp API call resulting in an 'undefined' response

Issues with updating values in Angular form controls are not being resolved even with the use of [formControl].valueChanges

How can Node / Javascript import various modules depending on the intended platform?

Combining Closure Compiler with Typescript

What is causing the error TS2339 to be thrown when attempting to access a class property in this TypeScript illustration: "Property 'text' does not exist on type 'T'"?