readonly, union, Pick, Extract, Awaitedなどの型定義を紹介

最近学んだ型定義をいくつか紹介します。

1. readonly

readonlyは、オブジェクト型のプロパティを読み取り専用にすることができます。

type TestItem = {
	readonly label: string
	readonly content: string
}
export const ProfileInfo = ({ label, content }: TestItem) => {
	return (
		<>
			<p>{label}</p>
			<p>{content}</p>
		</>
	)
}

これを使うことで、値を書き換えようとするとコンパイルエラーが起きます。

	const item: TestItem = { label: "名前", content: "田中 太郎" }
	item.label = "年齢"
    //読み取り専用プロパティであるため、'label' に代入することはできません。

明示的に表示用を表したい場合は便利です。

2. ユニオン型

ユニオン型は2種類以上の型定義をできます。
下記だとstring, numberの型定義をできます。

let value: string | number

そのため、複数の型定義をしたい場合には便利です。

3. Pick

Pickは、オブジェクト型から特定のプロパティだけを選択して新しい型を作るユーティリティ型です。

type User = {
  id: number
  name: string
  email: string
  age: number
}

// User から "id" と "name" だけを抽出
type UserSummary = Pick<User, "id" | "name">

const user: UserSummary = {
  id: 1,
  name: "田中 太郎",
  // email: "[e-mail]"  // エラー: email は UserSummary に存在しない
}

使いどころとしては、必要なプロパティだけを抽出し、型をシンプルにする場合や、
APIのレスポンス型を一部利用する場合に便利です。

自分も下記のように使ってたりします。

export interface GetUser {
  admin: number
  bio: string
  email: string
  favorite: string[]
  id: string
  profileImage: string
  userid: string
  userName: string
}

export type ProfileParams = Pick<GetUser, 'profileImage' | 'id' | 'userName' | 'bio' | 'favorite'>

4. Extract

Extractは、ユニオン型から該当する型のみを抽出するユーティリティ型です。

type Status = "success" | "error" | "loading"
type SuccessOrError = Extract<Status, "success" | "error"> // "success" | "error"

また、具体的な型を抽出することも可能です。

type Data = string | number | boolean
type OnlyStringOrNumber = Extract<Data, string | number> // string | number

ユニオン型から取り出す場合はExtractを使い分けましょう。

5. Awaited<T>

Awaited<T> は、TypeScript4.5で導入された、型Promise<T> の中のTを取り出すためのユーティリティ型です。

type FetchData = Promise<string>
type ResolvedData = Awaited<FetchData> // string

また、非同期関数の戻り値から型を取得するのにも便利です。

async function fetchData() {
  return { id: 1, name: "田中" }
}

type DataType = Awaited<ReturnType<typeof fetchData>>
// { id: number, name: string }

ぜひさまざまな型があるので使ってみて下さい。