Guide on creating a TypeScript function that extracts specific properties from an object using a filter criteria

Question

Guide on creating a TypeScript function that extracts specific properties from an object using a filter criteria

Look at the code snippet provided below.

interface IEmployee {
    ID: string
    Employee: string
    Phone: number
    Town: string
    Email: string
    Name: string
}

// Retrieve all properties of type IEmployee 
let allProps = findSpecificItem<IEmployee>("ID = 1234234")

// Select only specific properties like Email and Phone from IEmployee  
let picked = findSpecificItem<IEmployee>("ID = 1234234", ["Email", "Phone"])

How would you define the function findSpecificItem? Is it possible to maintain compatibility with the existing calling code?

Possible approaches

Using arrays (Not recommended, does not work)

The following implementation is not functional as typeof fields[number] will result in Array<keyof T>

function findSpecificItem<T>(filter: string, fields: Array<keyof T> =[]): Pick<T,typeof fields[number]> {
    return db.select(filter, fields)
}

Introducing a second generic parameter (Effective approach)

This method works but might be less straightforward to understand

function select<T, K extends Partial<T> = T>(filter: string, fields = Array<keyof K>): K {
    return db.select(filter, fields)
}

const props = ["Email", "Phone"] as const
type propsType = Pick<IEmployee, typeof props[number]>

let allProps = select<IEmployee>("Employee: 1234234")
let picked = select<IEmployee, propsType>("Employee: 1234234")

typescript typescript-generics

Answer 1

Answer №1

In order to achieve functionality, it is necessary for findOne() to have generics in two type parameters: T, which corresponds to the base object type being found, and K, which corresponds to the union of keys from T that you want to select. The ideal implementation would look like this:

declare const findOne: <T, K extends keyof T>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

However, there's a drawback. When calling findOne(), you want to manually specify T, while also expecting the compiler to infer K from the keys argument without manual specification. Unfortunately, TypeScript does not support partial type argument inference. You either have to specify all type arguments or allow the compiler to infer all of them. (Even setting a default type argument for K doesn't enable partial inference; the compiler still won't infer it, but will fall back to the default.)

An ongoing feature request exists at microsoft/TypeScript#26242 for partial type argument inference. It might be possible one day to write something like this:

// THIS IS NOT VALID TYPESCRIPT, PLEASE DON'T TRY IT
declare const findOne: <T, K extends keyof T = infer>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

Until this feature is implemented, workarounds are required.

A preferred workaround involves currying the function, splitting the two type parameter function into one type parameter returning another function with a different type parameter, as shown here:

declare const findOne: <T>() => <K extends keyof T>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

This allows you to manually specify <T> when calling findOne, and the returned function will infer K:

let allProps: IEmployee = findOne<IEmployee>()("ID = 1234234")
let picked = findOne<IEmployee>()("ID = 1234234", ["Email", "Phone"])
// let picked: { Phone: number; Email: string; }

Although the extra function call may seem odd, it is effective! Once you start using curried functions in this manner, storing intermediate results for reuse becomes easier:

const findOneIEmployee = findOne<IEmployee>();
allProps = findOneIEmployee("ID = 1234234");
picked = findOneIEmployee("ID = 1234234", ["Email", "Phone"]);

Playground link to code

Answer 2

In order to achieve functionality, it is necessary for findOne() to have generics in two type parameters: T, which corresponds to the base object type being found, and K, which corresponds to the union of keys from T that you want to select. The ideal implementation would look like this:

declare const findOne: <T, K extends keyof T>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

However, there's a drawback. When calling findOne(), you want to manually specify T, while also expecting the compiler to infer K from the keys argument without manual specification. Unfortunately, TypeScript does not support partial type argument inference. You either have to specify all type arguments or allow the compiler to infer all of them. (Even setting a default type argument for K doesn't enable partial inference; the compiler still won't infer it, but will fall back to the default.)

An ongoing feature request exists at microsoft/TypeScript#26242 for partial type argument inference. It might be possible one day to write something like this:

// THIS IS NOT VALID TYPESCRIPT, PLEASE DON'T TRY IT
declare const findOne: <T, K extends keyof T = infer>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

Until this feature is implemented, workarounds are required.

A preferred workaround involves currying the function, splitting the two type parameter function into one type parameter returning another function with a different type parameter, as shown here:

declare const findOne: <T>() => <K extends keyof T>(
  query: string, keys?: K[]
) => { [P in K]: T[P] }

This allows you to manually specify <T> when calling findOne, and the returned function will infer K:

let allProps: IEmployee = findOne<IEmployee>()("ID = 1234234")
let picked = findOne<IEmployee>()("ID = 1234234", ["Email", "Phone"])
// let picked: { Phone: number; Email: string; }

Although the extra function call may seem odd, it is effective! Once you start using curried functions in this manner, storing intermediate results for reuse becomes easier:

const findOneIEmployee = findOne<IEmployee>();
allProps = findOneIEmployee("ID = 1234234");
picked = findOneIEmployee("ID = 1234234", ["Email", "Phone"]);

Playground link to code

Answer 3

Answer №2

Not entirely sure if this is what you're looking for, but here's a variation of findOne that might help.

interface Cat {
  name: string
  age: number
  breed: string
  id: number
}

const cats: Cat[] = [
  {
    id: 1,
    name: 'Whiskers',
    age: 2,
    breed: 'Siamese'
  },
  {
    id: 2,
    name: 'Mittens',
    age: 5,
    breed: 'Persian'
  },
  {
    id: 3,
    name: 'Felix',
    age: 7,
    breed: 'Maine Coon'
  }
]

function findUnique<DataType, KeyType extends keyof DataType>(
  filter: [KeyType, keyof KeyType],
  items: DataType[],
  keys: KeyType[]
): Partial<DataType> | undefined {
  for (const item of items) {
    if (item[filter[0]] === filter[1]) {
      return {
        ...keys.reduce((acc, key) => {
          return {
            ...acc,
            [key]: item[key]
          }
        }, {})
      }
    }
  }
}

const cat = findUnique(['age', 7], cats, ['id', 'age'])

returns {
   id: 3, age: 7
}

To clarify things further, we can use an object for the filter:

function findUnique<DataType, KeyType extends keyof DataType>(
  filter: {
    key: KeyType
    value: keyof KeyType
  },
  items: DataType[],
  keys: KeyType[]
): Partial<DataType> | undefined {
  for (const item of items) {
    if (item[filter.key] === filter.value) {
      return {
        ...keys.reduce((acc, key) => {
          return {
            ...acc,
            [key]: item[key]
          }
        }, {})
      }
    }
  }
}

const cat = findUnique(
  {
    key: 'id',
    value: 1
  },
  cats,
  ['id', 'age']
)

Answer 4

Not entirely sure if this is what you're looking for, but here's a variation of findOne that might help.

interface Cat {
  name: string
  age: number
  breed: string
  id: number
}

const cats: Cat[] = [
  {
    id: 1,
    name: 'Whiskers',
    age: 2,
    breed: 'Siamese'
  },
  {
    id: 2,
    name: 'Mittens',
    age: 5,
    breed: 'Persian'
  },
  {
    id: 3,
    name: 'Felix',
    age: 7,
    breed: 'Maine Coon'
  }
]

function findUnique<DataType, KeyType extends keyof DataType>(
  filter: [KeyType, keyof KeyType],
  items: DataType[],
  keys: KeyType[]
): Partial<DataType> | undefined {
  for (const item of items) {
    if (item[filter[0]] === filter[1]) {
      return {
        ...keys.reduce((acc, key) => {
          return {
            ...acc,
            [key]: item[key]
          }
        }, {})
      }
    }
  }
}

const cat = findUnique(['age', 7], cats, ['id', 'age'])

returns {
   id: 3, age: 7
}

To clarify things further, we can use an object for the filter:

function findUnique<DataType, KeyType extends keyof DataType>(
  filter: {
    key: KeyType
    value: keyof KeyType
  },
  items: DataType[],
  keys: KeyType[]
): Partial<DataType> | undefined {
  for (const item of items) {
    if (item[filter.key] === filter.value) {
      return {
        ...keys.reduce((acc, key) => {
          return {
            ...acc,
            [key]: item[key]
          }
        }, {})
      }
    }
  }
}

const cat = findUnique(
  {
    key: 'id',
    value: 1
  },
  cats,
  ['id', 'age']
)

Guide on creating a TypeScript function that extracts specific properties from an object using a filter criteria

Possible approaches

Using arrays (Not recommended, does not work)

Introducing a second generic parameter (Effective approach)

Answer №1

Answer №2

Similar questions

Is it possible to release a typescript package without including the ts files in the

What is the proper way to utilize RxJS to append a new property to every object within an array that is returned as an Observable?

What is causing ESLint to point out the issue with the @inheritdoc tag?

Encountering an infinite loop issue with React's useEffect and context: How to solve the "maximum update depth exceeded" console error

Is it feasible to differentiate generic argument as void in Typescript?

Attempting to create a fresh string by substituting certain characters with different ones

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Encountering an issue while attempting to incorporate an interface within a class in TypeScript

In what situations might a finally block fail to execute?

Unable to execute dockerfile on local machine

Error message in Angular 2 RC-4: "Type 'FormGroup' is not compatible with type 'typeof FormGroup'"

What is the best approach to upgrade this React Native code from version 0.59.10 to version 0.72.5?

Utilizing Svelte to Retrieve User Input through Store Functions

Verify that the password is entered correctly in Angular2

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

Setting up Typescript for a Node.js project configuration

`Firebase User Instance and Custom Firestore Document`

When multiple input fields with an iterative design are using the same onChange() function, the specific event.target.values for each input

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js

Switching out a traditional class component with a functional component within a hook to deduce properties from T