How To Use the Pick Type in TypeScript

Leverage TypeScript’s Pick utility type to extract properties from types you’ve already defined, creating a subset of that type.

Hello developers! 🎉 Today, we’ll delve into another powerful utility type in TypeScript: the Pick type. This utility type enables us to create new types by extracting set properties from existing ones.

As we progress, we’ll continue using our beloved creature, the mapache (raccoon) 🦝, to illustrate our examples. Let’s jump right in!

Understanding the Pick Type in TypeScript

The Pick utility type allows us to construct a type by picking a set of properties from another type. The Pick<Type, Keys> utility takes two parameters: the original Type from which we want to pick properties, and the Keys, which is a union of keys (property names) of that type.

Using Pick with Mapaches 🦝

Let’s see how Pick works with an example of a Mapache type that has a few properties defined on it, which I’ve uploaded to TypeScript Playground.

type Mapache = {
  age: number
  emoji: string
  name: string
}

type EmojiMapache = Pick<Mapache, 'emoji'>

const smilingMapache: EmojiMapache = { 
  emoji: '🦝'
}

In the example above, we defined a Mapache type with age, emoji, and name properties. Then, we used Pick to create a new EmojiMapache type that includes only the emoji property from Mapache. Therefore, an EmojiMapache only needs an emoji. That’s the Pick<Type, Keys> type.

When to Use Pick in TypeScript

The Pick utility type can be particularly useful when you want to create new types that include only some properties of an existing type. This can help make your code more flexible and reusable.

Imagine a scenario where you only want to display the emojis of the mapaches. You can use Pick<Mapache, 'emoji'> to create a type that fits this requirement, as we discussed in the last example.

Let’s take a look a more complex example with the Pick utility type, which I’ve also uploaded to TypeScript Playground. You know the drill 😉

type MapacheTeam = {
  leader: Mapache;
  member1: Mapache;
  member2: Mapache;
}

type EmojiMapacheTeam = {
  leader: EmojiMapache;
  member1: EmojiMapache;
  member2: EmojiMapache;
}

const mapacheTeam: MapacheTeam = {
  leader: { age: 5, emoji: "🦝", name: "Ricky" },
  member1: { age: 3, emoji: "🦝", name: "Mocha" },
  member2: { age: 4, emoji: "🦝", name: "Luna" },
}

function extractEmojis(team: MapacheTeam): EmojiMapacheTeam {
  const emojiTeam: EmojiMapacheTeam = {
    leader: { emoji: team.leader.emoji },
    member1: { emoji: team.member1.emoji },
    member2: { emoji: team.member2.emoji },
  }
  return emojiTeam
}

const emojiMapacheTeam = extractEmojis(mapacheTeam)

console.log(emojiMapacheTeam)
// Output: { leader: { emoji: '🦝' }, member1: { emoji: '🦝' }, member2: { emoji: '🦝' } }

In this example, we defined a MapacheTeam type and an EmojiMapacheTeam type. The MapacheTeam type contains a leader and two members, each with the full Mapache properties. The EmojiMapacheTeam type only has the emoji property for each team member.

We then created a function extractEmojis that takes a MapacheTeam and returns an EmojiMapacheTeam. This function demonstrates how to use the Pick utility type to create a new object with only the properties you need.

And that’s it for our dive into the Pick type! Stay tuned for more exciting adventures with TypeScript utility types in Totally TypeScript. Until next time, keep picking the properties you need and keep your code type-safe!

Happy coding! 🦝🚀

Read more: TypeScript Docs on the Pickys> built-in type.

Liked this article? Check out my other popular articles on modern web development and software engineering with JavaScript and TypeScript: