TypeScriptのオブジェクトにおけるプロパティの順番

型を指定しても順番通りとは限らない

以下の型指定がある場合

type StartedAtType = {
    year?: number;
    month?: number;
    date?: number;
}

以下のコードでは年-月-日にならない可能性がある。

const setStartedAt = (startedAt: StartedAtType | undefined): string | undefined => {
    if (!startedAt?.year || !startedAt?.month || !startedAt?.date) {
      return undefined;
    }

    return Object.values(startedAt).join('-');
  };

startedAtにyear → month → dateの順に設定されているStartedAtType型を指定しても、順番のチェックまではしてくれません。そのため、startedAtには以下のような値が格納されている可能性があります。通常のJavaScript同様にオブジェクトに登録された順番で値を保存する仕様であるためです。

startedAt = {
    month: 04;
    date: 23;
    year: 2024;
}

対応方法

以下のように実装することが必要です。

const setStartedAt = (startedAt: StartedAtType | undefined): string | undefined => {
    if (!startedAt?.year || !startedAt?.month || !startedAt?.date) {
      return undefined;
    }

    return `${startedAt.year}-${startedAt.month}-${startedAt.date}`;
  };

もしくは、以下のように値を初期化しておく（事前に決めた順番で登録する）ことで想定外の順番で登録されることが防げます。

const initStartedAt = {
    year: 2024
    month: 04
    date: 23
}
const [startedAt, setStartedAt] = useState(initStartedAt);