今日やったこと

• 「モダンJavaScriptの基本から始める React実践の教科書」 P229〜231
  • 8-6 省略可能な型の定義

学習メモ

開発していく中で Props の中には「設定される時もあればされない時もある」といったものも多くなってくる
そういった場合、user.ts型定義の各プロパティ名のあとに省略可能を明示する「?」をつける

export type User = {
    id: number;
    name: string;
    age: number;
    personalColor?: string;
};

「?」をつけることでpersonalColorの型定義は string | undefined と同義になる

ここで、「personalColorが未設定の場合は、文字色はデフォルトで灰色にしたい」といった要件があったとすれば、例えば分割代入のデフォルト値を設定することで対応可能

import type { FC } from "react";
import type { User } from "../types/user";

export const ListItem: FC<User> = props => {
    const { id, name, age, personalColor = "gray" } = props;
    return (
        <p style="{{ color: personalColor }}">
            {id}：{name}{(age)}
        </p>
    );
};

また、前段で解説したFCやVFCできちんと型定義している場合、Reactコンポーネントに使用できるdefaultPropsを使ってデフォルト値を設定しておくこともできる

import type { FC } from "react";
import type { User } from "../types/user";

export const ListItem: FC<User> = props => {
    const { id, name, age, personalColor } = props;
    return (
        <p style="{{ color: personalColor }}">
            {id}：{name}{(age)}
        </p>
    );
};

ListItem.defaultProps = {
    personalColor: "grey";
};

これらのように省略可能なPropsに対してデフォルトの挙動を設定しておくことで、
よりほかの開発者が見た時に理解しやすいコンポーネントとなるし
Propsが未設定の場合も安定して動作させることが可能となる

所感

Propsにデフォルトの値を設定する方法について学びました。よく使いそうです。