😶

【TypeScript】型の中から特定のものを指定する（Pick）

に公開
React
TypeScript
pick
tech

Pickとは

Pickとはなんぞや。
PickはTypeScriptで「あの型を流用したいがここの一部だけでいいんだよなぁ」という時に使えるUtility Typesの一つ。（ざっくり）

実際に見てみよう

基本的な使い方

例えば以下のような型があるとします。

type Hoge = {
  id: number
  title: string
  text: string
}

この型の中からidとtitleだけ使いたいと思った時に

type Moge = {
  id: number
  title: string
}

と定義し直すのではなく、

type Moge = Pick<Hoge, "id" | "title">

Hogeという型から"id"と"title"だけ取り出すことができます。
簡単ですよね。

Pickで指定したものに新たなプロパティを追加したい場合

例えば上記のようにHogeという型から"id"と"title"だけ取り出しつつ、新たにプロパティを追加するパターンはよくあります。その時は以下のように書きます。

type Poge = Pick<Hoge, "id" | "title"> & {
  type: "news" | "event"
  date: string
}

これはHogeという型から"id"と"title"を取り出しつつ、"type"と"date"を追加しています。

実際にReact*TypeScriptで使ってみよう

// ユーザー情報の型
type User = {
  id: number
  name: string
  email: string
  age: number
}

...

// ユーザー情報カードの型
type UserCardProps = Pick<User, "name" | "age">

export function UserCard({ name, age }: UserCardProps) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}歳</p>
    </div>
  )
}

ユーザー情報の型の中から"name"と"age"だけを取り出して、ユーザー情報カード用の型を作成しています。

最後に

Pickは便利ではありますが、乱用は避けるようにしましょう。
元の型を知らないとなんの型なのかわかりづらくなってしまったり、依存関係によりどこかの型を変えたら別のコンポーネントが壊れるというようなリスクがあるためです。

明確なルールを設けて、意図のあるPickの使用を心がけましょう。

Discussion