TypeScript Adventures with type-challenges – Day Pick

Hello everyone.
I'm working through type-challenges to dive deeper into TypeScript.

Today, I’d like to share what I learned about the Pick.

- The challenge -

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

Implement the built-in Pick generic without using it.
Constructs a type by picking the set of properties K from T.

- Description -

The challenge is to create your own version of the Pick utility type, which TypeScript provide as a standard utility.

- My solution -

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type MyPick<T, U extends keyof T> = {
  [k in U]: T[k];
};

type TodoPreview = MyPick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

- Explanation -

Let me explain, line by line.

On the first line, MyPick receives two arguments: T and U extends keyof T.

T：The base type that includes all properties.
U extends keyof T：Specifies the properties to include in the output type.

About keyof
About extends

On the second line,
It creates a new type which extracts only the specified properties from the given argument.

About Mapped Types such as [k in U]

As you can see below, a new type that excludes description from Todo is created by providing only title and completed to MyPick.

Happy Coding☀️

The above is the detailed content of TypeScript Adventures with type-challenges – Day Pick. For more information, please follow other related articles on the PHP Chinese website!