What are the steps to incorporating the pick function in TypeScript?

Question

What are the steps to incorporating the pick function in TypeScript?

The TypeScript documentation mentions a pick function that is declared but not implemented. In an attempt to create a simplified version, I wrote the following:

function pick<T, K extends keyof T>(obj: T, key: K): Pick<T, K> {
  return { [key]: obj[key] }
}

When testing this implementation, I encountered the error message: "TS2322: Type { [x: string]: T[K]; } is not assignable to type Pick." The issue seems to be related to key being generalized as string instead of keyof T. Is it possible to implement pick without resorting to using any or explicit casting like as Pick<T, K>? Additionally, I want to emphasize that I do not wish to utilize Partial<T> as a return type, but rather return a specific field chosen by the user.

As an alternative approach, I also attempted the following:

function pick<T, K extends keyof T>(obj: T, key: K): { [key in K]: T[K] } {
  return { [key]: obj[key] }
}

Unfortunately, this resulted in a similar error. My current TypeScript version is 4.7.4.

typescript type-conversion

Answer 1

Answer №1

Currently, TypeScript has a limitation where a computed property key with a type that is not a single string literal type gets widened to the type string. Visit microsoft/TypeScript#13948 for more details. To work around this, you'll need to use a type assertion.

This issue hasn't been resolved yet because defining {[k]: v} as of type Record<typeof k, typeof v> doesn't work when typeof k is a union type or a generic type which might resolve to a union type. This complicates the situation as Record<typeof k, typeof v> ends up having all keys whereas {[k]: v} should have only one.

The same problem arises in the implementation of your pick() function. The return type of pick(obj, key) might not be Pick<T, K> due to possible unions in K, making it a challenging scenario to handle.

The correct approach for pick(obj, key) would involve distributing Pick<T, K> across unions in K. You can achieve this using a distributive conditional type like

K extends keyof T ? Pick<T, K> : never

or a distributive object type such as

{[P in K]-?: Pick<T, K>}[K]

.

For instance, consider the following example:

interface Foo {
    a: number,
    b: number
}
const foo: Foo = { a: 0, b: 1 }
const someKey = Math.random() < 0.5 ? "a" : "b";
// const someKey: "a" | "b"

const result = pick(foo, someKey);

In this case, we don't want result to be of type

Pick<Foo, "a" | "b"></code, which essentially just equals <code>Foo

. To address this, define pick() to return one of the distributive types mentioned earlier and utilize a type assertion accordingly:

function pick<T, K extends keyof T>(obj: T, key: K) {
    return { [key]: obj[key] } as K extends keyof T ? Pick<T, K> : never
}

With this modification, the outcome is as follows:

const result = pick(foo, someKey);
// const result: Pick<Foo, "a"> | Pick<Foo, "b">

Hence, result is either a Pick<Foo, "a"> or a Pick<Foo, "b">, satisfying the desired behavior.

Playground link to code

Answer 2

Currently, TypeScript has a limitation where a computed property key with a type that is not a single string literal type gets widened to the type string. Visit microsoft/TypeScript#13948 for more details. To work around this, you'll need to use a type assertion.

This issue hasn't been resolved yet because defining {[k]: v} as of type Record<typeof k, typeof v> doesn't work when typeof k is a union type or a generic type which might resolve to a union type. This complicates the situation as Record<typeof k, typeof v> ends up having all keys whereas {[k]: v} should have only one.

The same problem arises in the implementation of your pick() function. The return type of pick(obj, key) might not be Pick<T, K> due to possible unions in K, making it a challenging scenario to handle.

The correct approach for pick(obj, key) would involve distributing Pick<T, K> across unions in K. You can achieve this using a distributive conditional type like

K extends keyof T ? Pick<T, K> : never

or a distributive object type such as

{[P in K]-?: Pick<T, K>}[K]

.

For instance, consider the following example:

interface Foo {
    a: number,
    b: number
}
const foo: Foo = { a: 0, b: 1 }
const someKey = Math.random() < 0.5 ? "a" : "b";
// const someKey: "a" | "b"

const result = pick(foo, someKey);

In this case, we don't want result to be of type

Pick<Foo, "a" | "b"></code, which essentially just equals <code>Foo

. To address this, define pick() to return one of the distributive types mentioned earlier and utilize a type assertion accordingly:

function pick<T, K extends keyof T>(obj: T, key: K) {
    return { [key]: obj[key] } as K extends keyof T ? Pick<T, K> : never
}

With this modification, the outcome is as follows:

const result = pick(foo, someKey);
// const result: Pick<Foo, "a"> | Pick<Foo, "b">

Hence, result is either a Pick<Foo, "a"> or a Pick<Foo, "b">, satisfying the desired behavior.

Playground link to code

Answer 3

Answer №2

If you want to create the object and then return it, you can use a function like the one below:

function select<T, K extends keyof T>(object: T, property: K): Pick<T, K> {
  let result: any = {}  
  result[property] = object[property]

  return result
}

To see this code in action, click here.

Answer 4

If you want to create the object and then return it, you can use a function like the one below:

function select<T, K extends keyof T>(object: T, property: K): Pick<T, K> {
  let result: any = {}  
  result[property] = object[property]

  return result
}

To see this code in action, click here.

What are the steps to incorporating the pick function in TypeScript?

Answer №1

Answer №2

Similar questions

The issue arises when attempting to use the search feature in Ionic because friend.toLowerCase is not a valid function

The first argument passed to CollectionReference.doc() must be a string that is not empty

Challenges encountered when retrieving parameters from union types in TypeScript

The challenge of extending a TypeScript generic to accept an Array type with unrelated elements

Angular Error: Cannot call function panDelta on this.panZoomAPI

When working with Typescript, you can declare an interface and split its definition across multiple files

Challenges arise with data updating following a mutation in @tanstack/react-query

Unable to perform navigation during page load in a React.js application

Combining the output of two Observables through the CombineLatest method to generate a

What is the best way to automatically focus on my input when the page loads?

Errors are not displayed in vee-validate for objects

React: Why aren't class methods always running as expected?

What could be causing Typescript Intellisense to not display Object extensions?

react-vimeo not firing onPause and onPlay events

What is the significance of parentheses when used in a type definition?

Tips for quietly printing a PDF document in reactjs?

Leveraging generics within TypeScript

Error TS2339: The 'selectpicker' property is not found on the 'JQuery<HTMLElement>' type

Observing changes in a parent component variable with Angular

Discovering all words enclosed by '#' in a string using React TypeScript