Next.js学習中に出てきたTypeScriptの型を整理する
·4 min read
codexと一緒にNext.jsの学習中。 学習中に出てきたType Scriptの型union typeについてアウトプットする。
union type
union typeは、使える値を限定する型。 stringにすると何でも入ってしまうけど、union typeにすると選択肢を限定できる。
WorkStatus は "draft" か "published" だけ入れられるという意味。
type WorkStatus = "draft" | "published";optional property
url?:stringは optional propertyと呼ばれる書き方。
?を付けると、そのプロパティは「あってもなくてもよい」になる。
urlがある場合はstring、ない場合はundefinedとして扱われる。
考え方としてはstring|undefinedに近い。
type Work = {
title: string;
category: string;
summary: string;
status: WorkStatus;
url?: string;
};urlは存在しない可能性があるため、表示するときは条件分岐する。 下記はurlがあるときだけリンクを表示するという意味。
{url?(
<a href={url}>
サイトを見る
</a>
)}型を別ファイルに切り出す
TypeScriptの型は、ページファイルの中だけでなく、別ファイルに切り出して再利用できる。export typeすることで別ファイルから読み込むことができる。
export type WorkStatus = "draft" | "published";
export type Work = {
title: string;
category: string;
summary: string;
status: WorkStatus;
url?: string;
};型だけを読み込む
型だけを読み込むときはimport typeを使う。
import type { Work } from "@/types/work";なぜ型を別ファイルに分けるのか
型を別ファイルに分けると、複数のページやコンポーネントで同じ型を使い回せる。
例えば、制作実績の一覧ページと詳細ページの両方でWork型を使いたい場合、毎回同じ型を書く必要がなく便利。
#型の定義場所を1つにしておくと、後から項目を追加したいときも管理しやすい
src/types/work.ts
↓
src/app/works/page.tsx
src/app/works/[slug]/page.tsx型を使って実装ミスを防ぐ
型はデータの形を決めるだけでなく、UIに渡してよいデータを安全に絞り込むためにも使える。
statusの値をunion typeで限定する
↓
filterでpublishedだけ取り出す
↓
mapで表示するfilterで使って良いデータに絞り込み、そのデータをmapで表示。
type WorkStatus = "draft" | "published";
const works: Work[] = [
{
title: "Sakura Dental Clinic",
category: "Webサイトリニューアル",
summary:
"予約導線を見直し、スマートフォンからの問い合わせ率改善を目指した事例です。",
status: "published",
url: "https://example.com",
},
{
title: "North Table",
category: "レストランLP",
summary:
"季節メニューの魅力を伝える、広告用ランディングページの制作事例です。",
status: "published",
},
];
const publishedWorks = works.filter((work) => work.status === "published");
{publishedWorks.map((work) => (
<WorkCard key={work.title} {...work} />
))}